pnh

pug-ng-html-loader

Pug HTML loader for webpack

Showing:

Popularity

Downloads/wk

38

GitHub Stars

1

Maintenance

Last Commit

5yrs ago

Contributors

2

Package

Dependencies

3

Size (min+gzip)

257.7KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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)

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100