如何将哈巴狗添加到 angular-cli？

Question

任何有幸将 .pug 添加到 angular-cli 的人？

我尝试执行 npm install pug --save，但我不知道在哪里更改 .pug 渲染而不是 .html。

angular-cli 的链接是here

请分享一个简短的教程，这将帮助很多人:)

Answer 1

所以在阅读了 angular-cli git 之后，实现 pug 不是在不久的将来。

所以这是我的解决方法：它不是 angular-cli，而是运行 angular2 final 的更新生成器。

使用来自 AngularClass 的 angular2-webpack 生成器 - here （只需遵循详细记录的说明）

想要哈巴狗吗？没问题，点击链接here

想要Scss？没问题，点击链接here

为了简短起见，只需执行 npm 安装并将这些行添加到 webpack.common 文件中。并在你的组件中使用 require() 和 ./filename.pug :) 但是按照链接，你会没事的。

感谢 AngurlarClass

这就是我要找的东西 - angular2、typescript、scss 和 pug.. Yum Yum！

      loaders: [
        { 
          test: /\.pug$/, 
          loader: 'pug-html-loader' 
        },
        {
          test: /\.scss$/,
          exclude: /node_modules/,
          loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
        },

Answer 2

对于 Angular 6+，您只需在根文件夹中运行 ng add ng-cli-pug-loader 命令即可在您的 angilar-cli 项目中启用 pug 支持。

Answer 3

使用angular-cli 可以解决此问题。

• 使用npm install pug-cli --save-dev 安装pug-cli。现在您可以将您的.pug 文件编译成.html。
• 在package.json 的脚本中添加新的script 行："puggy": "pug src -P -w"。这会将src 中的所有.pug 编译成.html 并开始观看它们。当然，任务的名称并不重要。
• 编辑您的start 任务，或创建一个新任务，首先运行puggy，然后运行serve："start" : "npm run puggy & ng serve"。

您的package.json 应如下所示：

"scripts": {
    "ng": "ng",
    "start" : "npm run puggy & ng serve",
    "puggy": "pug src -P -w",
    . . . other tasks
}

现在，只需在终端中运行 npm start 或您为任务指定的任何名称，您应该会看到您的所有 .pug 文件正在编译/监视/渲染，然后一切都已准备就绪。

我建议您将所有.html 文件添加到您的.gitignore 中，将/src/**/*.html 添加到其中，并且只将.pug 文件推送到您的存储库中。确保使用 git rm --cached *.html 删除缓存的 .html 文件。

现在你可以写一个类似的表格

form(novalidate, '#f'='ngForm', '(ngSubmit)'='onSignin(f)')

然后编译成html

<form novalidate="novalidate" #f="ngForm" (ngSubmit)="onSignin(f)"></form>

Answer 4

多年来，我一直在使用（相当脆弱的）ng-cli-pug-loader 方法。它有一个目的，我对此表示感谢，但我开发了一种（稍微不那么脆弱）添加哈巴狗支持的方法。它不是通过 Angular CLI 自动实现的——也许有人可以提供帮助？但就目前而言，对于我认为的卓越解决方案而言，步骤并不多。

我为后代记录了 Angular pug solution here，请查看自述文件的顶部以获取解释。

如果您想要一个更简单的方法（不会创建新的 AngularCompilerPlugin），请查看angular.webpack.js 和函数addSimplePugSupport。

如果您发现此问题，请通过此处的 cmets 或我的 Git 存储库告诉我。

Answer 5

如果你想要手写笔。

{
    test:/\.styl$/,
    use: ['to-string-loader', 'css-loader', 'stylus-loader'],           
}

SCSS 的配置已更改

{
    test: /\.scss$/,
    use: ['to-string-loader', 'css-loader', 'sass-loader'],
    exclude: [helpers.root('src', 'styles')]
 }