使用 Jade 作为 angular2 模板引擎答案

【问题标题】：Use Jade as angular2 template engine使用 Jade 作为 angular2 模板引擎
【发布时间】：2017-12-21 23:38:16
【问题描述】：

我目前正在尝试迁移到使用 Angular2 代替 Angular1.x 来开发 MEAN 应用程序，但我目前遇到了一个基于在 angular2 中使用jade/pug 作为我的模板引擎的问题。我看到一篇关于如何使用 webpack 实现这一点的帖子，但该教程是针对另一个项目结构的，而不是官方的 angular/cli。所以我问是否有一种方式可以将jade/pug用作具有angular/cli项目结构的模板引擎？

【问题讨论】：

标签： javascript node.js angular pug mean-stack

【解决方案1】：

将 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>

【讨论】：