【发布时间】：2017-09-06 18:11:21
【问题描述】：
Angular 似乎没有将我配置的组件加载到空的 '' 路径。
这是我的项目设置：
project/
|- app/
| |- landing-page/
| |- second-page/
| |- third-page/
| |- app-routing.module.ts
| |- app.component.html
| |- app.component.ts
| `- app.module.ts
|- index.html
`- main.ts
app-routing.component.ts:
const appRoutes: Routes = [{
path: '',
loadChildren: 'app/landing-page/landing-page.module#LandingPageModule'
},{
path: 'second',
loadChildren: 'app/second-page/second-page.module#SecondPageModule'
},{
path: 'third',
loadChildren: 'app/third-page/third-page.module#ThirdPageModule'
},{
path: '**',
redirectTo: '/'
}]
@NgModule({
imports: [
RouterModule.forRoot(
appRoutes,
{ enableTracing: true }
)
],
exports: [
RouterModule
]
})
export class AppRoutingModule { }
app.component.html：
<router-outlet></router-outlet>
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AnguTest</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
landing-page.component.ts（所有 3 个组件都是这样声明的）：
const landingRoutes: Routes = [
{ path: '', component: LandingPageComponent }
]
export const landingRouting = RouterModule.forChild(landingRoutes)
@NgModule({
imports: [
CommonModule,
landingRouting
],
declarations: [LandingPageComponent]
})
export class LandingPageModule { }
问题是每当我在浏览器中导航到应用程序时，输出总是：
second-page works!
即使我将网址更改为http://localhost:4200/ 或http://localhost:4200/third，我也只能看到第二页的输出。
我已经尝试重新排列路由声明顺序，但它仍然是第二页。
如果有帮助，我已将 Chrome 控制台的输出包含在内。看起来该应用正在正确识别路线。
Router Event: NavigationStart
NavigationStart(id: 1, url: '/')
NavigationStart
Angular is running in the development mode. Call enableProdMode() to enable the production mode.
Router Event: RoutesRecognized
RoutesRecognized(id: 1, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } )
RoutesRecognized
Router Event: GuardsCheckStart
GuardsCheckStart(id: 1, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } )
GuardsCheckStart
Router Event: GuardsCheckEnd
GuardsCheckEnd(id: 1, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } , shouldActivate: true)
GuardsCheckEnd
Router Event: ResolveStart
ResolveStart(id: 1, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } )
ResolveStart
Router Event: ResolveEnd
ResolveEnd(id: 1, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } )
ResolveEnd
Router Event: NavigationEnd
NavigationEnd(id: 1, url: '/', urlAfterRedirects: '/')
NavigationEnd
========== 已解决==========
问题是我实际上并没有在我的所有模块中声明路由配置：
// this bit....
const landingRoutes: Routes = [
{ path: '', component: LandingPageComponent }
]
export const landingRouting = RouterModule.forChild(landingRoutes)
空路径 '' 不起作用，因为我正在导入我在 app.module.ts 中路由到的模块，有效地进行了双重导入并导致奇怪的行为。
从导入列表中删除 FirstPageModule 和 SecondPageModule 后，问题得到解决。
有关详细信息，请参阅此答案： Default route redirect not working for lazy loaded routes in Angular 2
【问题讨论】：
-
不确定是否可以延迟加载引导的第一个模块
-
我实际上不太确定这个配置会导致延迟加载。我应该尝试更改
loadChildren->component吗？