如何从主Angular应用引导远程Angular类库并初始化routing、NgRx Store？

当然可以直接引导，核心是让类库暴露可被主项目集成的根模块，主项目通过导入该模块完成类库核心模块的初始化。下面是具体实现步骤：

1. 类库侧做好导出配置 #

首先要在类库中定义一个根模块，把路由、NgRx Store等需要全局初始化的模块都配置好，然后通过public-api.ts导出，让主项目能访问到。

示例代码（类库内部）：

// lib/library-root.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { StoreModule } from '@ngrx/store';
import { reducers, metaReducers } from './store';
import { LibraryFeatureComponent } from './features/library-feature.component';

// 类库自身的路由配置
const libraryRoutes: Routes = [
  { path: 'library', component: LibraryFeatureComponent }
];

@NgModule({
  imports: [
    // 初始化类库的根路由
    RouterModule.forRoot(libraryRoutes),
    // 初始化类库的NgRx根Store
    StoreModule.forRoot(reducers, { metaReducers })
  ],
  // 导出路由模块，让主项目能继承路由配置
  exports: [RouterModule]
})
export class LibraryRootModule {}

然后在类库的public-api.ts中导出这个根模块：

// public-api.ts
export * from './lib/library-root.module';

2. 主项目侧集成类库模块 #

在主项目的AppModule中直接导入类库的根模块即可完成初始化。如果需要自定义配置（比如路由前缀、Store扩展），可以给类库模块添加forRoot静态方法。

基础集成方式 #

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// 从npm安装的类库中导入根模块
import { LibraryRootModule } from 'your-library-package-name';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    // 导入类库根模块，自动初始化其路由、NgRx Store
    LibraryRootModule,
    // 主项目自身的路由模块放在后面，保证主项目路由优先级更高
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

带自定义配置的集成（可选） #

如果需要主项目给类库传配置（比如自定义路由前缀），可以在类库模块中添加forRoot方法：

// 类库的library-root.module.ts
import { ModuleWithProviders } from '@angular/core';
import { InjectionToken } from '@angular/core';

export interface LibraryConfig {
  routePrefix?: string;
}

export const LIBRARY_CONFIG = new InjectionToken<LibraryConfig>('LibraryConfig');

export class LibraryRootModule {
  static forRoot(config: LibraryConfig = {}): ModuleWithProviders<LibraryRootModule> {
    return {
      ngModule: LibraryRootModule,
      providers: [
        { provide: LIBRARY_CONFIG, useValue: config }
      ]
    };
  }
}

主项目使用时：

// app.module.ts
LibraryRootModule.forRoot({ routePrefix: 'custom-library' })

3. 关键注意事项 #

• 路由冲突：主项目和类库的路由路径要避免重复，或者通过路由前缀区分，防止路由匹配异常。
• NgRx Store兼容：如果类库用StoreModule.forRoot，主项目也用的话，会导致Store被覆盖。这种情况下建议类库只提供feature级别的reducers（用StoreModule.forFeature），主项目在自己的根Store中导入这些feature。
• 依赖版本对齐：确保类库和主项目的Angular、NgRx等核心依赖版本一致，避免因版本不兼容导致初始化失败。

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