angular5 - Pug support for Angular 2 / Angular 4 / Angular 6 / Angular cli / Angular cli 6 (without custom WebPack config)

Question

How to install correctly PUG / JADE to Angular 2 or above

So that while working and AOT and JiT

Worked Unit and Integration Tests

and do not suffer much when creating each new component

Answer 1

I saw many solutions, some of them:

1. in each component was added something like "require!pug-loader()some.component.pug"

2. Get away from using angular-cli and create magic around webpack

3. Use other servers (who know how to work with the Pug / Jade)

4. Before running the build, convert all the pug files to html

I think that they will refuse the server justified for angular - it's not true, run some pre-compilers (which create files and send them to the gee in the future), as soon as you refuse the angular-cli and use webpack - errors appear (because the angular compiles not a valid webpack file)

I decided this so:

npm install pug pug-loader --save-dev

After first step add row to package.json

"scripts": {
    "afterInstall": "node pug-rule-insert.js",
    ...
  }

Then create file pug-rule-insert.js with something like this:

const fs = require('fs');
const commonCliConfig = 'node_modules/@angular/cli/models/webpack-configs/common.js';
const pug_rule = `
{ test: /.(pug|jade)$/, loader: 'apply-loader!pug-loader?self' },`;

fs.readFile(commonCliConfig, (err, data) => {
  if (err) { throw err; }

  const configText = data.toString();
  if (configText.indexOf(pug_rule) > -1) { return; }

  const position = configText.indexOf('rules: [') + 8;
  const output = [configText.slice(0, position), pug_rule, configText.slice(position)].join('');
  let file = fs.openSync(commonCliConfig, 'r+');
  fs.writeFile(file, output, () => {});
  fs.close(file, () => {});
});

FIX for Angular 6:

const commonCliConfig = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js';

And now just put in terminal this:

npm run afterInstall

That script put in your main WebPack file (located at node_modules/angular/cli/models/webpack-config/common.js) row, that told angular support pug

the Angular team did not include it in support by default, because it is necessary:

1. all directives, events (like a click) should be separated ","

   Example: p((click)='someFunction()', [title]='myTitle')

2. It is not possible to use a mixin (replace it with ng-template & ng-container)

this is magic too, but angular-cli work fine, all test works, AoT & JiT - work