Using Pug (Jade) with Angular (with CLI)
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="logo.png">
</div>
</app-root>
</body>
</html>
To Pug, so much cleaner.
doctype html
html
head
meta(charset="utf-8")
title my portal
body
app-root
div.root-spinner
img.loading(src="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?
We can use pug-cli now. Pug CLI allows you to compile pug with command like pug [dir,file] and watch the changes.
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.
