Templates are processed too early

[giniedp]

🐞 Bug report

Having the AngularCompilerPlugin in a custom steup instantiated like this

new AngularCompilerPlugin({
    platform: 0,
    mainPath: config.isTest
      ? config.frontend.entry.test
      : config.frontend.entry.main,
    tsConfigPath: config.isTest
      ? config.frontend.tsconfigTestFile
      : config.frontend.tsconfigAppFile,

    skipCodeGeneration: !config.isAot,
    sourceMap: true,
    forkTypeChecker: true,
    directTemplateLoading: false,

    compilerOptions: {
      fullTemplateTypeCheck: true,
      strictInjectionParameters: true,
      strictTemplates: false,
      enableIvy: config.isIvy
    }
  })

and a webpack rule for .pug templates

      {
        test: /\.(pug)$/,
        use: [{ loader: "apply-loader" }, { loader: "pug-loader" }]
      },

the templates are processed by the ngtc compiler without being transpiled to .html. The compiler fails when when template contains certain syntax with following error

  ERROR in Errors parsing template: Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("h1 {{ title }}
  input([(ngModel)]="title", [ngModelOptions]="{ standalone: true }")
  router-outlet()
  [ERROR ->]"): /Users/alex/repositories/ginie/my-app/src/app/app.component.pug@3:0, Invalid ICU message. Missing '}'. ("h1 {{ title }}
  input([(ngModel)]="title", [ngModelOptions]="{ standalone: true }")
  router-outlet()
  [ERROR ->]"): /Users/alex/repositories/ginie/my-app/src/app/app.component.pug@3:0

• failure happens when compiled with ivy enabled and aot disabled
• failure does not happen with ivy and aot enabled
• fails only on certain syntax for example

this template would fail

h1 {{ title }}
input([(ngModel)]="title", [ngModelOptions]="{ standalone: true }")

but this template would not. Interestingly the application the renders correctly, as if the pug is transpiled at a later stage

h1 {{ title }}
input([(ngModel)]="title")

Adding a console.log at node_modules/compiler-cli/src/ngtsc/annotations/src/component reveals that

• the pug content is processed when aot is off
• the html content is processed when aot is on

🔬 Minimal Reproduction

Repo is here https://github.com/giniedp/angular-9-custom-pug-setup

git clone git@github.com:giniedp/angular-9-custom-pug-setup.git
cd angular-9-custom-pug-setup
yarn install
yarn build:custom

🌍 Your Environment

Angular CLI: 9.0.2
Node: 10.17.0
OS: darwin x64

Angular: 9.0.1
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.2
@angular-devkit/build-angular     0.900.2
@angular-devkit/build-optimizer   0.900.2
@angular-devkit/core              9.0.2
@angular-devkit/schematics        9.0.2
@angular/cli                      9.0.2
@ngtools/webpack                  9.0.2
@schematics/angular               9.0.2
@schematics/update                0.900.2
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.6

[giniedp]

a workaround is to change the initialisation of the AngularCompilerPlugin as follows

new AngularCompilerPlugin({
    platform: 0,
    mainPath: config.isTest
      ? config.frontend.entry.test
-     : config.frontend.entry.main,
+     : undefined,
    tsConfigPath: config.isTest
      ? config.frontend.tsconfigTestFile
      : config.frontend.tsconfigAppFile,

    skipCodeGeneration: !config.isAot,
    sourceMap: true,
    forkTypeChecker: true,
    directTemplateLoading: false,

    compilerOptions: {
      fullTemplateTypeCheck: true,
      strictInjectionParameters: true,
      strictTemplates: false,
      enableIvy: config.isIvy
    }
  })

this works. Is this intended behavior?

[alan-agius4]

Chiming in @clydin as I don’t think that this is supported.

[giniedp]

why shouldn't it be supported?

[clydin]

This should be supported and was currently not functional in JIT mode due to an error with legacy string-form lazy route discovery. The referenced PR will correct the issue.

Also when using the Ivy compiler in 9.0+, AOT mode is recommended for all build types including both development and production. Performance has been improved and AOT provides far more comprehensive error checking especially for component templates.

[giniedp]

@clydin thank you very much for the fix and info

yes, build performance has improved and for small code bases it makes sense to use AOT in dev mode. For large projects the initial build time is still much higher, in our case its 1 minute vs 2 minutes.

Further AOT in watch mode does not work in our case, so i can not compare. Initial build is fine, but re-build fails with

Error: Errors parsing template: Invalid ICU message. Missing '}'. ("

I assume it is caused and fixed by the referenced PR?

The issue also occurs here https://github.com/danguilherme/ng-cli-pug-loader/issues/31

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}