Angular库中TextService返回单个字符而非完整字符串的原因排查

我在Angular库中创建了名为TextService的服务，代码如下：

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class TextService {
  constructor() {}

  getText(): Observable<string> {
    return of('Text from service.');
  }
}

订阅其getText方法时发现异常：订阅函数会逐个字符触发。为此我在测试用Angular应用中创建了代码几乎完全一致的本地SampleService：

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class SampleService {
  constructor() {}

  getValue(): Observable<string> {
    return of('Text from service.');
  }
}

在SampleComponent的ngOnInit中同时订阅两个服务：

import { Component, OnDestroy, OnInit } from '@angular/core';
import { TextService } from 'myangular-library';
import { SubscriptionLike } from 'rxjs';
import { SampleService } from '../services/sample.service';

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.scss'],
})
export class SampleComponent implements OnInit, OnDestroy {
  private subscriptions: SubscriptionLike[] = [];

  serviceText: string | null = null;
  sampleValue: string | null = null;

  constructor(
    private textService: TextService,
    private sampleService: SampleService
  ) {}

  ngOnInit(): void {
    this.subscriptions.push(
      this.textService.getText().subscribe((text: string) => {
        console.log('Getting text from text service. Text: ' + text);
        this.serviceText = text;
      })
    );

    this.subscriptions.push(
      this.sampleService.getValue().subscribe((value: string) => {
        console.log('Getting value from sample service. Value: ' + value);
        this.sampleValue = value;
      })
    );
  }

  ngOnDestroy(): void {
    this.subscriptions.forEach((subscription: SubscriptionLike) => {
      subscription.unsubscribe();
    });
  }
}

控制台输出显示，TextService的订阅函数逐个字符触发，而SampleService的订阅函数仅触发一次：

Getting text from service. Text: T
Getting text from service. Text: e
Getting text from service. Text: x
Getting text from service. Text: t
Getting text from service. Text:  
Getting text from service. Text: f
Getting text from service. Text: r
Getting text from service. Text: o
Getting text from service. Text: m
Getting text from service. Text:  
Getting text from service. Text: s
Getting text from service. Text: e
Getting text from service. Text: r
Getting text from service. Text: v
Getting text from service. Text: i
Getting text from service. Text: c
Getting text from service. Text: e
Getting text from service. Text: .
Getting text from sample service. Value: Text from service.

请问为何Angular库中的TextService会逐个字符返回数据？

核心原因：RxJS版本或模块解析冲突 #

这种现象本质是of('Text from service.')被当成了可迭代对象处理，而非直接发射单个字符串值。通常由以下场景导致：

1. Angular库与宿主应用的RxJS版本不兼容 #

如果你的Angular库使用的RxJS版本（比如v6之前）和宿主应用的RxJS版本（v6+）差异过大，of操作符的实现逻辑会出现分歧。旧版本的of会把字符串视为字符数组（可迭代对象），逐个发射每个字符；而新版本的of会直接发射整个字符串。

2. 库的构建配置错误（CommonJS vs ES模块） #

当Angular库的构建输出采用CommonJS格式，而宿主应用使用ES模块解析时，可能会导致RxJS的操作符导入异常。比如import { of } from 'rxjs'被错误解析为旧版的of实现，触发迭代字符串的行为。

3. 类型定义不匹配 #

库的package.json中未正确声明RxJS的依赖版本范围，导致宿主应用加载了不符合预期的类型定义，使得TypeScript无法正确推断of的参数类型，最终运行时把字符串当成迭代对象处理。

解决办法 #

• 统一RxJS版本：确保Angular库和宿主应用使用完全一致的RxJS版本。在库的package.json中，将rxjs设为peerDependency，并指定与Angular版本匹配的范围（比如Angular 16对应RxJS ~7.8.0）。
• 调整库的构建配置：在库的angular.json或ng-package.json中，设置输出格式为ES模块（"format": "esm"），避免CommonJS与ES模块的解析冲突。
• 检查导入路径：确保库中RxJS操作符的导入路径正确，使用import { of } from 'rxjs'而非旧版的import { of } from 'rxjs/observable/of'。
• 强制类型标注：在getText方法中显式指定of的泛型类型，避免类型推断错误：

  getText(): Observable<string> {
    return of<string>('Text from service.');
  }
  

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