创建带路由的Angular库后路由不生效，访问sign-up无响应如何解决？

问题根因 #

• 你在Angular库的路由模块中错误使用了RouterModule.forRoot()：forRoot()方法仅允许在主应用的根路由模块调用，作用是注册全局路由服务、生成根路由配置；第三方库、子模块的路由必须使用RouterModule.forChild()注册子路由配置，否则路由不会被主应用的路由系统识别。
• 其次需要确认主应用的路由配置逻辑是否匹配库的路由规则。

解决方案 #

第一步：修改库的路由配置 #

把AuthLibRoutingModule中的RouterModule.forRoot(routes)替换为RouterModule.forChild(routes)，修改后的代码如下：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthLibComponent } from './auth-lib.component';
import { SignUpComponent } from './sign-up/sign-up.component';

const routes: Routes = [
  { path: '', component: AuthLibComponent },
  { path: 'sign-up', component: SignUpComponent }
];

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

第二步：调整主应用路由配置（二选一即可） #

方案1：给库路由加统一前缀（推荐）

如果希望库的所有路由都带统一前缀（比如/auth/xxx），在主应用的AppRoutingModule中添加父路由规则：

const appRoutes: Routes = [
  // 其他主应用路由
  {
    path: 'auth',
    loadChildren: () => import('auth-lib').then(m => m.AuthLibModule)
  },
  // 通配符路由必须放在最后
  { path: '**', component: NotFoundComponent }
];

配置后访问/auth/sign-up即可打开注册页。

方案2：直接暴露库的路由到根路径

如果不需要前缀，直接在主应用的路由数组最前面导入库的路由：

import { AuthLibRoutingModule } from 'auth-lib';

@NgModule({
  imports: [
    BrowserModule,
    AuthLibRoutingModule, // 放在AppRoutingModule之前导入，避免被主应用的路由覆盖
    AppRoutingModule,
    AuthLibModule,
    HttpClientModule
  ],
  // 其他配置
})
export class AppModule { }

第三步：验证配置 #

1. 确认主应用的app.component.html中存在<router-outlet>标签，路由组件才会被渲染到对应位置
2. 确认主应用的路由中如果有**通配符路由，必须放在所有路由规则的最后
3. 重新构建Angular库，主应用重新引入构建后的库，重启开发服务即可生效。

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