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

Question

我es6-module-loader在一个Angular 2项目中使用它,它非常适合TypeScript在Web浏览器中实时加载模块.现在,我正在将此项目升级到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使用上面公开的相同过程的示例(加载源代码,编译[transpile]并在客户端的机器中渲染).

Answer 1

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

你可能只是添加@angular/core作为外部依赖,假设它以兼容的方式声明(如common-js,umd等).如果它尚未以这种方式声明,您可以始终在其周围创建一个包装器以显示它,例如作为common-js模块.

另一种方法是在此依赖关系中使用代码分割点(使用动态导入或require.ensure).我不确定它会做什么,但如果相关的角度加载器(将源文本解析为源代码的那个)有机会工作,并且它的输出是编译代码,它可能会.