How to add pug to angular-cli?

Question

Anyone having luck adding .pug to angular-cli?

I tried to do npm install pug --save, but I don't know where to change the .pug rendering instead of .html.

Link for the angular-cli is here

Please share a short tutorial, that would help a lof of people :)

Answer 1

So after reading on angular-cli git, implementing pug is not in the near future.

So here is my workaround: It's not the angular-cli, but its an updated generator that runs angular2 final.

Use angular2-webpack generator from AngularClass - here (Just follow the well documented instructions)

Want pug? no problem, just follow the link here

Want Scss? no problem, just follow the link here

To keep it short, just do the npm installing and add those line in webpack.common file. And use require() in your component with ./filename.pug :) but follow the links and you'll be fine.

Thanks AngurlarClass <3

This was was what I was looking for - angular2, typescript, scss and pug.. Yum Yum!

      loaders: [
        { 
          test: /\.pug$/, 
          loader: 'pug-html-loader' 
        },
        {
          test: /\.scss$/,
          exclude: /node_modules/,
          loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
        },

Answer 2

For Angular 6+ you can simply run ng add ng-cli-pug-loader command in the root folder to turn on pug support in your angilar-cli project.

Answer 3

Using angular-cli you can do this workaround.

• Install pug-cli using npm install pug-cli --save-dev. Now you are able to compile your .pug files into .html.
• Add a new script line into your package.json's scripts: "puggy": "pug src -P -w". This will compile all your .pug inside src into .html and starts watching them. Name of the task, of course, does not matter.
• Edit your start task, or create a new one, to first run puggy and then serve: "start" : "npm run puggy & ng serve".

Your package.json should look like this:

"scripts": {
    "ng": "ng",
    "start" : "npm run puggy & ng serve",
    "puggy": "pug src -P -w",
    . . . other tasks
}

Now, simply run npm start, 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>