Use Jade as angular2 template engine

问题

I'm currently trying to migrate to developing MEAN apps with Angular2 in place of Angular1.x but i'm currently having an issue based on using jade/pug as my template engine in angular2. I saw a post on how to implement this with webpack, but that tutorial is meant for another project structure and not the official angular/cli. So i'm asking if there's a way jade/pug can be used as template engine with the angular/cli project structure?

回答1:

Integrating Pug with angular/cli is pretty easy.

All you need to do is:

• Install pug-cli using npm install pug-cli --save-dev
• Add a new script line into your package.json's scripts: "puggy": "pug src -P -w".
• Edit your start task, or create a new one, to first run puggy and then serve: "dev": "npm run puggy & ng serve".

Your package.json should look like this:

"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"
  }

Now, simply run npm run dev, or whatever name you gave to the task, in your terminal and you should see all of your .pug files getting compiled/watched/rendered and then everything served up.

I suggest you to add all of your .html files into your .gitignore adding /src/**/*.html into it and only pushing .pug files to your repo. Make sure you remove cached .html files using git rm --cached *.html.

Now you'll be able to write a form like

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

And compile it into it's html

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

来源：https://stackoverflow.com/questions/45144135/use-jade-as-angular2-template-engine