Angular库注入baseUrl编译报错：ApiService不存在forRoot属性

核心错误点 #

1. 调用对象错误：forRoot是你库中NxServicesModule的静态方法，不是ApiService的，你在应用模块里错误调用了ApiService.forRoot，这是编译报错的直接原因。
2. 库模块配置错误：你在NxServicesModule.forRoot的providers里，错误地把ApiService作为注入令牌，用baseUrl作为实例值——实际上你需要提供的是'baseUrl'这个令牌，供ApiService注入使用，而不是替换ApiService本身。
3. 应用模块导入方式错误：库模块的forRoot应该在imports数组中调用，而不是放在providers里。

修正后的代码 #

1. 修正库中的NxServicesModule #

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http'; // 必须导入，否则HttpClient无法注入
import { ApiService } from './api.service';

@NgModule({
  imports: [
    CommonModule,
    HttpClientModule
  ],
  providers: [
    ApiService
  ]
})
export class NxServicesModule {
  public static forRoot(baseUrl: string): ModuleWithProviders<NxServicesModule> {
    return {
      ngModule: NxServicesModule,
      providers: [
        {
          provide: 'baseUrl', // 与ApiService中@Inject的令牌完全一致
          useValue: baseUrl
        }
      ]
    };
  }
}

2. 修正应用中的module1.module.ts #

import { NgModule } from '@angular/core';
import { MyComponent } from './my.component';
import { NxServicesModule } from '你的库路径';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [
    MyComponent
  ],
  imports: [
    NxServicesModule.forRoot(environment.baseUrl) // 在imports中调用模块的forRoot方法
  ],
  exports: [
    MyComponent
  ]
})
export class Module1Module { }

进阶优化：使用类型安全的InjectionToken #

为了避免字符串令牌的拼写错误，建议用InjectionToken替代字符串：

库中定义令牌 #

// src/lib/base-url.token.ts
import { InjectionToken } from '@angular/core';

export const BASE_URL = new InjectionToken<string>('baseUrl');

修改ApiService的注入 #

import { Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { BASE_URL } from './base-url.token';

export class ApiService {
  constructor(
    private readonly httpClient: HttpClient,
    @Inject(BASE_URL) private baseUrl: string) {
  }

  get<T>(resource: string, options?: object): Observable<T> {
    return this.httpClient.get<T>(`${this.baseUrl}${resource}`, options);
  }
}

修改NxServicesModule的forRoot配置 #

import { BASE_URL } from './base-url.token';

// ...
providers: [
  {
    provide: BASE_URL,
    useValue: baseUrl
  }
]
// ...

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