我们可以将System.import或import()函数用于任何Javascript文件或仅使用单个模块特定的js吗?

Question

下面是一篇关于动态组件加载的好文章：

https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e

我想了解更多关于System.import使用的信息。 作者使用以下语法加载要动态加载的模块的 javascript 文件。

System.import('../module1.module.js').then((module) => {
this.compiler.compileModuleAndAllComponentsAsync(module.Module1Module)
.then((compiled) => {
const factory = compiled.componentFactories[0];
this.container.createComponent(factory);
});
});

我知道 system.import 用于在运行时动态加载模块。

在我们的例子中，我们提供了模块文件的ts的名称，但由于js文件也将具有相同的名称，我们可以在导入函数的参数中提供该名称。

但我想知道我们是否可以在参数中提供一个通用的 JS 文件，该文件不一定包含该模块，但也包含更多模块和组件。(这些模块可以来自其他外部项目/库( 然后我们可以像下面这样提供其中一个模块名称并创建组件。

System.import('../main-app1.js').then((module) => {
this.compiler.compileModuleAndAllComponentsAsync(module.Module1Module)
.then((compiled) => {
const factory = compiled.componentFactories[0];
this.container.createComponent(factory);
});
});

我已经尝试了上述方法，但它对我不起作用。它在运行时失败。

core.js:9110 ERROR Error: Uncaught (in promise): Error: No NgModule metadata found for 'undefined'.
Error: No NgModule metadata found for 'undefined'.

Answer 1

因此，我将总结我的发现，以便将来可能对某人有所帮助：

• 首先，是的，我们可以在System.import的参数中提供一个通用的JS文件。

这是因为System.import不是一个有棱角的东西，而是一个javascript/es功能。

它并没有说您只能提供一个角度模块 js(我之前的理解是错误的(，但也提供了一个通用的 js 文件。

• 现在我收到错误的原因是由于一个愚蠢的错误，即我作为参数传递的 js 不包含模块的定义。它是在没有引用我尝试加载的模块的情况下编译的。

简而言之，该模块不存在在JS文件中。因此，请确保打开js文件并检查该模块是否存在，并且您没有错误地忘记将该模块包含在js中。