尝试为 RouterOutlet 和 NgIf 配置 _source 的角度和错误

Posted 2023-02-23

【中文标题】尝试为 RouterOutlet 和 NgIf 配置 _source 的角度和错误

【英文标题】：angular and error of attempting to configure _source for RouterOutlet and NgIf

【发布时间】：2018-12-26 20:24:32

【问题描述】：

我有一个应用程序，其中 app.component 只有路由器插座。在从应用程序组件向下 4 层的组件中为 ViewChild 添加ng-template 之前，我没有遇到任何问题。这是结构：

AppComponent 使用 FolderComponent 延迟加载 FolderModule。文件夹组件模板是呈现子组件的 ngFor。它是具有 ViewChild 的子组件。我不确定解释这一点的好方法。我认为错误中的 ngIf 是我的 ng-if，一旦有数据就会加载页面。我希望有人能认识到这个错误，并能告诉我它的含义以及为什么这么深的东西会导致应用程序的根本问题。 ngIf 部分继续进行：

这是导致它的行。错误如下：

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

尝试在对象 'function ViewContainerRef() 上使用描述符 '"value":"RouterOutlet","configurable":true' 配置 '__source' ' 并得到错误，放弃：TypeError: Cannot define property __source, object is not extensible zone.js:2257 尝试在对象 'function ViewContainerRef() 上使用描述符 '"value":"NgIf","configurable":true' ' 报错，放弃：TypeError: Cannot define property __source, object is not extensible

【参考方案1】：

对于遇到此问题的任何人。问题是我正在使用来自ngrx的storeFreeze。我删除了它，错误就消失了。所以我想这有点咄咄逼人。

【讨论】：

我也有同样的问题。为什么 storeFreeze 会导致此问题？谢谢

我的猜测是它太急于检查所有内容。据我所知，这与我的实际状态无关。

【参考方案2】：

对于那些不信任自己的人，或者更有可能是不称职的同事，在不使用 Store Freeze 的情况下进行不可更改的编码：您可以通过实现自定义状态“序列化器”来解决这个难题，如 Ngrx 文档中所示。

【参考方案3】：

要扩展@tubbsy 的答案，您可以选择使用MinimalRouterStateSerializer，这是来自@ngrx/router-store docs 的引用：

RouterState.Minimal 将使用 MinimalRouterStateSerializer 序列化器用于序列化 Angular 路由器的 RouterState 和 路由器事件。

MinimalRouterStateSerializer 和默认的区别 RouterStateSerializer 是这个序列化器是完全可序列化的。 为了使状态和动作可序列化，属性 忽略 paramMap、queryParamMap 和组件。

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

发生错误是因为默认 RouterStateSerializer 包含组件类作为存储操作的属性，因此如果启用严格的运行时不变性检查，组件类将被递归冻结，这会干扰 Angular DI (this line)。这个might cause issues with Ivy too。