Note: for webpack 2, just use pug-plugin-ng directly with pug-html-loader. This repo has no more use there.

Pug Angular 2 HTML loader for webpack

This enables using pug-plugin-ng through Webpack, see that repo for details. In short, this allows writing Pug as close to HTML as possible, making it terser and facilitating conversion between Pug and HTML. This is particularly desirable when using Angular 2, because its different non-standard uses of HTML attributes required workarounds polluting Pug with additional brackets/commas and =''.

Why not just use pug-html-loader?

Because you cannot pass pug-plugin-ng into its options; Webpack query JSON serialization kills functions, see here.

Installation

npm i --saveDev pug-ng-html-loader

Usage

myComp.pug:

.items(
  *ngFor="#item of items"
  [ngClass]="{'active': isActive}"
)
  p {{item}}

myComp.ts:

@Component({
  template: require('./myComp.pug'),
})

In your webpack.config.js file, using pug-ng-html-loader:

module.exports = {
  // your config settings ...
  module: [
    //your modules...
    loaders: [
      { test: /\.pug$/, loader: 'pug-ng-html' },
    ]
  ]
};

License

MIT (http://www.opensource.org/licenses/mit-license.php)