@ngtools/webpack: Using pug causes templates not to reload without skipping code generation

[MikaAK]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

Angular CLI: 1.6.0-beta.0
Node: 8.7.0
OS: darwin x64
Angular: 5.0.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

@angular/cdk: 5.0.0-rc0
@angular/cli: 1.6.0-beta.0
@angular/flex-layout: 2.0.0-beta.10-4905443
@angular/material: 5.0.0-rc0
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.0-beta.0
@schematics/angular: 0.1.2
typescript: 2.4.2
webpack: 3.8.1

Repro steps.

Generate new project and in node_modules/@angular/cli/models/webpack-configs/common.js
add { test: /.pug$/, use: ["apply-loader", "pug-loader"] }, to line 163 as the first rule. Then change your app.component.html to app.component.pug and start the server with --aot. Make a change to the pug file and look at the browser.

The log given by the failure.

none

Desired functionality.

Would like pug templates to recompile, currently it's impossible to develop properly with pug without this as I have to restart the build anytime I make changes!

Mention any other details that might be useful.

I would love to help out if I can just point me in the right direction. I've found that inside
node_modules/@angular/cli/models/webpack-configs/typescript.js in the getAotConfig function, adding {skipCodeGeneration: true} to the plugin options passed to _createAotPlugin causes the templates to get recompiled properly when changed.

[kylecordes]

I'm thrilled to see this getting attention, I used Pug/Jade heavily in the AngularJS 1.x era and benefited greatly from it. This issue talks about reaching in and editing "node_modules/@angular/cli/models/webpack-configs/common.js" (!) but from it being assigned a highish priority, do we have reason to hope the setting to enable Pug will be emerging to user space soon?

[MikaAK]

@kylecordes I think this issue may exist just purely using the plugin itself, so people with ejected webpack configs running in AoT mode might possible suffer from this

[DanielSchaffer]

@MikaAK I'm running a manually constructed webpack config and I'm seeing this issue as well. I was able to determine that while it does correctly detect a change as long as the rule specifying the @ngtools/webpack loader uses the test pattern /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/ (changes do not get detected at all if you just use /\.ts$/), the pug rule doesn't even get invoked when a change is detected (verified by adding a simple debugging loader before and after the pug loader). This is odd since obviously it works fine when a plain html file is used. I'm wondering if there's something missing in the tooling (possibly the pug loader?) that allows webpack to map the change detected in the pug file back to the originating component/.ts file? Or, maybe it is mapped to the .ts file, but needs to be mapped to the .ngfactory file?

By the way, adding { skipCodeGeneration: true } completely breaks it for me - I get an error: Could not resolve module src/app.module. I don't understand how that would work anyhow, isn't that what controls whether it generates the .ngfactory stuff?

(also, you aren't escaping the . in your pug rule test pattern)

[DanielSchaffer]

I think I just found the fix, and it's literally just adding 4 characters (|pug) to angular_compiler_plugin.ts:

  private _getChangedCompilationFiles() {
    return this._compilerHost.getChangedFilePaths()
      .filter(k => /\.(?:ts|html|css|scss|sass|less|styl|pug)$/.test(k));
  }

Though, it seems like something like this should be configurable rather than hardcoded...

[MikaAK]

Ha what an easy fix, nice find @DanielSchaffer
Hopefully we see this as a configurable option because I'm assuming my graphql queries wouldn't be reloaded either without manually going to this file and adding |graphql|gql