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}
];

嵌套模块的Angular 404页面路由

3 个答案: