Component stopped rendering ngFor in Angular 11.1.x (works in 11.0.x)

[dezsiszabi]

🐞 bug report

Affected Package

Unfortunately I'm not sure which exact package is causing the issue. The issue doesn't happen when my project is on @angular/*@11.0.x. The issue happens when the project is upgraded to @angular/*@11.1.x

Is this a regression?

Yes, the previous version in which this bug was not present was: 11.0.9

Description

ngFor seemingly stopped working and doesn't render anything.

🔬 Minimal Reproduction

The working version with reproduction steps: https://github.com/dezsiszabi/ng11-bug-report-1-working
The non-working version with reproduction steps: https://github.com/dezsiszabi/ng11-bug-report-1-not-working

The only difference between the repositories is the version of angular used.

If you don't have access, please let me know. I think you should though.

🔥 Exception or Error

No exception or error is thrown. It just doesn't render the component correctly.

🌍 Your Environment

From the non-working repository:

Angular Version:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 11.1.2
Node: 14.15.4
OS: win32 x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1101.2
@angular-devkit/build-angular   0.1101.2
@angular-devkit/core            11.1.2
@angular-devkit/schematics      11.1.2
@angular/cli                    11.1.2
@schematics/angular             11.1.2
@schematics/update              0.1101.2
ng-packagr                      11.1.3
rxjs                            6.5.5
typescript                      4.1.3

Anything else relevant?

I noticed that if I run ng build angular-tour-of-heroes instead of ng build angular-tour-of-heroes --prod, then it works even with the Angular 11.1.x (non-working) repo above.

[petebacondarwin]

This is caused by the CLI using the Angular JIT compiler rather than the AOT compiler if skipTemplateCodegen is set to true. You can see the line where this happens here:

angular-cli/packages/ngtools/webpack/src/ivy/plugin.ts

Line 225 in 5fdc0a6

const { fileEmitter, builder, internalFiles } = compilerOptions.skipTemplateCodegen

The simple workaround is to set that to false. But I believe it needs to be set to true for libraries that are being built via ViewEngine when they are to be published to npm.

I'll talk to the CLI team about the best resolution to this.

(By the way, I note that you have setup your project to link the application directly to the source code of the library via paths mappings. This is not really the recommended approach. But that is tangential to this issue.)

[alan-agius4]

Yeah the problem he is that we are differentiating between an AOT and JIT build using skipTemplateCodegen. This is mainly a View Engine option and when true, does not emit .ngfactory.js and .ngstyle.js files. This option is mainly intended to be used by libraries since .ngfactory.js and .ngstyle.js files that cannot be distributed to npm which still use VE to be built.

It think that we shouldn't rely on this option to determine if a build is AOT or JIT, Possibly re-introduce a dedicate options as per the deprecated plugin skipCodeGeneration?

As a workaround for the time being, you can remove skipTemplateCodegen from your tsconfig.json.

[angular-automatic-lock-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.}