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

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 文件，该文件不一定包含该模块，但还包含更多模块和组件。（这些模块可以来自其他外部projects/libraries）然后我们可以提供以下模块名称之一并创建组件。

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

我已经尝试过上述方法，但它不适用于 me.It 在运行时间失败。

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 不是 angular 的东西，而是 javascript/es 的特征。

不是说只能提供angular模块js（我之前理解错了），还要提供通用的js文件。

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

简而言之，该模块不存在于 JS 文件中。所以一定要打开js文件，检查模块是否存在，没有忘记把模块包含在js中。

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

Can we use System.import or import() function to any Javascript file or only Single module specific js?

javascript

typescript

webpack

ng-modules

angular