NX Angular Monorepo中共享服务Signal未在应用中触发更新问题

问题根源 #

你遇到的情况是因为NX单仓库中，默认providedIn: 'root'的服务在多应用场景下可能生成多个实例——每个应用的注入器都会创建自己的ThemeService实例，导致一个应用更新的是自身实例的信号，另一个应用读取的是独立实例，自然看不到更新。另外，ngAfterViewInit只执行一次，哪怕信号后续更新了，也不会再次触发打印。

解决方案 #

1. 确保ThemeService是跨应用单例

把服务的providedIn从'root'改成'platform'，这样整个平台（所有共享同一环境的应用）只会生成一个实例：

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

@Injectable({
  providedIn: 'platform' // 改为platform实现跨应用单例
})
export class ThemeService {
  themeSignal = signal<string>('light');

  setTheme(theme: string) {
    this.themeSignal.set(theme);
    // 可选：同步到localStorage，刷新页面也能保留主题
    localStorage.setItem('theme', theme);
  }
}

如果还是存在实例不共享的情况，检查NX项目配置：在主题库的project.json中，确保build目标的options里设置了正确的共享配置，或者在nx.json中将该库标记为全局共享。

2. 监听信号实时变化，而非仅在初始化钩子打印

ngAfterViewInit只会在组件视图初始化时执行一次，要实时获取信号更新，需要把signal转为Observable监听：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ThemeService } from '@your-workspace/theme';
import { Subscription } from 'rxjs';
import { toObservable } from '@angular/core/rxjs-interop';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit, OnDestroy {
  private themeSubscription?: Subscription;

  constructor(private themeService: ThemeService) {}

  ngOnInit() {
    // 监听主题信号的变化
    this.themeSubscription = toObservable(this.themeService.themeSignal)
      .subscribe(currentTheme => {
        console.log('当前主题更新为:', currentTheme);
      });
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅，避免内存泄漏
    this.themeSubscription?.unsubscribe();
  }
}

3. 验证库的导入路径正确性

检查每个应用的tsconfig.json，确保主题库的路径映射正确，避免因路径错误导致应用导入了不同的服务文件：

{
  "compilerOptions": {
    "paths": {
      "@your-workspace/theme": ["libs/theme/src/index.ts"]
    }
  }
}

总结 #

先解决服务单例问题，保证所有应用共用同一个ThemeService实例；再通过监听信号变化来获取实时值，而不是依赖只执行一次的生命周期钩子。

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