如何创建包含可复用页面集合与路由的Angular npm包？

完全可行，Angular的模块化设计、npm包分发体系，加上路由懒加载等特性，完美支持这种包含完整页面集合的可复用包开发。你举的@myuilibrary/account例子是典型的可复用Feature模块场景，能直接集成到宿主应用的路由体系中。

1. 包的项目结构设计 #

用Angular CLI创建独立的库项目（不是普通应用项目），推荐结构如下：

@myuilibrary/account/
├── src/
│   ├── lib/
│   │   ├── account.module.ts       # 核心模块入口
│   │   ├── account-routing.module.ts # 模块内路由配置
│   │   ├── pages/                   # 存放11个页面组件
│   │   │   ├── profile/
│   │   │   ├── settings/
│   │   │   ├── ...（其他9个页面）
│   │   └── shared/                  # 模块内共享组件/服务（按需添加）
│   └── public-api.ts                # 对外暴露的API入口
├── package.json
└── tsconfig.lib.json

2. 模块与路由配置 #

• 在account-routing.module.ts中定义模块内的子路由，对应11个页面：

const routes: Routes = [
  {
    path: '', // 宿主应用挂载时会用/account作为父路径，这里空路径对应/account根路径
    children: [
      { path: 'profile', component: ProfilePageComponent },
      { path: 'settings', component: SettingsPageComponent },
      { path: '', redirectTo: 'profile', pathMatch: 'full' },
      // 补充其他9个页面的路由配置...
    ]
  }
];

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

• 在account.module.ts中整合组件、路由和依赖：

@NgModule({
  declarations: [
    ProfilePageComponent,
    SettingsPageComponent,
    // 声明其他9个页面组件...
  ],
  imports: [
    CommonModule,
    AccountRoutingModule,
    // 按需导入FormsModule/ReactiveFormsModule等依赖模块
  ]
})
export class AccountModule {}

• 在public-api.ts中导出模块，让宿主应用能直接导入：

export * from './lib/account.module';
export * from './lib/account-routing.module';
// 如果有对外暴露的服务、类型，也在这里导出

3. 包的构建与发布 #

• 用Angular CLI构建库：ng build account（单库项目直接执行ng build）
• 构建产物在dist/目录下，进入该目录执行npm publish即可发布到npm仓库（私有/公有均可）

4. 宿主应用集成 #

• 安装包：npm install @myuilibrary/account
• 在宿主应用的路由模块（如app-routing.module.ts）中配置懒加载路由：

const routes: Routes = [
  // 宿主应用原有路由...
  {
    path: 'account',
    loadChildren: () => import('@myuilibrary/account').then(m => m.AccountModule)
  }
];

这样用户访问/account会跳转到模块默认的profile页面，/account/settings对应设置页面，完全匹配你的需求。

5. 关键注意事项 #

• 样式隔离：包内页面样式建议用Angular的ViewEncapsulation或CSS Modules，避免污染宿主应用样式；也可提供全局样式入口，让宿主按需导入。
• 依赖管理：包的package.json中，@angular/core、@angular/router等核心依赖要设为peerDependencies，避免和宿主应用的依赖版本冲突。
• 配置灵活性：如果需要宿主自定义页面行为，可通过@Input()、注入令牌（Injection Token）传递配置，比如允许替换特定页面组件、修改路由守卫逻辑。

内容的提问来源于stack exchange，提问作者g.pickardou