Angular2 RC5路由器无法找到模块(延迟加载)
我有一个非常简单的Angular2 RC5测试项目,它试图使用路由到延迟加载模块。我看不出这个项目有什么问题。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.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 }
])
],
因为所有的模块可以有几个组成部分(不仅是一个),所以有必要展示给你的主要成分角的路径。
谢谢,但如果我删除**默认**(并且只有“默认”,保留'导出类HomeModule'),或者如果我删除#name标记,它会暂停一段时间然后吹到堆栈。如果我删除** export default **(只留下'class HomeModule'并保留#name标记,我会得到相同的'Can not find module'错误。 – McGuireV10
不,不能删除导出字。尝试删除# HomeModule并保持“默认”状态。所以 - {path:'home',loadChildren:'./app/home/home.module'}并导出默认类HomeModule。你现在是否有错误信息? –
你能否更新你的代码在第一篇文章现在:)? –
我想我还应该提及我使用的是路由器3.0.0-rc.1,这是Angular2 RC5的最新版本,据我所知。 – McGuireV10