Double rules in webpack-configs/common.js

[alexprykhodko]

The module.rules in node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js has the following lines after installing new npm packages with ng-cli-pug-loader installed:

rules: [ { test: /.(pug|jade)$/, exclude: /.(include|partial).(pug|jade)$/, use: [ { loader: "apply-loader" }, { loader: "pug-loader" } ] }, { test: /.(include|partial).(pug|jade)$/, loader: "pug-loader" }, { test: /\.(pug|jade)$/, exclude: /\.(include|partial)\.(pug|jade)$/, use: [ { loader: "apply-loader" }, { loader: "pug-loader" } ] }, { test: /\.(include|partial)\.(pug|jade)$/, loader: "pug-loader" },

The resulting double rules produce errors as seen in pugjs/pug-loader#120

The issue is corrected by changing the rules to:

rules: [ { test: /\.(pug|jade)$/, exclude: /\.(include|partial)\.(pug|jade)$/, use: [ { loader: "apply-loader" }, { loader: "pug-loader" } ] }, { test: /\.(include|partial)\.(pug|jade)$/, loader: "pug-loader" },

(Note the correct escaping)

On the very first run of 'ng-add-pug-loader.js', the newly added rule in module.rules has bad escaping, which results in adding the new rule on the consecutive runs of 'ng-add-pug-loader.js':

{ test: /.(pug|jade)$/, exclude: /.(include|partial).(pug|jade)$/, use: [ { loader: "apply-loader" }, { loader: "pug-loader" } ] }, { test: /.(include|partial).(pug|jade)$/, loader: "pug-loader" }

Steps to reproduce:

1. Run ng new my-app.
2. Run ng add ng-cli-pug-loader.
3. Rename 'app.component.html' to 'app.component.pug'.
4. Run ng add @angular/material

Version info:

Angular CLI: 9.1.1
Node: 13.12.0

[danguilherme]

This project is no longer maintained. Check out ngx-pug-builders to add support to pug files to your Angular project.