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

Question

我在Angular 2 项目中使用了这个es6-module-loader，它非常适合在网络浏览器中实时加载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 中，这没有问题，因为由Angular 加载的项目所需的所有node_modules 原样，但在Angular 6 中，似乎所有这些依赖项都由Webpack 展示并吐出所有在一个大胖子JavaScript 文件中。那么，我怎样才能绕过这个Webpack 简化，以便可以加载动态模块？

编辑：

或者至少使用上面公开的相同过程（加载源代码、编译 [transpile] 并在客户端机器中渲染）从 es6-module-loader（已弃用）迁移到 es-module-loader 的示例。

Answer 1

我不熟悉 Angular 6，但问题似乎源于 webpack 的模块解析过程，模块加载器在编译时没有机会获取该模块依赖项。有几种方法可以解决这个问题。

假设它是以兼容的方式声明的（如 common-js、umd 等），您可能只需将 @angular/core 添加为 external dependency 即可。如果它尚未以这种方式声明，您始终可以在它周围创建一个包装器以公开它，例如作为common-js 模块。

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