Using Pug (Jade) with Angular (with CLI)

Jecelyn Yeen
Mar 30, 2017 · 4 min read

I love Pug. Pug allow me to write cleaner HTML.

From HTML like this:-

<!DOCTYPE html><html>  <head>
<meta charset="utf-8">
<title>my portal</title>
</head>
<body> <app-root>
<div class="root-spinner">
<img class="loading" src="assets/images/logo.png">
</div>
</app-root>
</body>
</html>

To Pug, so much cleaner.

doctype htmlhtml
head
meta(charset="utf-8")
title my portal
body
app-root
div.root-spinner
img.loading(src="assets/images/logo.png")

However, if you are using Angular (version 2 or 4) & the de-facto Angular-CLI, the pug option is not out of the box, probably yet. There is a discussion here: https://github.com/angular/angular-cli/issues/1886.

How we can use it now?

npm install pug-cli --save-dev

After installation, we create two scripts in package.json`:

"pug-it": "pug src",
"pug-it:w": "pug src -P -w"

The first command `pug-it` will compile all the .pug files under `src` directory to .html file in same directory.

The second command did exactly the same thing with additional file watching. We use this command during development to watch the file changes and recompile automatically.

Here are some other scripts we have.

"ng": "ng",
"start": "run-p pug-it:w server",
"server": "ng serve --port 4210",
"prebuild": "yarn run pug-it",
"build": "ng build",

Please notes that:-

  1. When running npm start, we will start the dev server and and the pug watch tasks concurrently.
  2. Before we run build, we run pug before that (during prebuild`).

Side notes on concurrent tasks

npm install npm-run-all --save-dev

However, if all your developers are on Linux or Mac, then you don’t need any 3rd party packages, just replace start command withnpm run pug-it:w & npm run server will do.

Git Ignore HTML files

#pug
/src/**/*.html

Please notes that in your component typescript, you still refer to .html, there’s no need to change this.

@Component({
selector: 'my-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {}

Woala, everything up and running.

Trade-offs

1. No auto watching for new files

2. Fail silently when hitting pug syntax error

3. Need to manually create pug file if you use ng generate

Some captcha when using pug with Angular

my-top-bar(
'[(ngModel)]'="myModel"
'[propA]'="myPropA"
'(actionA)'="handle($event)"
)

This will generate the following HTML.

<my-top-bar 
[(ngModel)]="myModel"
[propA]="myPropA"
(actionA)="handle($event)">
</my-top-bar>

If you somehow forgot to put single quote on the attributes, congratulation. No error will be notify in terminal. The HTML generated will be

<my-top-bar>
</my-top-bar>

All fields will be omitted. If you realise about that after an hour of debugging, please don’t cry. Heh.

Please note that

Other alternatives

  1. First one, the simplest one, don’t use pug, use HTML.
  2. Run ng eject to eject the angular-cli. You’ll get back all your webpack config that angular-cli generated for you. Then add your pug-loader.
  3. Use other angular boilerplate that you can make changes easier. E.g. Angular Seed.
  4. Create a pug plugin or angular-cli or wait for one.
  5. Read the discussion https://github.com/angular/angular-cli/issues/1886, probably you can dig out some gold there.

Conclusion

Let me know if you have better way of doing this.

That’s it. Hopefully you find this helpful. Happy coding!

Hacker Noon is how hackers start their afternoons. We’re a part of the @AMI family. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.

If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!

HackerNoon.com

how hackers start their afternoons.

Jecelyn Yeen

Written by

Coder. Diver. Speak English, Mandarin, Javascript, C# and more.

HackerNoon.com

how hackers start their afternoons.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade