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

Question

有人有幸将 .pug 添加到 angular-cli 吗？

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

Link 对于 angular-cli 是 here

请分享一个简短的教程，这会对很多人有所帮助:)

Answer 1

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

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

使用来自 AngularClass 的 angular2-webpack 生成器 - here （只需按照文档齐全的说明进行操作）

想要哈巴狗吗？没问题，只要按照 link here

想要 Scss 吗？没问题，只要按照 link here

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

感谢 AngurlarClass <3

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

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

Answer 2

如果您想要触控笔。

{
    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')]
 }

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 文件都得到 compiled/watched/rendered然后一切就绪。

我建议您将所有 .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

对于 Angular 6+ 你可以简单地运行 ng 在根文件夹中添加 ng-cli-pug-loader 命令以打开 pug 支持在你的 angilar-cli 项目中。

Answer 5

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

我为后代记录了 Angular pug solution here，请查看 README 顶部的解释。

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

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

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

How to add pug to angular-cli?

typescript

angular-cli

pug

angular