问题
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 recognizes 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
回答1:
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.
回答2:
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.
回答3:
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.
来源：https://stackoverflow.com/questions/51410091/angular-and-error-of-attempting-to-configure-source-for-routeroutlet-and-ngif