我面临着同样的问题。据我目前的理解：

Webpack 将所有资源放在一个包中，并将所有资源替换System.import为__webpack_require__. 因此，如果您想在运行时使用 SystemJsNgModuleLoader 动态加载module，加载器将在包中搜索module。如果捆绑包中不存在该module，您将收到错误消息。Webpack 不会向服务器询问该module。这对我们来说是一个问题，因为我们想要加载一个在构建/编译时我们不知道的module。我们需要的是加载器，它会在运行时为我们加载一个module（惰性和动态）。在我的示例中，我使用 SystemJS 和 Angular 6 / CLI。

1. 安装 SystemJS： npm install systemjs –save
2. 将它添加到 angular.json: "scripts": [ "node_modules/systemjs/dist/system.src.js"]

app.component.ts

import { Compiler, Component, Injector, ViewChild, ViewContainerRef } from '@angular/core';

import * as AngularCommon from '@angular/common';
import * as AngularCore from '@angular/core';

declare var SystemJS;

@Component({
  selector: 'app-root',
  template: '<button (click)="load()">Load</button><ng-container #vc></ng-container>'
})
export class AppComponent {
  @ViewChild('vc', {read: ViewContainerRef}) vc;

  constructor(private compiler: Compiler, 
              private injector: Injector) {
  }

  load() {
    // register the modules that we already loaded so that no HTTP request is made
    // in my case, the modules are already available in my bundle (bundled by webpack)
    SystemJS.set('@angular/core', SystemJS.newModule(AngularCore));
    SystemJS.set('@angular/common', SystemJS.newModule(AngularCommon));

    // now, import the new module
    SystemJS.import('my-dynamic.component.js').then((module) => {
      this.compiler.compileModuleAndAllComponentsAsync(module.default)
            .then((compiled) => {
                let moduleRef = compiled.ngModuleFactory.create(this.injector);
                let factory = compiled.componentFactories[0];
                if (factory) {
                    let component = this.vc.createComponent(factory);
                    let instance = component.instance;
                }
            });
    });
  }
}

我的dynamic.component.ts

import { NgModule, Component } from '@angular/core';
import { CommonModule } from '@angular/common';

import { Other } from './other';

@Component({
    selector: 'my-dynamic-component',
    template: '<h1>Dynamic component</h1><button (click)="LoadMore()">LoadMore</button>'
})    
export class MyDynamicComponent {
    LoadMore() {
        let other = new Other();
        other.hello();
    }
}
@NgModule({
    declarations: [MyDynamicComponent],
    imports: [CommonModule],
})
export default class MyDynamicModule {}

other.component.ts

export class Other {
    hello() {
        console.log("hello");
    }
}

如您所见，我们可以告诉 SystemJS 我们的包中已经存在哪些module。所以我们不需要再次加载它们 ( SystemJS.set)。我们在我们的my-dynamic-component（在本例中other）导入的所有其他module将在运行时从服务器请求。

我使用了https://github.com/kirjs/angular-dynamic-module-loading解决方案和 Angular 6 的库支持来创建我在 Github 上共享的应用程序。由于公司政策，它需要离线。一旦关于示例项目源的讨论结束，我将在 Github 上分享它！

更新：可以找到回购；https://github.com/lmeijdam/angular-umd-dynamic-example

我已经在 Angular 6 中进行了测试，以下解决方案适用于从外部包或内部module动态加载module。

1.如果要从库项目或包中动态加载module：

我有一个库项目“admin”（或者您可以使用包）和一个应用程序项目“app”。在我的“admin”库项目中，我有 AdminModule 和 AdminRoutingModule。在我的“应用程序”项目中：

一个。在 tsconfig.app.json 中进行更改：

  "compilerOptions": {
    "module": "esNext",
  },

湾 在 app-routing.module.ts 中：

const routes: Routes = [
    {
        path: 'admin',
        loadChildren: async () => {
            const a = await import('admin')
            return a['AdminModule'];
        }
    },
    {
        path: '',
        redirectTo: '',
        pathMatch: 'full'
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {
}

2.如果你想从同一个项目中加载一个module。

有4种不同的选择：

一个。在 app-routing.module.ts 中：

const routes: Routes = [
    {
        path: 'example',
        /* Options 1: Use component */
        // component: ExampleComponent,  // Load router from component
        /* Options 2: Use Angular default lazy load syntax */
        loadChildren: './example/example.module#ExampleModule',  // lazy load router from module
        /* Options 3: Use Module */
        // loadChildren: () => ExampleModule, // load router from module
        /* Options 4: Use esNext, you need to change tsconfig.app.json */
        /*
        loadChildren: async () => {
            const a = await import('./example/example.module')
            return a['ExampleModule'];
        }
        */
    },
    {
        path: '',
        redirectTo: '',
        pathMatch: 'full'
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {
}
``

用 angular 6 库和 rollup 来做这件事。我刚刚尝试过它，我可以与主应用程序共享独立的 angular AOT module，而无需最后重建。

1. 在 angular 库中设置angularCompilerOptions.skipTemplateCodegen为 false 并且在构建库之后您将获得module工厂。
2. 之后构建一个带有汇总的 umd module，如下所示： rollup dist/plugin/esm2015/lib/plugin.module.ngfactory.js --file src/assets/plugin.module.umd.js --format umd --name plugin
3. 在主应用程序中加载文本源 umd 包并使用module上下文对其进行评估
4. 现在您可以从导出对象访问 ModuleFactory

在这里https://github.com/iwnow/angular-plugin-example您可以找到如何使用独立构建和 AOT 开发插件

我相信，如果您使用 webpack 构建和运行主应用程序，则可以使用 SystemJS 加载 UMD 包。我使用了一个使用 ng-packagr 来构建动态插件/插件module的 UMD 包的解决方案。这个 github 演示了描述的过程：https : //github.com/nmarra/dynamic-module-loading