Angular模块级服务工厂提供者未触发问题排查

API 探路者

2026-6-27

问题

我正尝试为一个库模块创建提供者，希望在模块被添加时触发工厂提供者。但目前该提供者从未执行console.log，说明并未运行。

示例服务代码：

@Injectable()
export class ExampleService {
  addOptions(...options: any[]) {
    // Set options
  }
}

我希望在模块创建时创建该服务并添加一些默认选项，因此编写了如下工厂提供者，不想在组件级或每个ExampleService实例中重复操作，仅针对该模块执行一次：

@NgModule({
  declarations: [ExampleComponent],
  exports: [ExampleComponent],
  providers: [
    {
      provide: ExampleService,
      multi: false,
      useFactory: () => {
        console.log('Creating Example Service...');
        const service = new ExampleService();
        service.addOptions('one', 'two', 'three');
        return service;
      }
    }
  ],
})
export class LibraryModule {}

我还有一个组件需要注入该服务，但不想与模块中的实例共享，因此做了如下配置：

@Component({
  providers: [ExampleService]
})
export class ExampleComponent {
  constructor(private example: ExampleService) {}
}

公司其他团队使用该库时会这样导入，期望通过LibraryModule自动设置选项：

@NgModule({
  imports: [LibraryModule]
})
export class App {}

目前组件中的服务实例可正常创建，但模块中的工厂未运行（无console.log输出）。我需要如何修复？或者这种实现方式是否不正确？

注意： 我正在使用Storybook进行测试，不确定是否有影响，测试代码如下：

@Component({
  standalone: true,
  imports: [LibraryModule]
})
export class StorybookExample {
  constructor(private example: ExampleService) {}
}

export default {
  title: 'Test',
  component: StorybookExample,
} as Meta<StorybookExample>;

解决方案

问题根源

组件级提供者覆盖模块级提供者：你在ExampleComponent的@Component装饰器里声明了providers: [ExampleService]，这会让组件创建自己的ExampleService实例，完全忽略模块级的工厂提供者，所以模块里的工厂代码根本不会执行。
服务懒实例化特性：Angular的服务默认是懒加载的，只有当某个依赖注入点真正请求该服务时，才会触发提供者的实例化逻辑。如果模块级的ExampleService没有被任何组件/服务注入，工厂也不会运行。

修复方案

根据你的需求，分两种场景处理：

场景1：希望模块提供全局单例服务（所有组件共享带默认配置的实例）

直接移除ExampleComponent中的providers配置：

@Component({
  // 去掉 providers 数组
})
export class ExampleComponent {
  constructor(private example: ExampleService) {}
}

这样组件会自动注入模块级的ExampleService实例，模块的工厂提供者会在第一次注入时执行，完成默认配置的添加，且整个应用中只会有这一个实例。

场景2：组件必须拥有独立实例，但模块需要初始化全局默认配置

如果组件必须保留独立实例，但希望模块加载时执行一次默认配置逻辑，可以使用APP_INITIALIZER来实现模块初始化时的逻辑执行：

首先调整LibraryModule的提供者配置：

import { APP_INITIALIZER } from '@angular/core';

@NgModule({
  declarations: [ExampleComponent],
  exports: [ExampleComponent],
  providers: [
    ExampleService, // 先注册服务
    {
      provide: APP_INITIALIZER,
      useFactory: (exampleService: ExampleService) => () => {
        console.log('Running module initialization...');
        exampleService.addOptions('one', 'two', 'three');
      },
      deps: [ExampleService], // 依赖注入模块级的 ExampleService
      multi: true // 允许多个初始化器
    }
  ],
})
export class LibraryModule {}

此时模块加载时，APP_INITIALIZER会自动触发，调用模块级ExampleService的addOptions方法完成配置。而组件中的独立实例不会继承这些配置，如果需要让组件实例也应用默认配置，可以修改ExampleService的构造函数，读取全局配置：

// 单独创建一个配置服务存储默认选项
@Injectable({ providedIn: 'root' })
export class ExampleDefaultConfig {
  options = ['one', 'two', 'three'];
}

@Injectable()
export class ExampleService {
  constructor(private defaultConfig: ExampleDefaultConfig) {
    // 组件实例创建时自动加载默认配置
    this.addOptions(...this.defaultConfig.options);
  }

  addOptions(...options: any[]) {
    // Set options
  }
}

Storybook测试适配

在Storybook的测试组件中，如果你想验证模块级的工厂执行，需要确保测试组件不声明自己的ExampleService提供者：

@Component({
  standalone: true,
  imports: [LibraryModule]
  // 不要添加 providers: [ExampleService]
})
export class StorybookExample {
  constructor(private example: ExampleService) {}
}

这样测试组件会注入模块级的服务实例，触发工厂逻辑，你就能看到console.log的输出了。

内容的提问来源于stack exchange，提问作者Get Off My Lawn