Useful or not, from you.
angular "Cannot assign to read only property 'ngPrivateData'" when running with JIT compiler

🐞 bug report

Is this a regression?

Kind of, it worked without Ivy. see comment below, the issue was caused by the strictStateImmutability setting of ngrx in combination with @ngrx/router-store.

Description

I set enableIvy to true in my app's angularCompilerOptions. When building with AOT, everything works fine. When building the app in production mode, everything works fine. When starting the app with the JIT compiler not in production mode, I get this error and the application stops working:

TypeError: Cannot assign to read only property 'ngPrivateData' of function 'function HomepageComponent_Template(rf,ctx) {
      if (rf & 1) {
        jit___elementStart_4(0,'h1',_c0);
   ...<omitted>... }'
TypeError: Cannot assign to read only property 'ngPrivateData' of function 'function HomepageComponent_Template(rf,ctx) {
      if (rf & 1) {
        jit___elementStart_4(0,'h1',_c0);
   ...<omitted>... }'

🔬 Minimal Reproduction

The app where this happens is pretty simple and straightforward. Just have a look at the feature/ivy branch: https://github.com/ngxp/demo/tree/feature/ivy

🔥 Exception or Error

see above

🌍 Your Environment

Angular Version:

Angular CLI: 8.0.3
Node: 10.16.0
OS: win32 x64
Angular: 8.0.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.3
@angular-devkit/build-angular     0.800.3
@angular-devkit/build-optimizer   0.800.3
@angular-devkit/build-webpack     0.800.3
@angular-devkit/core              8.0.3
@angular-devkit/schematics        8.0.3
@angular/cli                      8.0.3
@ngtools/webpack                  8.0.3
@schematics/angular               8.0.3
@schematics/update                0.800.3
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.30.0
That's a useful answer
Without any help

I narrowed the issue down to the strictStateImmutability setting of @ngrx/store and the default router state serializer of @ngrx/router-store. With strictStateImmutability, ngrx makes everything in the store immutable. If you use the default state serializer of @ngrx/router-store, the router state in the store also includes the component instances (routerState.root.firstChild...component). strictStateImmutability makes these instances immutable, which leads ngPrivateData being readonly.

A similar issue occurs, when you directly include a component (in the example above, the component was rendered via the router). In this case, I got the following error:

TypeError: Cannot add property __NG_ELEMENT_ID__, object is not extensible
    at bloomAdd (core.js:6508)
    at diPublicInInjector (core.js:6648)
    at findDirectiveMatches (core.js:12796)
    at createDirectivesAndLocals (core.js:12058)
    at ɵɵelementStart (core.js:15324)
    at ɵɵelement (core.js:15418)
    at AppComponent_Template (template.html:5)
    at executeTemplate (core.js:11982)
    at checkView (core.js:13333)
    at componentRefresh (core.js:13097)

To solve this issue, either set strictStateImmutability (and probably also strictActionImmutability) to false or use RouterState.Minimal as router state serializer (see https://ngrx.io/guide/router-store/configuration#routerstateminimal).