Angular10中使用模块化路由时如何正确处理404

Question

我无法使用模块化路由正确处理 Angular 10 应用程序中的 404 个页面。

我的代码结构如下：

|> app
|-- app.module.ts
|-- app-routing.module.ts
|-- app.component{ts, spec.ts, scss, html}
|-> pages
|--- pages.module.ts
|--> home-page
|---- home-page.module.ts
|---- home-page-routing.module.ts
|---> home-page
|----- home-page.component{ts, spec.ts, scss, html}
|--> test-page
|---- test-page.module.ts
|---- test-page-routing.module.ts
|---> test-page
|----- test-page.component{ts, spec.ts, scss, html}

（截断的）全局应用程序路由模块配置了 404 处理程序：

...
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },

  // If the following line is not commented out,
  // You are unable to navigate to either the 'Home' or 'Test' pages.
  // { path: '**', component: PageNotFoundComponent },
];

...

我遇到的问题是 Angular 匹配 ./app/app-routing.module.ts 中的全局 404 处理程序并解析到该路由。

Here's a short stackblitz that provides an example of my experience （注意：Stackblitz 示例实际上是运行 Ng12，而我们的应用程序是运行 Ng10 - 两者表现出相同的行为）

我的目标是让全局 404 处理程序或重定向正常工作，同时继续将我们所有的页面路由定义在各自的模块路由文件中。

这可以做到吗？如果可以，怎么做？

Answer 1

我查看了您的 Stackblitz，问题是 AppRoutingModule 在 PagesModule 之前导入。

你应该先导入 PagesModule 因为它们的路由有更高的优先级。

  imports: [
    BrowserModule,
    RouterModule,
    FormsModule,
    PagesModule,
    AppRoutingModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

另一个（更好的）解决方案是延迟加载模块：

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  {
    path: '',
    loadChildren: () =>
      import('./pages/pages.module').then((m) => m.PagesModule),
  },
  { path: '**', component: PageNotFoundComponent },
];

这样您就不必将整个 PagesModule 导入您的 AppModule。

Angular10中使用模块化路由时如何正确处理404

How to correctly handle 404 when using modular routing in Angular 10

javascript

typescript

angular

angular-router