Angular 11 updated common.js and typescript.js locations

[jmbarbier]

I've not enough time now for a PR, but for angular 11, common.js is now node_modules/@angular-devkit/build-angular/src/webpack/configs/common.js and typescript.js is now at node_modules/@angular-devkit/build-angular/src/webpack/configs/typescript.js

so in ng-add-pug-loader.js, we have to update :

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

const typescriptCliConfig = 'node_modules/@angular-devkit/build-angular/src/webpack/configs/typescript.js';

[ChickenRunVN]

Great discovery, I have to detect the error and update manually after ng update throws a lot of errors. Also, I notice that the console no longer throw any error when check and compile with pug after update to Angular 11 (in version 10 I got tons of those)

[netmiller]

I tried those two updates @jmbarbier mentioned, but still got errors 👍

Error: Module parse failed: Unexpected character '#' (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
> #ad-main
|
|     #ad-header

I have upgraded my project from Angular 10 -> v.11. Any idea what I have forgotten ?

[ChickenRunVN]

I tried those two updates @jmbarbier mentioned, but still got errors 👍

Error: Module parse failed: Unexpected character '#' (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
> #ad-main
|
|     #ad-header

I have upgraded my project from Angular 10 -> v.11. Any idea what I have forgotten ?

You can try: Method 1: After update ng-add-pug-loader.js as @jmbarbier mentioned above, run npm install again. The postinstall script in your package.json will be executed and it will update the common.js and typescript.js. Method 2:

• Go to node_modules/@angular-devkit/build-angular/src/webpack/configs/common.js, add { test: /\.(pug|jade)$/, exclude: /\.(include|partial)\.(pug|jade)$/, use: [ { loader: "apply-loader" }, { loader: "pug-loader" } ] }, { test: /\.(include|partial)\.(pug|jade)$/, loader: "pug-loader" }, in the rules: [....] sector (careful with the comma in the end because it's an array).
• Then, go to node_modules/@angular-devkit/build-angular/src/webpack/configs/typescript.js, find directTemplateLoading and update value into false. Then you can run ng serve again. Happy coding!

[diogoterremoto]

Upgraded from 10 to 11. Although the common.js and typescript.js are correctly set, I still got the following error:

zone-evergreen.js:659
Unhandled Promise rejection: Errors during JIT compilation of template for AnalyticsOverlayBlockComponent:
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.)

Any ideas?

[ChickenRunVN]

Upgraded from 10 to 11. Although the common.js and typescript.js are correctly set, I still got the following error:

zone-evergreen.js:659
Unhandled Promise rejection: Errors during JIT compilation of template for AnalyticsOverlayBlockComponent:
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.)

Any ideas?

I think you need to update your angular.json which may help solve the problem. Example configuration:

  "projects": {
    "my-project": {
      "architect": {
        "build": {
          "options": {
            "aot": false
          }
        },
        "configurations": {
          "production": {
            "aot": true
          }
        }
      }
    }
  }
}

For more details, please take a look at #31

[diogoterremoto]

Thank you for your support.

The whole page is now blank: the <app> element has no children. I was using @angular-builders/custom-webpack builder, but this also happens with the default @angular-devkit/build-angular.

This only happens when the default builder is upgraded to 0.1100.0.

[H--o-l]

For info since Angular v11.1.0, the option directTemplateLoading that needs to be set to false, is now inside the file node_modules/@ngtools/webpack/src/ivy/plugin.js It was changed by commit https://github.com/angular/angular-cli/commit/4e168b81c5de6c4ae91e29a40bdf0e0c98910fb4

[Rush]

@H--o-l but that seems to be an option for AngularWebpackPlugin which apparently is not the same as AngularCompilerPlugin. Unless they already exposed AngularWebpackPlugin ?

[H--o-l]

@Rush I can't answer sorry. All I know is that it fixes the issue for me for Angular 11.

[danguilherme]

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