[Ivy] App crashes at runtime with NgRx 7.x

@IgorMinar

🐞 bug report

Affected Package

The issue is caused by package @angular/*

Is this a regression?

Yes, the previous version in which this bug was not present was: Angular version 7.x

Description

When using the latest Angular and CLI betas, and running ivy-ngcc, and the latest version of NgRx from npm, the application compiles successfully but fails at runtime.

🔬 Minimal Reproduction

Reproduction steps are in the README on the repo

https://github.com/brandonroberts/ngrx-ivy-runtime-error

🔥 Exception or Error

Without adding import 'core-js/es7/reflect'; to src/polyfills.ts and ng serve --aot


main.ts:13 Error: Dependency array must have arguments.
    at reflectDependency (core.js:887)
    at core.js:870
    at Array.map ()
    at convertDependencies (core.js:870)
    at reflectDependencies (core.js:866)
    at Function.get (core.js:956)
    at getInjectableDef (core.js:312)
    at injectableDefOrInjectorDefFactory (core.js:13259)
    at providerToFactory (core.js:13297)
    at providerToRecord (core.js:13281)

With import 'core-js/es7/reflect'; to src/polyfills.ts and ng serve --prod


Error: Angular JIT compilation failed: '@angular/compiler' not loaded!
  - JIT compilation is discouraged for production use-cases! Consider AOT mode instead.
  - Did you bootstrap using '@angular/platform-browser-dynamic' or '@angular/platform-server'?
  - Alternatively provide the compiler with 'import "@angular/compiler";' before bootstrapping.
    at Ae (core.js.pre-build-optimizer.js:448)
    at Ge (core.js.pre-build-optimizer.js:869)
    at ze (core.js.pre-build-optimizer.js:866)
    at Function.get (core.js.pre-build-optimizer.js:20742)
    at ge (core.js.pre-build-optimizer.js:320)
    at e.processInjectorType (core.js.pre-build-optimizer.js:13161)
    at core.js.pre-build-optimizer.js:13179
    at core.js.pre-build-optimizer.js:13340
    at Array.forEach ()
    at va (core.js.pre-build-optimizer.js:13340)

@angular/compiler is already imported in the main.ts file before bootstrapping. Disabling buildOptimizer causes the app to run successfully.

🌍 Your Environment

Angular Version:



Angular CLI: 8.0.0-beta.4
Node: 10.14.2
OS: linux x64
Angular: 8.0.0-beta.6
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.14.0-beta.2
@angular-devkit/build-angular     0.14.0-beta.2
@angular-devkit/build-optimizer   0.14.0-beta.2
@angular-devkit/build-webpack     0.14.0-beta.2
@angular-devkit/core              8.0.0-beta.4
@angular-devkit/schematics        8.0.0-beta.4
@angular/cli                      8.0.0-beta.4
@ngtools/webpack                  8.0.0-beta.2
@schematics/angular               8.0.0-beta.4
@schematics/update                0.14.0-beta.4
rxjs                              6.4.0
typescript                        3.2.4
webpack                           4.29.5

Anything else relevant?

NgRx versions

    "@ngrx/effects": "^7.2.0",
    "@ngrx/entity": "^7.2.0",
    "@ngrx/schematics": "^7.2.0",
    "@ngrx/store": "^7.2.0",
    "@ngrx/store-devtools": "^7.2.0",

cc: @IgorMinar @kara @alxhub

I suspect that the reason for this is that you don't use "importHelpers": true in your typescript config when making build.

As a result you're getting fesm5.js file with lots of repetitions __decorate, __decorate$1, __decorate$2 etc.

But ngcc recognizes decorators by __decorate keyword

angular/packages/compiler-cli/src/ngcc/src/host/esm2015_host.ts

Line 490 in 7060d90

const helperCalls = this.getHelperCallsForClass(symbol, '__decorate');

So if you will try to include importHelpers option then you will probably fix this error.

In Angular repo it's defined here:

angular/packages/tsconfig-build.json

Line 27 in 7060d90

"importHelpers": true

)

So that if you take a look at for example common.js bundle you will find only one definition for __decorate

https://github.com/angular/common-builds/blob/f20d1583dad1c04ae138709cb103e2d4e759c98c/fesm5/common.js#L8

@alexzuza

Thx for looking into it, @alexzuza! It sounds like this issue might not be uncommon, so it is probably a good idea to try and fix in ngcc too.

FYI, there are some ngcc-related fixes/improvements in-flight (#28963, #29092, #29119, #29209). I think it makes sense to get those in first and then investigating this one.

I'm also getting this, trying to enable Ivy on a freshly generated nx workspace (using ng serve --aot).

And nx workspace does have "importHelpers": true in the main tsconfig..

These issues seem to be resolved as of the latest beta (8.0.0-beta.13). I've updated the repo and removed the workarounds.

https://github.com/brandonroberts/ngrx-ivy-runtime-error

Angular CLI: 8.0.0-beta.16
Node: 10.10.0
OS: darwin x64
Angular: 8.0.0-beta.13
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.0-beta.16
@angular-devkit/build-angular     0.800.0-beta.16
@angular-devkit/build-optimizer   0.800.0-beta.16
@angular-devkit/build-webpack     0.800.0-beta.16
@angular-devkit/core              8.0.0-beta.16
@angular-devkit/schematics        8.0.0-beta.16
@angular/@types                   <error>
@angular/cli                      8.0.0-beta.16
@angular/events                   <error>
@angular/rxjs                     <error>
@angular/source-map               <error>
@angular/typescript               <error>
@ngtools/webpack                  8.0.0-beta.16
@schematics/angular               8.0.0-beta.16
@schematics/update                0.800.0-beta.16
rxjs                              6.4.0
typescript                        3.4.4
webpack                           4.30.0

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

Navigation Menu

Repository navigation

[Ivy] App crashes at runtime with NgRx 7.x #29114

🐞 bug report

Affected Package

Is this a regression?

Description

🔬 Minimal Reproduction

🔥 Exception or Error

🌍 Your Environment

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Ivy] App crashes at runtime with NgRx 7.x #29114

Description

🐞 bug report

Affected Package

Is this a regression?

Description

🔬 Minimal Reproduction

🔥 Exception or Error

🌍 Your Environment

Activity

alexzuza commented on Mar 7, 2019

gkalpak commented on Mar 12, 2019

fxck commented on Mar 16, 2019

brandonroberts commented on Apr 22, 2019

angular-automatic-lock-bot commented on Sep 14, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions