无法在应用程序模块中创建的子模块中实现路由

Question

除了在应用程序模块中创建的路由模块之外，我正在尝试在子模块中实现路由。

我在应用程序模块中创建了三个子模块，即登录、主页和管理模块，并且我在应用程序文件夹中创建了一个主路由模块，用于在登录、主页和管理子模块之间导航

我还在主页模块中创建了三个组件，即 HomeComponent、CreateAlertsComponent 和 UpdateAlertsComponent 以及名称为 routeHome.module.ts 的路由模块，用于在主页组件之间导航。

我可以使用 routing-module.ts 在子模块之间进行路由，但我无法在主模块中创建的组件之间进行路由。

我收到如下所示的错误

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'Home/home/Alerts/create-alerts'
Error: Cannot match any routes. URL Segment: 'Home/home/Alerts/create-alerts'
    at ApplyRedirects.noMatchError (router.js:1765)
    at CatchSubscriber.eval [as selector] (router.js:1730)
    at CatchSubscriber.error (catchError.js:105)
    at MapSubscriber.Subscriber._error (Subscriber.js:134)
    at MapSubscriber.Subscriber.error (Subscriber.js:108)
    at MapSubscriber.Subscriber._error (Subscriber.js:134)
    at MapSubscriber.Subscriber.error (Subscriber.js:108)
    at MapSubscriber.Subscriber._error (Subscriber.js:134)
    at MapSubscriber.Subscriber.error (Subscriber.js:108)
    at LastSubscriber.Subscriber._error (Subscriber.js:134)
    at ApplyRedirects.noMatchError (router.js:1765)
    at CatchSubscriber.eval [as selector] (router.js:1730)
    at CatchSubscriber.error (catchError.js:105)
    at MapSubscriber.Subscriber._error (Subscriber.js:134)
    at MapSubscriber.Subscriber.error (Subscriber.js:108)
    at MapSubscriber.Subscriber._error (Subscriber.js:134)
    at MapSubscriber.Subscriber.error (Subscriber.js:108)
    at MapSubscriber.Subscriber._error (Subscriber.js:134)
    at MapSubscriber.Subscriber.error (Subscriber.js:108)
    at LastSubscriber.Subscriber._error (Subscriber.js:134)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at eval (zone.js:873)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4751)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1540)

下图是我创建的子模块 admin、home、login 的目录结构。

下面显示的是我的目录结构，其中包含 home 子模块

中的组件和 routeHome.module.ts

请在 stackblitz

上访问我的代码

任何人都可以帮助解决这个路由冲突...？

Answer 1

您可以使用子路由在您的应用程序中导航：

{
  path:'Home/home',
  component: HomeComponent,
  children: [
    {
      path: 'Alerts/create-alerts',
      component: CreateAlertsComponent,
    },
  ],
},

您还可以查看 https://angular.io/guide/router#child-routing-component 以查看更多示例。

编辑：还将 <router-outlet></router-outlet> 添加到您的 home.component.html 文件以呈现您的子组件。

Answer 2

因为您已将您的应用拆分为多个模块。我建议你使用 Angular lazy loading feature Modules。您的情况 HomeModule 中的功能模块必须连接到 RoutingModule 以便路由器知道它。

更新了您的代码 HERE.

在 RoutingModule 中，使用以下内容更新路由数组：

const routes: Routes = [
  { path:'Login/login', component: LoginComponent },
  { path:'Home', loadChildren: "./home/home.module#HomeModule" },
  { path:'Admin/admin', component: AdminComponent },
];

请注意，延迟加载语法使用 loadChildren 后跟作为模块路径的字符串、井号或 #，以及模块的 class 名称。

通过更新 RouteHomeModule 来配置 HomeModule 路由：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { CreateAlertsComponent } from './Alerts/create-alerts/create-alerts.component';
import { UpdateAlertsComponent } from './Alerts/update-alerts/update-alerts.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'Alerts/create-alerts', component: CreateAlertsComponent },
  { path: 'Alerts/update-alerts', component: UpdateAlertsComponent },
];

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

export class RouteHomeModule { }

请注意延迟加载的模块应该使用 RouterModule.forChild() 而不是 RouterModule.forRoot()。

最后从 AppModule 声明中删除 HomeComponent、CreateAlertsComponent 和 UpdateAlertsComponent，因为这些组件是 HomeModule 的一部分并更新 routerLink app.component.html。在 AppModule:

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    AdminComponent,
  ],
  ...

app.component.html:

<button mat-raised-button
  routerLink='Home' 
  routerLinkActive="active">
  Home
</button>

无法在应用程序模块中创建的子模块中实现路由

Unable to Implement routing in submodules created within the app module

angular

angular-routing

angular-module