Angular 4 个路由问题

Question

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

应用-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!

即使我将 url 更改为 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 后，问题已解决。

有关详细信息，请参阅此答案：

Answer 1

试试把路线改成这样

  const appRoutes: Routes = [
    {
      path:'',
      redirectTo: 'first',
      pathMatch: 'full' 
    },
    {
      path: 'first',
      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: '/'
  }];

Angular 4 个路由问题

Angular 4 Routing Issues

angular2-routing

angular