Repository navigation
Angular 9+ incorrectly flags template variables as not existing in pug templates聽#18290
Description
馃悶 Bug report
Command (mark with an x)
- serve
Is this a regression?
Yes, had no issues in Angular 8. I'm guessing this has something to do with Ivy.
Description
TS component:
import { Component } from '@angular/core';
@Component({
selector: 'app-test',
templateUrl: './test.component.pug',
styleUrls: ['./test.component.sass']
})
export class TestComponent {
items = [
'one',
'two',
'three',
'four'
];
}Pug template:
ul
li(*ngFor="let item of items") {{item}}I have the above example component and template in an Angular project.
The project builds without issue using ng build and ng-build --prod
The dev server starts without any issues using ng serve and the page renders as expected.
Once I start making changes to the project and the dev server automatically rebuilds, it prints the following error:
Property 'item' does not exist on type 'TestComponent'. Did you mean 'items'?
The Angular application does appear to continue to work correctly and auto-rebuild on changes (printing that error every time),
but these false errors can potentially hide legitimate ones.
This happens with any variables generated with *ngIf or *ngFor.
div(*ngIf="name$ | async as name") {{name}}: the{{name}}portion will generate an error
This issue occurs in both Angular 9 and 10.
I have tried two different methods of adding pug support to my project, the error occurs with both:
- Using https://www.npmjs.com/package/@angular-builders/custom-webpack/v/9.2.0 to add a pug rule to webpack (using
apply-loaderandpug-loader)- This method is demonstrated in the Minimal Reproduction section below
- Using https://www.npmjs.com/package/ng-cli-pug-loader/v/0.2.2
馃敩 Minimal Reproduction
Here is a repository resulting from the below steps: https://github.com/entith/ng-cli-pug-template-variable-issue
- run
ng new test --minimal --skip-tests --style sass --routing - switch to the generated project dir
cd test - run
npm i -D @angular-builders/custom-webpack pug pug-loader apply-loader - add
custom-webpack.config.jsfile below - edit
angular.jsonas per the@angular-builders/custom-webpackdocumentation to usecustom-webpack.config.js - run
ng g component test - edit the component and its template file to match the example above
- run
ng serveand wait for project to build- project should compile and server start with no errors
- page should load in browser as expected
- make any non-breaking change to a project file and save to trigger a rebuild
- ex: add a space at the end of a line in the
test.component.pugfile - the project should rebuild, print
: Compiled successfully, and then a moment later the error should print - the page should have correctly refeshed
- if you make any template changes or changed the
itemsarray in the component, the page should correctly reflect these changes
- if you make any template changes or changed the
- ex: add a space at the end of a line in the
custom-webpack.config.js:
module.exports = (config, options, targetOptions) => {
config.module.rules.push(
{
test: /\.pug$/,
use: [
{ loader: "apply-loader" },
{ loader: "pug-loader" }
]
}
);
return config;
};馃敟 Exception or Error
> ng serve
chunk {main} main.js, main.js.map (main) 20.6 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.7 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3 MB [initial] [rendered]
Date: 2020-07-17T20:50:39.902Z - Hash: 6232187f38b85c2dde79 - Time: 5839ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.
Date: 2020-07-17T20:50:44.744Z - Hash: d0680cf93388498b9aa8
4 unchanged chunks
chunk {main} main.js, main.js.map (main) 20.6 kB [initial] [rendered]
Time: 198ms
: Compiled successfully.
ERROR in src/app/test/test.component.pug:4:36 - error TS2551: Property 'item' does not exist on type 'TestComponent'. Did you mean 'items'?
4 li(*ngFor="let item of items") {{item}}
~~~~
src/app/test/test.component.ts:5:16
5 templateUrl: './test.component.pug',
~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component TestComponent.
馃實 Your Environment
Angular CLI: 9.1.11
Node: 12.18.2
OS: win32 x64
Angular: 9.1.12
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.901.11
@angular-devkit/build-angular 0.901.11
@angular-devkit/build-optimizer 0.901.11
@angular-devkit/build-webpack 0.901.11
@angular-devkit/core 9.1.11
@angular-devkit/schematics 9.1.11
@angular/cli 9.1.11
@ngtools/webpack 9.1.11
@schematics/angular 9.1.11
@schematics/update 0.901.11
rxjs 6.5.5
typescript 3.8.3
webpack 4.42.0
Activity
JoostK commentedon Jul 18, 2020
AFAICS the error occurs because incremental rebuilds run the type checker in a separate process, in which the custom Webpack rules are not applied. So the template file that gets loaded is really just the raw pug template itself, such that the
ngForelement is not expanded, leaving the{{item}}as the only Angular template syntax.@angular-builders/custom-webpackis an external extension to the CLI and any customization achieved with it may cause incompatibility issues such as these.alan-agius4 commentedon Jul 18, 2020
As @JoostK mentioned in the fork type checker we only accept raw HTML and SVG templates.
What you can do to solve the issue is to disable fork type checking.
entith commentedon Jul 18, 2020
Thanks for the replies, I know this isn't exactly a supported configuration so I appreciate it!
Disabling the fork type checker did indeed resolve the issue. For anyone reading this that doesn't know how, I added
"forkTypeChecker": falseto the build option inangular.json.The downside now is that with my tiny one component demo application, the incremental rebuild jumped from around 225ms to 1250ms.
Is there any reasonable way to add custom rules to the Webpack config the forked type checker uses?
clydin commentedon Jul 20, 2020
The forked type checker does not use Webpack so unfortunately there is no Webpack config to augment.
However, the new Angular Webpack compiler plugin (PR) currently in development does not use the forked type checker. The new plugin will as a result resolve this issue without the build performance degradation. Please note though that the earliest the new plugin will be included for default use would be v11.
entith commentedon Jul 20, 2020
Great! Glad to hear us difficult folk's nonsense will continue to work.
I will probably stick with Angular 8 for now and keep an eye on that PR/v11.
Thanks for the help and explanations!
angular-automatic-lock-bot commentedon Aug 20, 2020
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.