How to fix: { SomeModule } does not appear to be a NgModule Class (-996002)

After I downgraded my angular application from Angular 16 to angular 11.2.14 I got errors with importing my modules into app.component.ts with NgModule. Every module inside imports: [] is giving me this error.

Here is my 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"
}
}



I've already tried different things that I've found in other stackoverflow posts and blogs to fix it such as:

• deleting my node_modules and running npm install after,
• running ng update, disabling Ivy,
• adding "postinstall": "ngcc" to package.json

Nothing that I have tried so far has worked.

Does anyone know what I should do to fix it?

Continue reading...