Angular CLI Schematic implementation to add .pug file support for your Angular project.

At the root of your project, run

ng add ng-cli-pug-loader

That's it, your project now supports pug files:

import { Component } from '@angular/core';

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

Because of pug include templates don't work with apply-loader (see related issue) we have supported it for *.partial.pug and *.include.pug files.

Imagine you have mixins.pug and example.partial.pug for example.

//- apply-loader and pug-loader will be used
include mixins
//- apply-loader and pug-loader will be used
include mixins.pug
//- pug-loader only will be used
include example.partial.pug
//- pug-loader only will be used
include example.include.pug

npm run test will run the unit tests, using Jasmine as a runner and test framework.

• Schematics — An Introduction
• Using PUG (or Jade) templates with the Angular-CLI
• Angular Material schematics implementation
• 🏖️ How To Create Your First Custom Angular Schematics With Ease🛠️