Angular 6 个默认路由未加载。我怎样才能解决这个问题？

Question

我有一个 angular 6 项目结构如下...

src
|- app
|  |- core
|  |  |- layout.component.ts/html/scss
|  |  |- core.module.ts
|  |- views
|  |  |- modules
|  |  |  |- sample
|  |  |  |  |- sample.component.ts/html/scss
|  |  |  |  |- sample-routing.module.ts
|  |  |  |  |- sample.module.ts
|- app.component.ts/html/scss
|- app-routing.module.ts
|- app.module.ts

...示例模块的路由结构如下...

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        component: SampleComponent
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class SampleRoutingModule { }

...应用程序路由模块看起来像...

const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      {
        path: '',
        redirectTo: 'sample',
        pathMatch: 'full'
      },
      {
        path: 'sample',
        loadChildren: './views/sample/sample.module#SampleModule'
      }
    ]
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

我注意到的行为是，当我为应用程序提供服务时，应该是 layout component 的默认基本路由不会加载。相反，我在控制台中得到了一个没有错误的白屏。然后，如果我输入 http://localhost:4200/sample，我会得到正确的行为。初始重定向仍然没有发生，它应该加载其中包含示例模块的布局组件。 app.component.html 有 <router-outlet></router-outlet> 以及 layout.component.html 一直在看这个试图弄明白的时间比我承认的要长。也许布局组件的位置比我想象的更重要所以应该注册到app模块？

Answer 1

您的子路径与您的父路径相同

 path: '',
component: LayoutComponent,
children: [
  {
    path: '/sample',//changed this 
    redirectTo: 'sample',
    pathMatch: 'full'
  }

Answer 2

我有一个 RouterModule 导入和 routes 在同一个项目中的一个旧的不相关模块中定义，具有默认路由。像...

const routes = {
  {
     path: '',
     component: RandomComponent
  }
}
...
imports: [RouterModule.forChild(routes)]
...

删除修复了我试图实现的路由。 Angular 一定是一直在尝试注册一些急切的位置。老实说，感觉有点傻。感谢回答的人！

Answer 3

这似乎是 redirectTo 在延迟加载路由中被忽略的问题。

无论哪种方式，使用您拥有的配置，您都可以在子路由本身内进行重定向。

sample.routing

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        redirectTo: 'sample',
        pathMatch: 'full'
      },
      {
        path: 'sample',
        component: SampleComponent,
      },

    ]
  }
];

和app.routing

const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      {
        path: '',
        loadChildren: './views/sample/sample.module#SampleModule'
      }
    ]
  }
];

Angular 6 个默认路由未加载。我怎样才能解决这个问题？

Angular 6 default route not loading. How can I fix this?

angular

angular6

angular-router

angular-module