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 angu

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