🐞 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-loader and pug-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

1. run ng new test --minimal --skip-tests --style sass --routing
2. switch to the generated project dir cd test
3. run npm i -D @angular-builders/custom-webpack pug pug-loader apply-loader
4. add custom-webpack.config.js file below
5. edit angular.json as per the @angular-builders/custom-webpack documentation to use custom-webpack.config.js
   • https://github.com/entith/ng-cli-pug-template-variable-issue/blob/master/angular.json
6. run ng g component test
7. edit the component and its template file to match the example above
8. run ng serve and wait for project to build
   • project should compile and server start with no errors
   • page should load in browser as expected
9. 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.pug file
   • 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 items array in the component, the page should correctly reflect these changes

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