Angular：使用独立方式从库中注册提供者

在独立模式下，我们不需要依赖NgModule来注册库的服务提供者，而是通过自定义提供者配置函数来替代原来的forRoot()逻辑，实现服务的全局单例或按需注入，同时支持传入配置参数。以下是具体实现步骤：

1. 库中定义服务与提供者配置函数 #

首先在库中创建服务，避免直接使用providedIn: 'root'（保持配置的灵活性），然后编写一个返回提供者数组的函数，统一管理库的服务和依赖配置：

示例：库中的服务与配置 #

// libs/my-lib/src/lib/services/my-lib.service.ts
import { Injectable, InjectionToken } from '@angular/core';

// 定义配置令牌，用于传递自定义配置
export const MY_LIB_CONFIG = new InjectionToken<MyLibConfig>('MY_LIB_CONFIG');

export interface MyLibConfig {
  apiBaseUrl: string;
  timeout?: number;
}

@Injectable() // 不指定providedIn，交给配置函数处理
export class MyLibService {
  constructor(@Inject(MY_LIB_CONFIG) private config: MyLibConfig) {}

  getApiEndpoint(path: string): string {
    return `${this.config.apiBaseUrl}/${path}`;
  }
}

编写提供者配置函数 #

// libs/my-lib/src/lib/providers.ts
import { Provider } from '@angular/core';
import { MY_LIB_CONFIG, MyLibConfig, MyLibService } from './services/my-lib.service';

// 替代forRoot()的配置函数，支持传入自定义参数
export function provideMyLib(config: MyLibConfig): Provider[] {
  return [
    { provide: MY_LIB_CONFIG, useValue: config },
    { provide: MyLibService, useClass: MyLibService }
  ];
}

// 如果不需要配置参数，可以简化为无参函数
// export function provideMyLib(): Provider[] {
//   return [MyLibService];
// }

2. 库的公共API导出 #

在库的public-api.ts中导出配置函数和需要暴露的服务/类型，确保应用能正确导入：

// libs/my-lib/src/public-api.ts
export * from './lib/providers';
export * from './lib/services/my-lib.service';

3. 应用中注册与使用 #

全局单例（对应原来的forRoot()） #

在应用的根配置中（比如main.ts的bootstrapApplication）注册库的提供者，实现服务的全局单例：

// src/main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideMyLib } from 'my-lib';

bootstrapApplication(AppComponent, {
  providers: [
    // 注册库的提供者，传入配置
    provideMyLib({
      apiBaseUrl: 'https://api.your-domain.com',
      timeout: 5000
    }),
    // 其他应用级提供者
  ]
});

按需注入（对应原来的forChild()或懒加载场景） #

如果需要在特定路由或组件范围内提供服务（比如懒加载路由），可以在路由配置或组件的providers数组中注册：

// src/app/routes.ts
import { Routes } from '@angular/router';
import { LazyComponent } from './lazy/lazy.component';
import { provideMyLib } from 'my-lib';

export const routes: Routes = [
  {
    path: 'lazy',
    component: LazyComponent,
    providers: [
      // 仅在该路由及其子组件范围内提供服务
      provideMyLib({ apiBaseUrl: 'https://lazy-api.your-domain.com' })
    ]
  }
];

在应用组件中使用服务 #

通过inject()函数注入服务即可，和普通独立组件的用法一致：

// src/app/app.component.ts
import { Component, inject } from '@angular/core';
import { MyLibService } from 'my-lib';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<p>API Endpoint: {{ getEndpoint('users') }}</p>`
})
export class AppComponent {
  private myLibService = inject(MyLibService);

  getEndpoint(path: string): string {
    return this.myLibService.getApiEndpoint(path);
  }
}

关键说明 #

• 这种方式完全替代了原来NgModule中forRoot()的作用：统一管理库的提供者、支持配置参数、控制服务的作用域（全局/局部）。
• 避免直接使用providedIn: 'root'的好处：保持库的灵活性，允许应用根据不同场景（比如环境）传入不同配置，同时避免服务在应用启动时不必要的初始化。
• 对于多个服务的库，可以在配置函数中一次性返回所有相关提供者，保持API的简洁性。

内容的提问来源于stack exchange，提问作者Miklós Szabó