Angular自定义库发布后forRoot方法未触发 配置传值为空

问题相关代码 #

库模块forRoot实现：

export class DynamicFormBuilderModule {
  public static forRoot(config: Configurations): ModuleWithProviders<DynamicFormBuilderModule> {
    console.log('inside forRoot method',config)
    return {
      ngModule: DynamicFormBuilderModule,
      providers: [
        ConfigService,
        {
          provide: Configurations,
          useValue: config,
        },
      ],
    };
  }
}

宿主应用模块引入代码：

DynamicFormBuilderModule.forRoot({
  production: environment.production,
  baseUrl: environment.baseUrl,
  maxMaskCharacterLength: environment.maxMaskCharacterLength,
  rejectedExtentions: environment.rejectedExtentions,
  attachmentImage: environment.attachmentImage,
  attachmentFile: environment.attachmentFile,
  attachmentBoth: environment.attachmentBoth,
  socketAutomaticReconnectIntervals: environment.socketAutomaticReconnectIntervals,
  undoCount: environment.undoCount,
}),

ConfigService构造函数实现：

constructor(@Optional() config?: Configurations) {
    if (config) {
      this._production = config.production;
      this._baseUrl = config.baseUrl;
      this._maxMaskCharacterLength = config.maxMaskCharacterLength;
      this._rejectedExtentions = config.rejectedExtentions;
      this._attachmentImage = config.attachmentImage;
      this._attachmentFile = config.attachmentFile;
      this._attachmentBoth = config.attachmentBoth;
      this._socketAutomaticReconnectIntervals = config.socketAutomaticReconnectIntervals;
      this._undoCount = config.undoCount;
    }
  }

发布的制品文件结构：

问题根因 #

forRoot方法完全未执行、配置全为空的核心原因是发布的库产物存在模块实例冗余，Angular编译器静态分析时未识别到forRoot调用，最终加载了未注册配置的默认模块实例，高频触发场景如下：

• 库构建配置错误，package.json入口字段指向不一致，导致宿主应用构建时同时加载了两份DynamicFormBuilderModule副本，forRoot方法绑定在其中一份副本上，实际运行时加载的是另一份无配置的空模块
• forRoot方法的返回类型未做Ivy编译兼容，Angular 9+的Ivy编译器在宿主应用构建阶段做静态分析时，无法识别ModuleWithProviders对应的模块类型，直接跳过forRoot执行逻辑，回退为普通模块导入
• 库内部子模块、宿主应用的特性模块中重复导入了未调用forRoot的DynamicFormBuilderModule，导致子注入器中生成了新的模块实例，覆盖了根模块通过forRoot注册的配置provider
• ConfigService加了@Optional()装饰器，当配置注入失败时不会抛错，直接使用空值，掩盖了forRoot未执行的本质问题
• 部分构建工具tree-shaking逻辑误判，将未被静态识别的forRoot方法当成死代码删除

排查步骤 #

按顺序操作可快速定位问题：

• 进入宿主项目node_modules下对应库的目录，打开fesm2020目录下的打包产物js文件，搜索forRoot关键字，确认发布的构建产物中确实存在forRoot方法实现，而非仅存在空的模块类
• 全局搜索宿主应用和库源码中所有导入DynamicFormBuilderModule的位置，确认除根模块AppModule中调用forRoot导入外，其余位置没有直接导入DynamicFormBuilderModule类
• 检查库package.json的main、module、es2020、typings、exports字段配置，确认所有入口都指向dist目录下的构建产物，没有指向源码ts文件
• 临时去掉ConfigService构造函数上的@Optional()装饰器，重新运行宿主应用，如果启动时抛出No provider for Configurations!错误，即可确认forRoot注册的provider根本没有进入根注入器

修复方案 #

1. 修正库模块forRoot实现，增加Ivy编译兼容标记，补充forChild方法避免子模块误导入覆盖根配置：

import { NgModule, ModuleWithProviders } from '@angular/core';

@NgModule({
  // 原有declarations、exports配置保持不变
})
export class DynamicFormBuilderModule {
  static forRoot(config: Configurations): ModuleWithProviders<DynamicFormBuilderModule> {
    return {
      ngModule: DynamicFormBuilderModule,
      providers: [
        ConfigService,
        {
          provide: Configurations,
          useValue: config
        }
      ]
    };
  }

  static forChild(): ModuleWithProviders<DynamicFormBuilderModule> {
    return {
      ngModule: DynamicFormBuilderModule,
      providers: []
    };
  }
}

2. 修正ConfigService注入逻辑，去掉@Optional()装饰器，配置缺失时直接抛错方便排查：

import { Injectable, Inject } from '@angular/core';

@Injectable()
export class ConfigService {
  private _production: boolean;
  private _baseUrl: string;
  // 其余配置属性保持原有声明
  constructor(@Inject(Configurations) config: Configurations) {
    this._production = config.production;
    this._baseUrl = config.baseUrl;
    // 其余配置赋值逻辑保持不变
  }
}

3. 修正库构建配置，确保ng-package.json入口配置正确：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/[你的库名]",
  "lib": {
    "entryFile": "src/public-api.ts"
  }
}

同时修正库package.json的入口字段，确保所有入口指向统一构建产物：

{
  "name": "[你的库名]",
  "version": "[对应版本号]",
  "main": "fesm2020/[你的库名].mjs",
  "module": "fesm2020/[你的库名].mjs",
  "es2020": "fesm2020/[你的库名].mjs",
  "typings": "index.d.ts",
  "exports": {
    ".": {
      "types": "./index.d.ts",
      "es2020": "./fesm2020/[你的库名].mjs",
      "esm2020": "./esm2020/[你的库名].mjs",
      "default": "./fesm2020/[你的库名].mjs"
    }
  }
}

4. 清理所有非根模块中对DynamicFormBuilderModule的直接导入，如果子模块需要使用库中的组件、指令，将组件、指令拆分到独立的无provider共享模块中导出，避免和带forRoot的根模块耦合；如果必须导入模块，调用DynamicFormBuilderModule.forChild()而非直接导入类。
5. 重新构建库，确认dist目录下fesm产物存在forRoot代码后再发布到制品库；宿主项目安装新版本时，先删除node_modules和锁文件（package-lock.json/pnpm-lock.yaml/yarn.lock），重新安装依赖避免旧版本缓存。

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