ES6-模块-加载程序无法在角6中定位@角/核心

Question

我在一个es6-module-loader项目中使用了这个Angular 2，它非常适合在web浏览器中实时加载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的模块解析过程，在这个过程中，模块加载程序没有机会在编译时获得模块依赖。可以有几种方法来解决这个问题。

假设@angular/core是以兼容的方式声明的(如公共-js、umd等)，那么您可以取消将外部依赖性添加为外部依赖性的做法。如果它还没有以这种方式声明，那么始终可以在它周围创建一个包装器来公开它，例如，作为一个common-js模块。

另一种方法是在此依赖项上设置一个码分裂点(使用动态导入或require.ensure)。我不确定它是否能做到，但如果相关的角度加载器(将源代码解析为源代码的加载程序)有机会工作，并且其输出是编译代码，则有可能。