Angular 8 mixed pug and html - file type not supported

[sublime392]

I have some html files that I am required to keep as html. I found that I needed to add the following rule to the common.js file (the file that the pug-loader rule is added to). { test: /\.html$/, use: "raw-loader" }, I don't know how the ng-add-pug-loader.js file should look for this, or I would do a pull request.

[danguilherme]

So by adding this loader to node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js you are able to use both .html and .pug files concomitantly? Can you also use Pug imports?

Could you share the exact version you're using (using ng version)?

[sublime392]

Yes, I am able to use .html files for some components and .pug files for others. This worked in Angular 7 without needing the extra loader rule added to node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js. I don't make use of pug imports, so I can't say anything there.

Angular CLI: 8.0.3
Node: 12.4.0
OS: darwin x64
Angular: 8.0.1
... animations, cdk, common, compiler, compiler-cli, core
... elements, forms, language-service, material
... platform-browser, platform-browser-dynamic, router
... service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.1
@angular-devkit/build-angular     0.800.3
@angular-devkit/build-optimizer   0.800.3
@angular-devkit/build-webpack     0.800.3
@angular-devkit/core              7.1.4
@angular-devkit/schematics        7.1.4
@angular/cli                      8.0.3
@angular/pwa                      0.11.4
@ngtools/webpack                  8.0.3
@schematics/angular               7.1.4
@schematics/update                0.800.3
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.30.0

[hildoer]

To reproduce this, perform a vanilla setup of an Angular app using Angular CLI.

npm install -g @angular/cli
ng new my-dream-app
cd my-dream-app
ng serve

The expected default landing page, which is HTML, works. Now install Pug loader and run the app. Here is the contents of my package.json dependencies after bootstrapping Angular.

"dependencies": {
    "@angular/animations": "~8.0.1",
    "@angular/common": "~8.0.1",
    "@angular/compiler": "~8.0.1",
    "@angular/core": "~8.0.1",
    "@angular/forms": "~8.0.1",
    "@angular/platform-browser": "~8.0.1",
    "@angular/platform-browser-dynamic": "~8.0.1",
    "@angular/router": "~8.0.1",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0",
    "@angular/cli": "~8.0.3",
    "@angular/compiler-cli": "~8.0.1",
    "@angular/language-service": "~8.0.1",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  },

ng add ng-cli-pug-loader
ng serve

You will get a Pug compilation error trying to compile src/app/app.component.html.

ERROR in ./src/app/app.component.html 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <!--The content below is only a placeholder and can be replaced.-->
| <div style="text-align:center">
|   <h1>
ℹ ｢wdm｣: Failed to compile.

Here are the package.json dependencies after adding Pug Loader.

"dependencies": {
    "@angular/animations": "~8.0.1",
    "@angular/common": "~8.0.1",
    "@angular/compiler": "~8.0.1",
    "@angular/core": "~8.0.1",
    "@angular/forms": "~8.0.1",
    "@angular/platform-browser": "~8.0.1",
    "@angular/platform-browser-dynamic": "~8.0.1",
    "@angular/router": "~8.0.1",
    "ng-cli-pug-loader": "^0.2.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0",
    "@angular/cli": "~8.0.3",
    "@angular/compiler-cli": "~8.0.1",
    "@angular/language-service": "~8.0.1",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "apply-loader": "^2.0.0",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "pug": "^2.0.4",
    "pug-loader": "^2.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  },

If you rename src/app/app.component.html -> src/app/app.component.pug, and convert the contents from HTML to PUG, everything compiles fine and the app works again.

The expected behavior is that when I add Pug Loader html templates continue to work. I should be able to have both html and pug templates. However, it seems that after Angular 8 release, Pug Loader disables HTML templates entirely.

[ordomalleus]

[VladislavLobakh]

I had this issue when I used pug in my angular library. I've had to mix pug and HTML. So I've added one more rule to pugRules constant: { test: /.html$/, loader: "raw-loader" }

[danguilherme]

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