Angular 2 在带有角度路由器的 NPM 模块中延迟加载 NgModule [英] Angular 2 Lazy loading a NgModule in a NPM module with angular router

问题描述

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

export const HomeRoute: Route = {小路: ''，组件:HomeComponent，canActivate: [AuthGuard],孩子们: [{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';@成分({选择器:'你好世界'，样式:[`h1{颜色:蓝色；}`]，模板:`
<h1 (click)="onClick()">{{message}}</h1>
`})导出类 HelloWorld {message = "点我...";点击(){this.message = "Hello World!";控制台日志(this.message)；}}

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

解决方案

这目前是不可能的 - 请在此处查看 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 中使用，我会更新答案

I have been lazy loading modules in routes e.g.

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

I would like to put my "pages" into NPM modules. What is the route to the node_module that I should use in the loadChildren attribute? I am using angular-cli 1.0.0-beta.16

I have tried

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

also

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

The exported class is: -

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);

    }
}

Is there anything else I should try?

解决方案

This currently isn't possible - see a response from the AngularJS CLI team here: -

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

"This is a very relevant question. I don't think we support it in the CLI atm." (Currently version beta 17)

Datumgeek has implemented lazy loading from modules in a different way (outside of CLI) here: - https://github.com/datumgeek/a2dyn/blob/master/README.md#development-server

I will update the answer if it becomes possible in the Angular CLI in the future

这篇关于Angular 2 在带有角度路由器的 NPM 模块中延迟加载 NgModule的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！