Angular 2 Lazy 在带有角度路由器的 NPM 模块中加载 NgModule答案

【问题标题】：Angular 2 Lazy loading a NgModule in a NPM module with angular routerAngular 2 Lazy 在带有角度路由器的 NPM 模块中加载 NgModule
【发布时间】：2016-10-06 14:15:22
【问题描述】：

我一直在延迟加载路由中的模块，例如

export const HomeRoute: Route = {
  path: '',
  component: HomeComponent,
  canActivate: [AuthGuard],
  children: [
    {path: 'dashboard', loadChildren: 'app/+dashboard/db.module#DashboardModule'}
  ]
};

我想将我的“页面”放入 NPM 模块中。我应该在 loadChildren 属性中使用的 node_module 的路由是什么？我正在使用 angular-cli 1.0.0-beta.16

我试过了

{path: 'lazy', loadChildren: '../node_modules/hello-world/components#HelloWorld' }

还有

{path: 'lazy', loadChildren: 'hello-world/components#HelloWorld' }

导出的类是：-

import {Component} from '@angular/core';

@Component({
    selector: 'hello-world',
    styles: [`
       h1 {
            color: blue;
        }
    `],
    template: `<div>
                  <h1 (click)="onClick()">{{message}}</h1>
               </div>`
})
export class HelloWorld {

    message = "Click Me ...";

    onClick() {
        this.message = "Hello World!";
        console.log(this.message);

    }
}

还有什么我应该尝试的吗？

【问题讨论】：

标签： angular angular2-routing angular-cli

【解决方案1】：

目前这是不可能的 - 请在此处查看 AngularJS CLI 团队的回复：-

https://github.com/angular/angular-cli/issues/2601

“这是一个非常相关的问题。我认为我们不支持它 CLI atm。”（当前版本为 beta 17）

Datumgeek 在此处以不同的方式（在 CLI 之外）实现了模块延迟加载：-https://github.com/datumgeek/a2dyn/blob/master/README.md#development-server

如果将来在 Angular CLI 中成为可能，我会更新答案

【讨论】：

您知道是否可以在没有 CLI 的情况下执行此操作？ IE。基于来自 angularclass 的 angular webpack starter？我试图通过'../node_modules/path_to_my_module'链接到我的模块，唯一不起作用的是AOT编译。
可以在此处找到解决方法（关于问题结束时的评论之一）：github.com/angular/angular-cli/issues/6373，但这不是延迟加载，也不是 AOT 编译支持。

【解决方案2】：

检查 HelloWorld 是一个导出类而不是“默认导出”。否则它将无法正常工作。

【讨论】：

抱歉耽搁了，我去度假了。是的，HelloWorld 类刚刚导出，我已编辑问题以完整显示该类
这可能是 angular-cli 没有暴露 webpack 配置的问题，因为这里提到他必须直接使用 webpack 而不是 CLI github.com/datumgeek/a2dyn/blob/master/…