![](/img/trans.png)
[英]Angular2 RC5 Cannot find 'default' in 'module.js' (lazy load)
[英]Angular2 RC5 router can't find module (lazy load)
我有一个非常简单的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文件都是正确的,拼写是正确的,等等。)
只需替换:
{ path: 'home', loadChildren: './app/home/home.module#HomeModule' },
进入这一行:
{ path: 'home', loadChildren: './app/home/home.module' },
如果已经在模块文件中添加了导出默认值 ,则不必在路径中指定名称。
当然,如果您忘记了“默认”,则选择适当模块的唯一方法是添加#name属性-这是第二种方法 。 您可以使用其中之一, 不能同时使用 。
并在您的HomeModule中 ,添加:
imports: [
RouterModule.forChild([
{ path: '', component: HomeComponent }
])
],
由于所有模块可能只有很少的组件(不仅是一个),因此有必要向您的主要组件显示一条路径。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.