Angular 15子模块组件多路由可访问，如何阻止路由重复注册？

问题根源 #

你在AppModule的imports数组中直接导入了PagesSettingsModule，这会导致该模块的路由（通过PagesSettingsRoutingModule里的RouterModule.forChild注册的路由）直接合并到根路由配置里。同时你又在AppRoutingModule中用loadChildren懒加载该模块，相当于把同一份路由注册了两次：一次是不带/pages前缀的原始路由，一次是带/pages前缀的懒加载路由，因此两个URL都能访问到目标组件。

解决方案 #

步骤1：修改AppModule配置 #

从AppModule的imports数组中移除PagesSettingsModule，因为懒加载机制会在用户访问/pages开头的路由时自动加载该模块，无需提前导入。

修改后的AppModule代码：

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    AppRoutingModule,
    // 移除 PagesSettingsModule，保留其他必要模块
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { 
}

步骤2：保持其他模块配置不变 #

AppRoutingModule、PagesSettingsRoutingModule和PagesSettingsModule的当前配置无需修改，懒加载逻辑会自动为子模块路由添加/pages前缀，确保只有/pages/settings/projects能访问到ProjectSettingsComponent，而/settings/projects会返回404。

验证 #

修改完成后启动应用：

• 访问/pages/settings/projects：正常加载组件（符合预期）
• 访问/settings/projects：页面显示404（说明原始路由已被移除，双重注册问题解决）

内容的提问来源于stack exchange，提问作者Dazza