Javascript 使用Jade作为angular2模板引擎_Javascript_Node.js_Angular_Pug_Mean Stack

Javascript 使用Jade作为angular2模板引擎

javascript node.js angular

Javascript 使用Jade作为angular2模板引擎,javascript,node.js,angular,pug,mean-stack,Javascript,Node.js,Angular,Pug,Mean Stack,我目前正在尝试使用Angular2代替Angular1.x开发MEAN应用程序，但我目前遇到了一个问题，即在Angular2中使用jade/pug作为我的模板引擎。我看到了一篇关于如何用webpack实现这一点的文章，但该教程是针对另一个项目结构的，而不是官方的angular/cli。因此，我想问，是否有一种方法可以将jade/pug用作angular/cli项目结构的模板引擎？将pug与angular/cli集成非常简单您需要做的只是：使用npm Install pug cli安装--s

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

将pug与angular/cli集成非常简单

您需要做的只是：

使用npm Install pug cli安装--save dev

在您的

包中添加一个新的脚本
行。json

的脚本：

“puggy”：“pug src-P-w”

编辑您的
```
start
```
任务，或创建一个新任务，首先运行
```
puggy
```
，然后运行
```
service
```
：
```
“dev”：“npm运行puggy&ng service”
```

您的

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

文件推送到您的repo。确保使用

git rm--cached*.html

删除缓存的

.html

文件

现在你可以写一个像

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

并将其编译成html

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

将Pug与angular/cli集成非常简单