求助：NgxsRootModule等类不被识别为NgModule类的解决办法

问题背景 #

我在学习NGXS时，执行了以下依赖安装命令：

npm install @ngxs/store --save; 
npm i @ngxs/logger-plugin --save; 
npm i @ngxs/devtools-plugin --save-dev

但安装后运行代码时，app.module.ts出现如下报错：

'NgxsRootModule' does not appear to be an NgModule class.
'NgxsLoggerPluginModule' does not appear to be an NgModule class.
'NgxsReduxDevtoolsPluginModule' does not appear to be an NgModule class.

我的app.module.ts代码如下：

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { NgxsModule } from '@ngxs/store';
import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxsModule.forRoot([]), NgxsLoggerPluginModule.forRoot(), NgxsReduxDevtoolsPluginModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

已经尝试过重启VSCode、删除node_modules重新执行npm install，但问题依旧，求解决思路。

可能的解决方向 #

1. 检查NGXS与Angular版本兼容性 #

NGXS不同版本对Angular的版本要求严格，比如NGXS 4.x需要Angular 14+，NGXS 3.x适配Angular 12-13。

• 执行ng version查看Angular核心包版本
• 打开package.json确认@ngxs/store、@ngxs/logger-plugin、@ngxs/devtools-plugin的版本号
• 若版本不兼容，卸载现有包后安装对应版本：

  npm uninstall @ngxs/store @ngxs/logger-plugin @ngxs/devtools-plugin
  # 示例：安装适配Angular14的NGXS 4.x版本
  npm install @ngxs/store@4.x @ngxs/logger-plugin@4.x --save
  npm install @ngxs/devtools-plugin@4.x --save-dev
  

2. 修正NGXS 4.x及以上版本的导入路径 #

NGXS 4.x开始，插件的导入路径发生变化，需修改app.module.ts的导入语句：

import { NgxsModule } from '@ngxs/store';
import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin/src';
import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin/src';

修改后重新编译项目。

3. 清理Angular缓存 #

Angular缓存可能导致模块识别异常，执行以下命令清理：

ng cache clean --all

之后运行ng serve重启项目。

4. 检查TypeScript配置 #

确保tsconfig.json的compilerOptions配置正确，关键选项参考：

{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ES2020",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

修改配置后重启项目验证。

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