Angular19集成NGXS报错：No provider for InjectionToken CUSTOM_NGXS_EXECUTION_STRATEGY

问题根源 #

错误链显示NGXS在解析内部执行策略依赖时，无法找到CUSTOM_NGXS_EXECUTION_STRATEGY的提供者。尽管你在NgxsModule.forRoot中指定了executionStrategy，但在Angular 19的独立组件环境下，配置可能未正确传递到组件的注入上下文。

解决方案 #

方案1：显式提供CUSTOM_NGXS_EXECUTION_STRATEGY令牌

在全局提供者中直接注册该令牌，确保注入上下文能正确获取到执行策略：

// 先导入所需符号
import { CUSTOM_NGXS_EXECUTION_STRATEGY, NoopNgxsExecutionStrategy } from '@ngxs/store';

bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration(withIncrementalHydration()),
    provideHttpClient(),
    provideRouter(routes),
    provideAnimations(),
    // 显式添加执行策略提供者
    {
      provide: CUSTOM_NGXS_EXECUTION_STRATEGY,
      useClass: NoopNgxsExecutionStrategy
    },
    importProvidersFrom(
      MatStepperModule,
      MatButtonModule,
      ReactiveFormsModule,
      NgxsModule.forRoot(
        [FormDataState, GlobalState],
        {
          executionStrategy: NoopNgxsExecutionStrategy, 
        }
      ),
      NgxsReduxDevtoolsPluginModule.forRoot(),
      TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient],
        },
      })
    ),
  ],
}).catch((err) => console.error(err));

方案2：改用NGXS 19的独立API（推荐）

Angular 19主推独立组件模式，NGXS 19提供了provideNgxs等函数替代传统模块导入，更贴合当前生态：

// 导入独立API符号
import { provideNgxs, NoopNgxsExecutionStrategy } from '@ngxs/store';
import { provideNgxsReduxDevtools } from '@ngxs/devtools-plugin';

bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration(withIncrementalHydration()),
    provideHttpClient(),
    provideRouter(routes),
    provideAnimations(),
    // 使用provideNgxs替代NgxsModule.forRoot
    provideNgxs([FormDataState, GlobalState], {
      executionStrategy: NoopNgxsExecutionStrategy
    }),
    // 使用独立API注册DevTools
    provideNgxsReduxDevtools(),
    importProvidersFrom(
      MatStepperModule,
      MatButtonModule,
      ReactiveFormsModule,
      TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient],
        },
      })
    ),
  ],
}).catch((err) => console.error(err));

方案3：调整Sandbox类的提供者位置

你的FormContainerComponent在组件级注册了FormDataSandbox和GlobalSandbox，如果这两个类直接依赖NGXS的Store或相关服务，可能会导致注入上下文隔离。尝试将这两个Sandbox的提供者移到全局providers数组中，而非组件内部：

// main.ts的providers中添加
providers: [
  // ...其他提供者
  FormDataSandbox,
  GlobalSandbox,
  // ...
]

然后移除组件内的providers配置：

@Component({
  selector: 'app-form-container',
  standalone: true, 
  templateUrl: './form-container.component.html',
  styleUrls: ['./form-container.component.scss'],
  imports: [/* ...现有导入 */],
  // 移除组件级providers
  animations: [inAndOut]
})

验证步骤 #

修改配置后，清理缓存并重新构建项目：

rm -rf node_modules package-lock.json
npm install
npm run build
npm start

额外提示 #

如果以上方案无效，可尝试升级NGXS到最新19.x版本，或查看NGXS官方仓库的issues，确认是否存在版本兼容的已知问题。

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