CODEWITHSUNDEEP
angularngrx-router-store
Jason
Jason

Reputation: 1376

angular and error of attempting to configure _source for RouterOutlet and NgIf

I have an app where app.component only has router-outlet. I was having no issues until I added an ng-template for a ViewChild in a component 4 levels down from app component. Here is the structure:

AppComponent lazy loads FolderModule with FolderComponent. The folder component template is an ngFor that renders child components. It is the child component that has the ViewChild. I am not sure of a good way to explain this. I think the ngIf in the error is my ng-if that loads the page once there is data. I am hoping somebody recognises this error and can tell me what it means and why something so deep would cause an issue at the root of the app. The ngIf part just keeps going:

Here is the line that causes it. The error is below:

@ViewChild('performercontainer', {read: ViewContainerRef}) performerContainer: ViewContainerRef;

Attempting to configure '__source' with descriptor '{"value":"RouterOutlet","configurable":true}' on object 'function ViewContainerRef() { }' and got error, giving up: TypeError: Cannot define property __source, object is not extensible zone.js:2257 Attempting to configure '__source' with descriptor '{"value":"NgIf","configurable":true}' on object 'function ViewContainerRef() { }' and got error, giving up: TypeError: Cannot define property __source, object is not extensible

Upvotes: 2

Views: 2684

Answers (4)

Onur Dikmen
Onur Dikmen

Reputation: 377

If you apply the below code block in app.module.ts the problem will be solved.

@NgModule({
declarations: [],
imports: [
         StoreRouterConnectingModule.forRoot({
stateKey: 'router',
routerState: RouterState.Minimal
}),
],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
})

"@ngrx/store": "^8.6.0" check the version. check link Must be 8 or higher.

To update your packages to the latest released version, run the command below.

ng update @ngrx/store@8

V8 has the minimum version requirements:

  • Angular version 8.x
  • Angular CLI version 8.0.2
  • TypeScript version 3.4.x
  • RxJS version 6.4.0

RouterState.Minimal will use the MinimalRouterStateSerializer serializer to serialize the Angular Router's RouterState and RouterEvent.

The difference between MinimalRouterStateSerializer and the default RouterStateSerializer is that this serializer is fully serializable. To make the state and the actions serializable, the properties paramMap, queryParamMap and component are ignored.

 StoreRouterConnectingModule.forRoot({
                stateKey: 'router',
                routerState: RouterState.Minimal
    }),

Upvotes: 0

Klaster_1 Нет войне
Klaster_1 Нет войне

Reputation: 12156

To expand on @tubbsy's answer, you can opt in to use MinimalRouterStateSerializer, here's the quote from @ngrx/router-store docs:

RouterState.Minimal will use the MinimalRouterStateSerializer serializer to serialize the Angular Router's RouterState and RouterEvent.

The difference between MinimalRouterStateSerializer and the default RouterStateSerializer is that this serializer is fully serializable. To make the state and the actions serializable, the properties paramMap, queryParamMap and component are ignored.

StoreRouterConnectingModule.forRoot({
  routerState: RouterState.Minimal,
});

The error happens because default RouterStateSerializer includes component class as property on store actions, so if you enable strict run-time immutability checks, the component class will get recursively frozen, which interferes with Angular DI (this line). This might cause issues with Ivy too.

Upvotes: 3

tubbsy
tubbsy

Reputation: 61

For those of you who don't trust yourselves, or, more likely, your incompetent colleagues, to code immutably without Store Freeze: you can solve this conundrum by implementing the Custom State 'Serializer' as shown in the Ngrx docs.

Upvotes: 2

Jason
Jason

Reputation: 1376

for anybody that comes across this. The issue was that I am using storeFreeze from ngrx. I removed that and the errors went away. so I guess it was being a little aggressive.

Upvotes: 4

Related Questions