ES6模块加载器在Angular 6中无法找到@angular/core。

Question

我曾在一个Angular 2项目中使用过es6-module-loader，并且它非常适合在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的这种简化方式，以便动态模块可以加载？

编辑：

或者至少提供一个示例，以相同的过程从es6-module-loader（已弃用）迁移到es-module-loader（加载源代码、编译[转译]并在客户端机器上呈现）。

- Joe Almore

---

你是否在使用Angular CLI？另外，你尝试过删除所有的node模块并重新安装吗？（只需重新运行npm install） - Aljosha Novakovic

@AljoshaNovakovic 这与开发环境中的错误安装无关，问题仅在运行时发生，一旦文件加载到服务器中。在那里，由于Webpack的作用，这些文件都被简化并使用其他名称。 - Joe Almore

@JoeAlmore 你确定问题不是源字符串的问题吗？应该是 "import { Component } from '@angular/core'; " + - Dipen Shah

在你的项目目录中运行npm install。 - Harkal

@JoeAlmore es6-module-loader 已经废弃，因此可能会出现支持方面的问题。请尝试升级到 es-module-loader。 - dRoyson

Answer 1

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

你可能只需将@angular/core作为外部依赖项添加即可，假设它以兼容的方式声明（如common-js，umd等）。如果它还没有以这种方式声明，您始终可以创建一个包装器来公开它，例如一个common-js模块。

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

- Eliran Malka

---

是的，但如果我创建一个包装器来公开依赖项，那么在客户端机器上我将加载两次依赖项，一次来自webpack，一次来自包装器。 - Joe Almore

@JoeAlmore，这不应该发生的任何理由。 - Eliran Malka