PugJS Primer for your next Angular 4 Project

Because writing markup in plain HTML is too mainstream and toilsome. Here’s to the introduction of really cool templating engine called “Pug”, formerly named as Jade. Happened to use it once couple of years back in my Node project, I so wanted to use it in my mundane projects. I adore it not only for its succinctness but also for it’s cool programming like features that saves a lot of development time by ruling out monotonous typing. After all, who likes pressing Shift + Angular brackets every now and then.

How does it look like?

It looks like indentation adjusted elements to mark their hierarchical relationships. If you have worked on Python programming ever, you’ll feel at home.

section.container
h1 Hola Mundo
p(align="center") Hello from the other side.

As python doesn’t use braces like most other languages out there to distinguish between its lexical constructs (functions etc), same way Pug doesn’t use starting and closing tags like html to segregate the elements in markup. This gives us another advantage by enforcing good formatting from the beginning.

Integration with Angular CLI generated project

Unfortunately, Angular CLI doesn’t provide support for pug out of the box. So, you’ll have to muscle a little extra to make it work in your Angular project.

After you generate an Angular 2+ project like this

ng new project

You’ll have to take out the webpack configuration from it to gain more control over your project build mechanics. You do so by doing

ng eject

It’ll take out the webpack.config.js in the root directory of your project.

Now that you have ejected webpack config out, you can very easily register a rule to intercept .pug files and a loader to compile them to html at build time.

Just look for the blow section and make an entry there

"module": {
  "rules": [
    {
      "test": /\.pug$/,
      "loader": ['raw-loader', 'pug-html-loader']
    }
    ...

For it to work, you have to install some modules from npm.

npm i -D pug pug-html-loader

And you’re ready to go.

Create a file anywhere in your src folder with .pug extension while changing it in the ts file too.

Run project with npm start and relish the conciseness of Pug.

Points to Ponder

  1. While generating a new component using ng generate command. Don’t forget to change the extension and it’s entry in the ts file manually as Angular CLI will generate .html file for you.
  2. While using template reference variables in Angular 2+, make sure you wrap it in quotes like this and provide it an empty value like this
input(type="file", '#inputFileEl'="", multiple, (change)="filesAdded($event)")

Conclusion

So, what are you waiting for? Go ahead and lunge onto using Pug with not only your Angular project but any project in general. I’m sure once you get cozy with it, you’ll despise working on those html verbose semantics at all. It might be a little difficult or an extra work to orchestrate it into your existing projects initially but mind that it’s a one time configuration and you’ll be sorted for life. So, don’t let any second thoughts prevail your cerebral territory and start using it.

Happy Coding! Woof!! 🐶

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.