Angular， createComponent() 抛出"ERROR TypeError: Cannot add property"

Question

我正在动态创建组件，并通过ngrx操作传递组件的类，最终得到：

loadComponent(componentType: Type<any>): void {
const viewContainerRef = this.contentHost.viewContainerRef;
viewContainerRef.clear();
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentType);
const componentRef = viewContainerRef.createComponent(componentFactory);
componentRef.instance.type = componentType;
}    

一旦这个方法被调用，我就会得到：

core.js:5980 ERROR TypeError: Cannot add property __NG_ELEMENT_ID__, object is not extensible
at bloomAdd (core.js:3048)
at diPublicInInjector (core.js:3190)
at createRootComponentView (core.js:12159)
at ComponentFactory$1.create (core.js:24822)
at ViewContainerRef.createComponent (core.js:22896) <--- this is the createComponent()
at WorkspaceSingleComponent.loadComponent (workspace-single.component.ts:45)  <---- this is my class
at SafeSubscriber._next (workspace-single.component.ts:32)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
at SafeSubscriber.next (Subscriber.js:122)
at Subscriber._next (Subscriber.js:72)

Answer 1

显然，当这个Component类通过ngrx操作的序列化时，它会被冻结，我们不能用它来构造新的实例。

我们可以使用以下变通方法使其发挥作用，直到找到更好的方法。在app.module.ts中，在StoreModule的初始值设定项中添加：

StoreModule.forRoot(reducers, {
metaReducers,
runtimeChecks: {
strictActionImmutability: false,
strictActionSerializability: false,
strictActionTypeUniqueness: isDevMode(),
strictActionWithinNgZone: isDevMode(),
strictStateImmutability: isDevMode(),
strictStateSerializability: false,
}
}),

感谢Simon Hayden的这种变通方法。来源：https://gitter.im/ngrx/platform?at=5f3cbaa33dac53434017de6a