Angular 生产模式 entryComponents 不能正常工作答案

【问题标题】：Angular production mode entryComponents not quite workingAngular 生产模式 entryComponents 不能正常工作
【发布时间】：2022-01-28 23:19:01
【问题描述】：

我使用custom attribute solution 和dynamic component creation 来动态创建组件。该组件使用自定义属性进行修饰，然后在运行时在字典中查找。此类组件必须在模块中以entryComponents 引用。这在开发模式下工作正常，但一旦我尝试生产，它就不再工作了。

在构建过程中也没有错误/警告。事情只是停止工作。 entryComponents 有一个 @deprecated 评论告诉它不再需要但显然没有错误使用。

即使我将entryComponents 移动到app.module.ts，prod 模式仍然失败。我怎样才能使这项工作？只要我可以在运行时按名称引用组件，我很乐意使用其他方法。

我创建了a demo，它与a git repository 一起重现了该问题。请注意，仅在 StackBlitz 中执行 enableProdMode() 不会证明该问题。你必须做我不确定 StackBlitz 能做的“--prod”。

使用ng serve 运行应用程序时一切正常，但尝试使用ng serve --prod 的生产模式会使应用程序的行为有所不同。

【问题讨论】：

请详细说明面临的问题。表现不同是一个非常笼统的术语。
在 dev 和 prod 构建之间存在意想不到的不同行为。我解释了区别。显然 entryComponents 在 dev 构建中有效，但在 prod 构建中被完全忽略。

标签： angular

【解决方案1】：

我找到了解决办法。
和你一样，我有一个带有自定义装饰器的动态组件。

即使组件在模块中导入并在declarations 中引用，装饰器也不会执行。如果我理解正确，原因是摇树。

解决方法很简单：

// my.module.ts
import { MyDynamicComponent } from './my-dynamic.component.ts';

const dynamicComponents = [MyDynamicComponent];
@NgModule({
    declarations: [...dynamicComponents],
    imports: [CommonModule]
})
export class MyModule {}

如果您在使用 ng-packager 编译的库中遇到此问题，上述解决方案还不够，您还必须以某种方式“使用”该变量。

例如：

// my.module.ts
import { MyDynamicComponent } from './my-dynamic.component.ts';

const dynamicComponents = [MyDynamicComponent];
@NgModule({
    declarations: [...dynamicComponents],
    imports: [CommonModule]
})
export class MyModule {
    constructor() {
        (window as any).dynamicComponents = dynamicComponents;
    }
}

【讨论】：

谢谢。这正是我最终做的，但忘了回答自己。

【解决方案2】：

我假设您使用的是 Angular 9+。正如错误所说，entryComponents 自 Angular 9 和 Ivy 实现以来已被弃用，因此您可以安全地删除它。你也可以阅读更多关于它here和here

【讨论】：

这不会解决问题。 prod 模式下的自定义装饰器出现问题