Runtime compiler breaks in --prod builds when CommonModule in imports

[johncrim]

bug report

Affected Package

This issue is most likely caused by @angular/common; could be @angular/compiler

Is this a regression?

Don't know - I have not tested this issue in previous versions. I can repro it in the latest versions of angular: 7.1.0

Description

Use case: Using dynamic components and modules in --prod builds fails as follows. Non-prod builds are fine.

I have a pared-down repro site here:
https://github.com/johncrim/angular-dynamic-styleguide
It uses components that are compiled at runtime to display template markup next to working examples of the template markup.

This is an @angular/cli created project.

The AppComponent displays a sequence of 3 dynamically compiled components, which are all included in a single dynamically compiled module listed below. AppComponent renders fine in --prod mode when CommonModule is not imported by the dynamic module. When CommonModule is imported:

    const examplesModule = NgModule({
      declarations: [components],
      exports: [...components],
      entryComponents: [components],
      imports: [MatIconModule] // works
      // BUGBUG: Adding CommonModule results in Error: Can't resolve all parameters for NgClass: (?, ?, ?, ?).
      //imports: [MatIconModule, CommonModule]
    })(class TemplateExamplesModule {
    });

... the below exception is thrown.

🔬 Minimal Reproduction

git clone https://github.com/johncrim/angular-dynamic-styleguide
yarn
yarn start --prod
(launch browser - works)

In template-examples.service.ts, line 66, uncomment the //imports: [MatIconModule, CommonModule] line, and comment out the previous imports: line - error occurs.

🔥 Exception or Error

Error: Can't resolve all parameters for NgClass: (?, ?, ?, ?).
    at syntaxError (main.2654bff….js:20769)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata (main.2654bff….js:37032)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getTypeMetadata (main.2654bff….js:36925)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNonNormalizedDirectiveMetadata (main.2654bff….js:36544)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.loadDirectiveMetadata (main.2654bff….js:36406)
    at main.2654bff….js:44064
    at Array.forEach ()
    at main.2654bff….js:44063
    at Array.forEach ()
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (main.2654bff….js:44060)
    at syntaxError (main.2654bff….js:20769)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata (main.2654bff….js:37032)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getTypeMetadata (main.2654bff….js:36925)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNonNormalizedDirectiveMetadata (main.2654bff….js:36544)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.loadDirectiveMetadata (main.2654bff….js:36406)
    at main.2654bff….js:44064
    at Array.forEach ()
    at main.2654bff….js:44063
    at Array.forEach ()
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (main.2654bff….js:44060)
    at resolvePromise (polyfills.9013475….js:822)
    at resolvePromise (polyfills.9013475….js:779)
    at polyfills.9013475….js:881
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.9013475….js:429)
    at Object.onInvokeTask (main.2654bff….js:61647)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.9013475….js:428)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (polyfills.9013475….js:196)
    at drainMicroTaskQueue (polyfills.9013475….js:603)
defaultErrorLogger	@	main.2654bff….js:60097
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError	@	main.2654bff….js:60145
next	@	main.2654bff….js:62128
schedulerFn	@	main.2654bff….js:58109
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub	@	main.2654bff….js:79931
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next	@	main.2654bff….js:79869
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next	@	main.2654bff….js:79812
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next	@	main.2654bff….js:79789
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next	@	main.2654bff….js:79554
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit	@	main.2654bff….js:58093
(anonymous)	@	main.2654bff….js:61678
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke	@	polyfills.9013475….js:396
push../node_modules/zone.js/dist/zone.js.Zone.run	@	polyfills.9013475….js:146
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular	@	main.2654bff….js:61615
onHandleError	@	main.2654bff….js:61678
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError	@	polyfills.9013475….js:400
push../node_modules/zone.js/dist/zone.js.Zone.runGuarded	@	polyfills.9013475….js:162
_loop_1	@	polyfills.9013475….js:685
api.microtaskDrainDone	@	polyfills.9013475….js:694
drainMicroTaskQueue	@	polyfills.9013475….js:610
Promise.then (async)		
scheduleMicroTask	@	polyfills.9013475….js:586
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask	@	polyfills.9013475….js:418
onScheduleTask	@	polyfills.9013475….js:305
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask	@	polyfills.9013475….js:409
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask	@	polyfills.9013475….js:240
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask	@	polyfills.9013475….js:260
scheduleResolveOrReject	@	polyfills.9013475….js:870
ZoneAwarePromise.then	@	polyfills.9013475….js:970
push../node_modules/@angular/core/fesm5/core.js.ApplicationInitStatus.runInitializers	@	main.2654bff….js:61118
(anonymous)	@	main.2654bff….js:62131
_callAndReportToErrorHandler	@	main.2654bff….js:62224
(anonymous)	@	main.2654bff….js:62129
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke	@	polyfills.9013475….js:396
onInvoke	@	main.2654bff….js:61656
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke	@	polyfills.9013475….js:395
push../node_modules/zone.js/dist/zone.js.Zone.run	@	polyfills.9013475….js:146
push../node_modules/@angular/core/fesm5/core.js.NgZone.run	@	main.2654bff….js:61570
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModuleFactory	@	main.2654bff….js:62120
./src/main.ts	@	main.2654bff….js:99637
__webpack_require__	@	runtime.618bcde….js:79
0	@	main.2654bff….js:99651
__webpack_require__	@	runtime.618bcde….js:79
checkDeferredModules	@	runtime.618bcde….js:46
webpackJsonpCallback	@	runtime.618bcde….js:33
(anonymous)	@	main.2654bff….js:1

🌍 Your Environment

Angular Version:

Angular CLI: 7.1.2
Node: 11.3.0
OS: win32 x64
Angular: 7.1.2
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.11.2
@angular-devkit/build-angular     0.11.2
@angular-devkit/build-optimizer   0.11.2
@angular-devkit/build-webpack     0.11.2
@angular-devkit/core              7.1.2
@angular-devkit/schematics        7.1.2
@angular/cdk                      7.1.1
@angular/material                 7.1.1
@ngtools/webpack                  7.1.2
@schematics/angular               7.1.2
@schematics/update                0.11.2
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.23.1

Anything else relevant?

Additional Background:
https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e
https://github.com/apoterenko/ngx-dynamic-template

I've tested examples based on the article, and the ngx-dynamic-template component. They fail in the same way in --prod builds.

[alxhub]

This is a duplicate of #27405, with the same resolution - this is not supported in Angular today, but will likely work in Ivy.

[alexzuza]

@johncrim

That's because Angular changed how it distributes artefacts in 6.1.8 version.

Compare:

6.1.7 https://unpkg.com/@angular/common@6.1.7/fesm5/common.js

  CommonModule.decorators = [
        { type: NgModule, args: [{
                    declarations: [COMMON_DIRECTIVES, COMMON_PIPES],
                    exports: [COMMON_DIRECTIVES, COMMON_PIPES],
                    providers: [
                        { provide: NgLocalization, useClass: NgLocaleLocalization },
                    ],
                },] }
    ];

6.1.8 https://unpkg.com/@angular/common@6.1.8/fesm5/common.js

 CommonModule = __decorate([
        NgModule({
            declarations: [COMMON_DIRECTIVES, COMMON_PIPES],
            exports: [COMMON_DIRECTIVES, COMMON_PIPES],
            providers: [
                { provide: NgLocalization, useClass: NgLocaleLocalization },
            ],
        })
    ], CommonModule);

So to make it work you have to use reflect polyfills.

Try adding import 'core-js/es7/reflect'; in polyfills.ts

[johncrim]

@alexzuza - that completely solves my problem! Thank you!!

Adding import 'core-js/es7/reflect'; to polyfills.ts resolves this.

For others: Note that running dynamically compiled components with ng build --prod also requires

              "buildOptimizer": false,

in the production configuration in angular.json.

I've updated https://github.com/johncrim/angular-dynamic-styleguide in the hopes this can help others with dynamic components in AOT/--prod builds.

[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.}