Javascript es6模块加载器无法在angular 6中定位@angular/core

我在一个

Angular 2

项目中使用了这个

es6模块加载器

，它非常适合在web浏览器中实时加载

TypeScript

模块。现在，我正在将这个项目升级到

Angular 6

，但是在这里，加载模块的

导入

不满足依赖关系。例如：

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

，并在

控制台中打印这些行。但是如果我让模块稍微复杂一点，然后添加一些
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();
     }
  }
}

然后它就不工作了，并抱怨404加载@angular/core时出现了
错误。因此，在
Angular 2
中这没有问题，因为项目所需的所有
node_模块都是由
Angular
按原样加载的，但在
Angular 6
中，所有这些依赖项似乎都是由
Webpack
显示的，并在一个大的
JavaScript
文件中吐出的。那么，我怎样才能绕过这个
Webpack
简化，以便动态模块能够加载呢

编辑：

或者至少是一个示例，使用上面公开的相同过程（加载源代码、编译[Transfile]并在客户端机器中渲染）从
es6模块加载器
（已弃用）迁移到
es模块加载器
。
我不熟悉angular 6，但问题似乎源于webpack的模块解析过程，模块加载器在编译时没有机会获取该模块依赖项。有两种方法可以解决这个问题

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

另一种方法是在该依赖项上设置一个点（使用动态导入或
require.sure
）。我不确定它是否可以，但如果相关的angular loader（将源文本解析为源代码的加载程序）有机会工作，并且其输出是编译代码，它可能会工作。
是否使用angular CLI？另外，您是否尝试过删除所有节点模块并重新安装？（只是重新运行npm安装）@aljohanovakovic这与开发环境中的错误安装无关，只有在文件加载到服务器后，问题才会在运行时发生。由于
Webpack
@JoeAlmore的操作，这些文件都被简化，并使用了其他名称。您确定问题不是由于
源代码
字符串造成的吗？它应该是“import{Component}from'@angular/core'；”+@DipenShah很抱歉字符串没有转义，只是修复了拼写错误。在项目目录中运行npm install是的，但是如果我创建一个包装来公开依赖项，那么我将在客户机上加载依赖项两次，一次从webpack加载，另一次用于包装。@JoeAlmore，没有理由这样