Repository navigation
ngFor does not work in prod build while creating dynamic component from string #47160
Closed as not planned
Description
Which @angular/* package(s) are the source of the bug?
common
Is this a regression?
No
Description
I am trying to do a proof of concept for rendering components dynamically while basic Angular directives - ngFor, ngIf, etc.
String:
'<div>Hello world: {{data.some}} {{getX()}} <div *ngFor="let i of [1,2,3,4,5]"><span (click)="clickMe(i)">{{i}}</span></div>'
I had referred to the discussion on issue - #44660 and it works dev build. For prod build, I see there are no errors during build or in the console tab, but ngFor does not work.
Dev build:
Prod build:
Please provide a link to a minimal reproduction of the bug
https://github.com/phalgunv/Angular-Dynamic-Component-From-String
Please provide the exception or error you saw
No response
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 12.2.18
Node: 14.18.0
Package Manager: npm 6.14.15
OS: win32 x64
Angular: 12.2.16
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1202.18
@angular-devkit/build-angular 12.2.18
@angular-devkit/core 12.2.18
@angular-devkit/schematics 12.2.18
@angular/cli 12.2.18
@schematics/angular 12.2.18
rxjs 6.6.7
typescript 4.3.5
Anything else?
No response
Activity
JoostK commentedon Aug 16, 2022
Hi @phalgunv,
Dynamic template compilations require the JIT compiler, which can only be used when build optimizations are disabled. The production configuration has optimisations enabled by default, you'll have to disable it in the
angular.jsonfile.phalgunv commentedon Aug 16, 2022
It is a bit difficult understand what needs to be done to disable optimization. However, I think webpack terser plugin is being used to set
compress: { side_effects: false },I updated the example in the github repo with terser webpack plugin, but I still am not able to get *ngFor working. I suppose I am doing something wrong here. @JoostK, can you guide me?
JoostK commentedon Aug 16, 2022
You shouldn't need to bring in
custom-webpack, I'd recommend against it actually (it moves away from the supported path, as thecustom-webpackbuilder is not maintained by the Angular team)In your
angular.jsonfile, thebuildtarget of the relevant project needs to be configured such thatoptimizationandbuildOptimizerare set tofalse:angular-automatic-lock-bot commentedon Sep 16, 2022
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.