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 :)

Kelter

Answer 1

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.

Gardal

Answer 2

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

Kelter

If you want sass instead of scss. Just replace test: /\.scss$/ with test: /\.sass$/ and rename your files from .scss to .sass – Kelter

Do you have any git-repo with this configuration ? – Goalkeeper

@Vivek-Doshi here's one setup with localstorage, pug, sass, angular2, webpack2, a bit of animation github.com/theklausster/sweco feel free to rip it off :) – Kelter

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>

Waldon

Answer 4

I have been using the (fairly brittle) ng-cli-pug-loader method for years. It served a purpose, and I'm thankful for it, but I developed a (slightly less brittle) way to add pug support. It is not automagic via the Angular CLI - perhaps someone can help with that? But for now it's not too many steps for what I think is a superior solution.

I documented that Angular pug solution here for posterity, check the top of the README for an explanation.

And if you want an even less brittle method (that does not create a new AngularCompilerPlugin), check out angular.webpack.js and the function addSimplePugSupport.

If you see a problem with this, please let me know via comments here or on my Git repo.

Merna

Answer 5

If you want Stylus instead.

{
    test:/\.styl$/,
    use: ['to-string-loader', 'css-loader', 'stylus-loader'],           
}

the config for SCSS has been changed

{
    test: /\.scss$/,
    use: ['to-string-loader', 'css-loader', 'sass-loader'],
    exclude: [helpers.root('src', 'styles')]
 }

Estevez

I can't see how your this answer answers the question... CSS preprocessors have absolutely nothing with Jade/Pug. – Kulseth

Wrong, first add '.pug' to 'extensions' and { test: /\.(pug|jade)$/, use: ['pug-ng-html-loader'] }, to module.rules in webpack.common.js, then npm install pug pug-ng-html-loader, then use pug file paths in templateUrl – Estevez