嵌套模块的 Angular 404 页面路由

Question

我在我的项目中使用嵌套模块

.
└─ AppModule
    ├─ MallModule
    ├─ OtherModule
    └─ ...

在主路由中，我只配置了顶级路由：

app-routing.module.ts

const routes: Routes = [
  { path: '',   redirectTo: '/', pathMatch: 'full' },
  { path: 'login', component: LoginComponent},
  { path: 'register', component: RegisterComponent },

  { path: '404', component: NotfoundComponent },
  { path: '**', redirectTo: '404' }, // Added
]

另外，我在每个子模块中分别配置了路由，例如：

mall-routing.module.ts

const routes: Routes = [
  {
    path: '', 
    component: MallComponent,
    children: [
      {
        path: '',
        component: HomeComponent,
      },
      {
        path: 'about',
        component: AboutComponent,
      },
      ...
    }
]

结果是，因为在主路由配置中没有定义其他路由，所以除了 login/register/404 之外的所有请求都将被重定向到 404。

无论如何我可以使用正确的 404 重定向但保留当前的路由文件结构吗？ 我不希望将所有路由配置收集在一起。

谢谢！

Answer 1

在您的应用程序模块中导入“其他”模块，这将允许使用这些模块中定义的路由。

更新后的代码应如下所示：

imports: [
  MallModule,
  OtherModule
  RouterModule.forRoot([ // Add the configuration here, which is not a part of other module ])
]

Answer 2

在路由中加载您的模块，如下所示

  // MallModule
  {
    path: "path",
    canLoad: [AuthGuard],
    loadChildren: "./modules/MallModule.module#MallModule",

  },

Answer 3

在一个模块与路由一起工作正常但另一个模块为其所有子页面提供 404 之后，我到达了这个问题。

我的问题是app.modules.ts中的顺序。 在导入列表中导入AppRoutingModule后，我有子模块。 一旦我最后移动，比子模块和 404 页面的路由工作正常。

在 app.module.ts 中。

  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    SubModule,
    AuthorizationModule,
    CommonModule,
    FontAwesomeModule,
    ProfileModule, // this was previously defined after AppRoutinModule
    AppRoutingModule // this must be last in list for routing with 404 to work
  ]

并在 app-routing.modules.ts 中。

const routes: Routes = [
    // https://angular.io/guide/router
    { path: 'help', component: HelpComponent },
    { path: 'terms', component: TermsComponent },
    { path: 'contact', component: ContactComponent},
    { path: '404', component: PageNotFoundComponent},
    { path: '**', component: PageNotFoundComponent}
];