如何修复：{SomeModule} 似乎不是NgModule类(-996002)错误

问题描述 #

将Angular 16应用降级到11.2.14后，app.component.ts中@NgModule的imports数组内所有模块均触发错误。已尝试以下方案但无效：

• 删除node_modules并重新执行npm install
• 运行ng update、禁用Ivy
• 在package.json中添加"postinstall": "ngcc"

相关代码 #

app.component.ts

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

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from "@angular/router";
import { OktaAuthModule } from '@okta/okta-angular';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatToolbarModule } from '@angular/material/toolbar';
import { HomeComponent } from './home/home.component';
import { GuestFormComponent } from './guest-form/guest-form.component';
import { RegistrationComponent } from './registration/registration.component';
import { ReturningUserComponent } from './returning-user/returning-user.component';


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    GuestFormComponent,
    RegistrationComponent,
    ReturningUserComponent,
  ],
  imports: [
    BrowserModule,
    RouterModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatCardModule,
    MatInputModule,
    MatListModule,
    MatToolbarModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    OktaAuthModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

package.json

{
  "name": "test",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "jenkinsbuild": "npm install; ng --version; ng build --configuration=config",
    "test": "npm run lint && npm run test:test --prefix ../",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.2.14",
    "@angular/cdk": "^11.2.13",
    "@angular/common": "~11.2.14",
    "@angular/compiler": "~11.2.14",
    "@angular/core": "~11.2.14",
    "@angular/forms": "~11.2.14",
    "@angular/material": "^11.2.13",
    "@angular/platform-browser": "~11.2.14",
    "@angular/platform-browser-dynamic": "~11.2.14",
    "@angular/router": "~11.2.14",
    "@ng-bootstrap/ng-bootstrap": "^10.0.0",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "bootstrap": "^5.0.1",
    "@okta/okta-angular": "^4.1.0",
    "@okta/okta-auth-js": "^5.5.0",
    "jquery": "^3.6.0",
    "rxjs": "~6.6.0",
    "semantic-ui-css": "^2.4.1",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.3"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^11.1.1",
    "@angular-devkit/build-angular": "~0.1102.13",
    "@angular/cli": "~11.2.14",
    "@angular/compiler-cli": "~11.2.14",
    "@angular/language-service": "^11.0.9",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "text-encoding": "^0.7.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.1.5"
  }
}

解决方案 #

1. 修正TypeScript版本兼容问题 #

Angular 11.2.x官方指定的TypeScript版本为~4.0.x，当前配置的~4.1.5存在版本不匹配问题，会导致类型检查错误。

• 修改package.json中的typescript版本：

  "typescript": "~4.0.7"
  

• 清理依赖缓存并重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

2. 适配Okta模块版本 #

@okta/okta-angular@4.1.0是为Angular 12+设计的，与Angular 11不兼容，需要降级到适配版本：

• 修改package.json中的Okta相关依赖：

  "@okta/okta-angular": "^3.2.0",
  "@okta/okta-auth-js": "^4.8.0"
  

• 重新执行依赖清理和安装命令。

3. 校验Ivy禁用配置 #

确保Ivy禁用配置完全生效：

• 在tsconfig.json的angularCompilerOptions中添加：

  "angularCompilerOptions": {
    "enableIvy": false
  }
  

• 在angular.json的projects -> [你的项目名] -> architect -> build -> options中添加：

  "aot": true,
  "buildOptimizer": true
  

4. 清理Angular CLI缓存 #

残留的缓存可能导致模块解析异常：

ng cache clean --all

5. 调整RouterModule导入逻辑 #

AppRoutingModule通常已经通过RouterModule.forRoot()配置了路由，无需在AppModule中重复导入RouterModule，尝试移除imports数组中的RouterModule：

imports: [
  BrowserModule,
  AppRoutingModule, // 只保留AppRoutingModule
  BrowserAnimationsModule,
  // ...其他模块
]

执行以上步骤后，重新启动项目ng serve，应该能解决模块导入报错问题。

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