Ionic集成NGXS失败：Angular15启动报'ɵivyEnabled'未找到错误

问题背景 #

通过ionic start创建全新Ionic项目，安装@ngxs/store@3.7.6及@ngxs/devtools-plugin@3.7.6后，启动应用时出现如下错误：

./node_modules/@ngxs/store/ivy_ngcc/fesm2015/ngxs-store.js:2667:6-17 - Error: export 'ɵivyEnabled' (imported as 'ɵivyEnabled') was not found in '@angular/core'...

项目使用Angular 15.x版本，app.module.ts中的NGXS配置如下：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { NgxsModule } from '@ngxs/store';
import { environment } from 'src/environments/environment';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TestState } from './core/state/test/test.state';
import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    NgxsModule.forRoot([TestState]),
    NgxsReduxDevtoolsPluginModule.forRoot({ disabled: environment.production }),
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

解决方案 #

问题原因 #

Angular 15移除了内部API ɵivyEnabled，而NGXS 3.7.6版本仍依赖该API，导致兼容性冲突。

解决步骤 #

1. 卸载旧版本NGXS及相关插件：

npm uninstall @ngxs/store @ngxs/devtools-plugin

2. 安装支持Angular 15的NGXS版本（推荐4.x及以上）：

npm install @ngxs/store@^4.0.0 @ngxs/devtools-plugin@^4.0.0 --save

3. 重新启动项目：

npm start

升级后无需修改原app.module.ts中的配置代码，可直接正常使用NGXS功能。

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