我目前正在尝试迁移到使用 Angular2 代替 Angular1.x 开发 MEAN 应用程序，但我目前遇到了一个基于使用 jade/pug 作为 Angular2 中的模板引擎的问题。我看到了一篇关于如何使用 webpack 实现这一点的文章，但该教程适用于另一个项目结构，而不是官方的 angular/cli。所以我问是否有办法将 jade/pug 用作具有角度/CLI 项目结构的模板引擎？
将Pug与angular/cli集成非常简单。
您需要做的就是：
- 使用
npm install pug-cli --save-dev安装 pug-cli - 在
package.json的脚本中添加一个新的script行："puggy": "pug src -P -w". - 编辑
start任务或创建新任务，首先运行puggy，然后serve："dev": "npm run puggy & ng serve"。
您的package.json应如下所示：
"scripts": {
"ng": "ng",
"start": "ng serve",
"puggy": "pug src -P -w",
"dev": "npm run puggy & ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
}
现在，只需在终端中运行npm run dev或您为任务指定的任何名称，您应该会看到所有.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>