NGXS注入异常：用@Optional注入Store仍报PluginManager无提供者错误

问题根源在于：Store类本身依赖PluginManager，即使你用@Optional()标记Store为可选注入，Angular在解析Store的构造函数时，仍会尝试获取其依赖PluginManager，而未集成NGXS的应用中没有这个提供者，因此触发NullInjectorError。

以下是几种可行的解决方法：

方法一：通过Injector手动延迟获取Store #

不在构造函数直接注入Store，而是借助Injector在需要时尝试获取，避免初始化阶段解析依赖：

import { Component, Injector } from '@angular/core';
import { Store } from '@ngxs/store';

@Component({
  selector: 'my-comp',
  standalone: true
})
export class MyComponent {
  private store?: Store;

  constructor(private injector: Injector) {
    try {
      // 尝试获取Store，不存在则返回null
      this.store = this.injector.get(Store, null);
    } catch {}
  }

  // 使用Store前先判断是否存在
  doSomethingWithStore() {
    if (this.store) {
      // 执行Store相关操作，比如this.store.select(...)
    }
  }
}

方法二：为组件提供可选的Store提供者 #

在组件的providers数组中定义一个自定义的Store提供者，依赖可选的PluginManager，当PluginManager不存在时返回null：

import { Component, Optional } from '@angular/core';
import { Store, PLUGIN_MANAGER } from '@ngxs/store';
import { PluginManager } from '@ngxs/store/src/internal/internals';

@Component({
  selector: 'my-comp',
  standalone: true,
  providers: [
    {
      provide: Store,
      useFactory: (pluginManager?: PluginManager) => {
        // 只有当PluginManager存在时才实例化Store
        return pluginManager ? new Store(pluginManager) : null;
      },
      // 将PluginManager标记为可选依赖
      deps: [[new Optional(), PLUGIN_MANAGER]]
    }
  ]
})
export class MyComponent {
  constructor(@Optional() private store?: Store) {}

  useStore() {
    if (this.store) {
      // 正常使用Store
    }
  }
}

方法三：依赖抽象服务而非具体Store #

定义一个抽象的Store服务，组件依赖该抽象类，在集成NGXS的应用中提供NGXS Store作为实现，未集成的应用则不提供（或提供空实现）：

1. 定义抽象服务：

// app-store.abstract.ts
import { Observable } from 'rxjs';

export abstract class AppStore {
  // 声明组件需要用到的Store方法
  abstract select<T>(selector: any): Observable<T>;
}

2. 组件中注入抽象服务：

import { Component, Optional } from '@angular/core';
import { AppStore } from './app-store.abstract';

@Component({
  selector: 'my-comp',
  standalone: true
})
export class MyComponent {
  constructor(@Optional() private store?: AppStore) {}

  useStore() {
    if (this.store) {
      this.store.select(/* 选择器 */).subscribe();
    }
  }
}

3. 在集成NGXS的应用中提供实现：

// 在应用的providers中添加
import { Provider } from '@angular/core';
import { AppStore } from './app-store.abstract';
import { Store } from '@ngxs/store';

export const NGXSStoreProvider: Provider = {
  provide: AppStore,
  useExisting: Store
};

这种方式更符合依赖倒置原则，组件与具体的NGXS实现解耦，扩展性更强。

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