# pug-ng-html-loader

> Pug to html loader for webpack, close to HTML and friendly with Angular 2

Latest version **1.0.10** (published 2016-09-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install pug-ng-html-loader
pnpm add pug-ng-html-loader
yarn add pug-ng-html-loader
bun add pug-ng-html-loader
```

## Health

**Score 5/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: insecure dependencies; abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.10 |
| Published | 2016-09-23 |
| First published | 2016-09-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 (+3 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Williams Medina |
| Maintainers | tycho01 |
| Keywords | webpack, loader, pug, jade, html, ng2, angular2, angular |

## Links

- npm: https://www.npmjs.com/package/pug-ng-html-loader
- Repository: https://github.com/tycho01/pug-ng-html-loader
- Issues: https://github.com/tycho01/pug-ng-html-loader/issues
- npm.io page: https://npm.io/package/pug-ng-html-loader

## Dependencies (3)

- [pug](https://npm.io/package/pug.md) ^2.0.0-beta5
- [loader-utils](https://npm.io/package/loader-utils.md) ^0.2.14
- [pug-plugin-ng](https://npm.io/package/pug-plugin-ng.md) github:tycho01/pug-plugin-ng

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.0.10 (latest) — 2016-09-23

## 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`](https://github.com/tycho01/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`](https://github.com/willyelm/pug-html-loader)?

Because you cannot pass `pug-plugin-ng` into its options; Webpack query JSON serialization kills functions, see [here](https://github.com/pugjs/pug-lexer/pull/69#issuecomment-241119765).

## 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)

---
_Source: https://npm.io/package/pug-ng-html-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._