Question

我在es6-module-loader项目中使用了Angular 2，它非常适合在网络浏览器中实时加载TypeScript模块。现在，我正在将该项目升级到Angular 6，但是在这里加载模块的imports的依赖项未得到满足。例如：

declare var SystemLoader:any;

export class DemoClass {
  constructor() {
    var source = "export class Foo { " +
    "constructor() { console.log('Created the ES6 class foo!'); } " +
    "execMethod() { console.log('Executed method!') }" +
    "}";

     SystemLoader.module(source, {name: _name}).then(function (module: any) {
        module.Foo.prototype.execMethod();
     }
  }
}

此先前代码可在Angular 6中使用。它将加载模块Foo并在Console中打印这些行。但是，如果我使模块有些复杂，并添加一些import，如下所示：

declare var SystemLoader:any;

export class DemoClass {
  constructor() {
    var source = "import {Component} from \"@angular/core\"; " +
    "export class Foo { " +
    "constructor() { console.log('Created the ES6 class foo!'); } " +
    "execMethod() { console.log('Executed method!') }" +
    "}";

     SystemLoader.module(source, {name: _name}).then(function (module: any) {
        module.Foo.prototype.execMethod();
     }
  }
}

然后它将无法正常工作，并向error 404 loading @angular/core投诉。因此，在Angular 2中这没问题，因为该项目所需的所有node_modules都是由Angular加载的，但是在Angular 6中似乎所有这些依赖项都由Webpack进行了展示，然后全部分散在一个大的JavaScript文件中。因此，如何解决这种Webpack的简化问题，以便动态模块可以加载？

编辑：

或者至少有一个示例，使用上面公开的相同过程（加载源代码，编译[transpile]并在客户端计算机中进行渲染）从es6-module-loader（不建议使用）迁移到es-module-loader。

Answer 1

我对角度6并不熟悉，但是问题似乎出在webpack的模块解析过程中，在该过程中，模块加载器没有机会在编译时获取该模块依赖性。有几种方法可以解决这个问题。

假设以兼容的方式（如common-js，umd等）声明了@angular/core作为external dependency，您可能会删除。如果尚未以这种方式声明，则可以始终围绕它创建一个包装器以将其公开，例如作为common-js模块。

另一种方法是在此依赖项上有一个code-split点（使用动态导入或require.ensure）。我不确定是否会这样做，但是如果相关的角度加载程序（将源文本解析为源代码的角度加载程序）有机会工作，并且其输出是已编译的代码，则可能。

es6-module-loader无法在Angular 6中找到@ angular / core

1 个答案: