为自定义注射器提供动态创建的外部+ AOT编译组件

Question

我们正在一个小部件样式的系统上工作，在该系统中，我们希望使用Angular 8（无Ivy）提供AOT编译的组件，这些组件通过SystemJS加载然后呈现。为此，我们基本上遵循alexzuza's approach。构建，捆绑，导入和渲染组件效果很好。

但是，我现在想为正在创建的组件提供自定义注入器。在我看来，这应该很简单]

const injector = Injector.create({
    parent: this.injector,
    providers: [
        { provide: MY_TOKEN, useValue: 42 },
    ],
});

const compRef = this.container.createComponent(compFactory, 0, injector);

// Both of these work
console.log(injector.get(MY_TOKEN)); // 42
console.log(compRef.injector.get(MY_TOKEN)); // 42

但是，如果我们更改插件以注入此令牌：

constructor(@Inject(MY_TOKEN) private value: number) {}

…我们只是收到一个错误，因为找不到令牌：

ERROR NullInjectorError：StaticInjectorError（...）[o-> InjectionToken MY_TOKEN]

---

关于AOT编译的组件是否有某些特定的规定可以阻止其工作？检查包的一切都符合我的预期，并且在注入令牌或类似的东西中没有名称混乱的问题。

我如何正确地为来自外部资源的组件提供自定义注入器？

Answer 1

在Angular中为提供者使用令牌时的主要警告是我们在提供者中声明并注入类的令牌必须从同一物理位置导入。一个例外是字符串标记。

这意味着，如果您在一个js文件中具有const MY_TOKEN = new InjectionToken('MY TOKEN');，而在另一个文件中具有相同的定义，那么如果提供并注入不同的令牌，则可能会遇到此问题。

所以您的解决方案是使用字符串作为令牌或使用捆绑包之间共享的令牌。