Angular 11 所有页面都转到 404

Question

我正在为我的新项目使用 Angular，它有 3 个模块，所以我决定分成 3 个模块。这是我的应用路由模块

const routes: Routes = [
  {
    path: '', component: LayoutDefaultComponent, pathMatch: 'full', children: [
      { path: '', component: OverviewComponent },
    ]
  },
  // 404 Not Found page
  { path: '**', component: NotFoundComponent }
];

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

这工作正常。之后我创建了另一个模块及其单独的路由，如下所示

const routes: Routes = [
  { 
    path: 'user',
    component: LayoutDefaultComponent,
    pathMatch: 'full',
    children: [
      { path: '', component: UserOverviewComponen},
    ],
  },
];

这是用户路由模块并在用户模块中导入，如下所示

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

这是我的用户模块

  imports: [
    CommonModule,
    UserRoutingModule,
    SharedModule
  ],

这是我的 app.module.ts 文件

@NgModule({
  declarations: [
    AppComponent,
    NotFoundComponent,
    // Pages
    OverviewComponent,
    HelpCenterComponent,
    ChangelogComponent,
  ],

  imports: [
    BrowserModule,
    HttpClientModule,
    NgbModule,
    FlexLayoutModule,
    Ng2ChartsModule,
    PerfectScrollbarModule,
    NgxDatatableModule,
    TagInputModule,
    TranslateModule.forRoot({
      loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient]
      }
    }),
    // App
    AppRoutingModule,
    LayoutModule,
    // Auth Module
    AuthModule,
    // Apps
    UserModule
  ],
  providers: [
    Title,
    AppService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptorService,
      multi: true
    }
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule {}

但是如果我点击用户 link 会自动重定向到 404 页面。我找不到问题所在。谁能帮忙解决问题。

提前致谢

Answer 1

因为路由模块导入顺序错误。把AppRoutingModule放到最下面

    LayoutModule,
    // Auth Module
    AuthModule,
    // Apps
    UserModule,
    AppRoutingModule

如果您将 AppRoutingModule 置于包含此行的任何其他模块之上：

{ path: '**', component: NotFoundComponent }

Angular 当这条路由匹配时，路由器不会查看任何其他路由，正如您所猜测的那样，这将始终匹配 url.

您可以在此处找到文档中的相关部分：https://angular.io/guide/router#route-order

Angular 11 所有页面都转到 404

Angular 11 all pages going to 404

angular-ui-router

angular