Question

我有一个非常简单的Angular2 RC5测试项目，它试图使用路由到延迟加载模块。我看不出这个项目有什么问题。

文件夹

app
  |-about (contains about.module.ts and about.component.ts)
  |-home (contains home.module.ts, home.component.ts)

app.routing.ts

export const routes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'home', loadChildren: './app/home/home.module' },
    { path: 'about', loadChildren: './app/about/about.module' }
];

export const routing = RouterModule.forRoot(routes);

home.module.ts

import { NgModule }         from '@angular/core';
import { HomeComponent }    from './home.component';

@NgModule({
    declarations: [HomeComponent],
    exports: [HomeComponent]
})

export default class HomeModule { }

home.component.ts

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

@Component({
    template: `<h2>Home...</h2>`
})

export class HomeComponent { }

我知道重定向到“home”正在运行，在启动时我可以看到home.module.js和home.component.js文件被下载，但是它会抛出一个控制台错误消息Cannot find 'HomeModule' in './app/home/home.module'（和在网络流量选项卡中，我可以确认两个js文件都是正确的，拼写是正确的等等。）

Answer 1

只需替换：

{ path: 'home', loadChildren: './app/home/home.module#HomeModule' },

进入这一行：

{ path: 'home', loadChildren: './app/home/home.module' },

如果您已在模块文件中添加导出默认，则无需在路径中指定名称。

当然，如果您忘记＆＃34;默认＆＃34;，选择正确模块的唯一方法是添加#name属性 - 这是第二种方式。你可以使用其中一个，不是两个。

同样在 HomeModule 中，添加：

imports: [ 
    RouterModule.forChil‌d([ 
       { path: '', component: HomeComponent } 
    ]) 
],

因为所有模块都可以包含很少的组件（不仅仅是一个），所以有必要显示角度到主组件的路径。

Angular2 RC5路由器找不到模块（延迟加载）

1 个答案: