Angular 16 Can't bind to 'ngSwitch' since it isn't a known property of 'div

Question

I recently migrated to Angular 16 from angular 15 , along with custom library upgrade from 8 to 9. In my project I had an array of components named entryComponents. However, the entryComponents is no longer available in Angular 16. So I have moved whatever components I had in entry components to declarations array of the @Ngmodule. But still getting this errors:

error snippet

Here is snippet of om-common.module.ts:

export const LIB_IMPORTS = [
  ButtonModule,
  InputModule,
  SelectModule,
  RadioModule,
  CheckboxModule,
  TextareaModule,
  ToggleModule,
  ModalModule,
  CommonTableModule,
  ToolbarModule,
  ProgressbarModule
];
const IMPORT = [
  ...LIB_IMPORTS,
  FormsModule,
  ReactiveFormsModule,
  BsDropdownModule.forRoot(),
  TreeModule.forRoot(),
  SelectInputModule,
  QueryBuilderModule,
  ToggleSwitchModule,
  PrettyJsonModule,
  MultiSelectModule
];
const DECLARATIONS = [ 
    PropertySelectComponent, 
    PropertyModalComponent, 
    ObjectPathPickerComponent, 
    ManageVariablesLoaderComponent, 
    DeactivateWarningModal 
];
const ENTRYCOMPONENT = [ 
    PropertySelectComponent, 
    LoadingModalComponent, 
    PropertyModalComponent, 
    ExpressionInputComponent, 
    ExpressionEditorComponent, 
    ObjectPathPickerComponent, 
    PathPickerInputComponent 
];
const PROVIDERS = [
  NgbActiveModal,
  PLORModalService,
  AppUtilityService
];

@NgModule({
  declarations: [...DECLARATIONS],
  imports: [
    CommonModule,
    ...IMPORT,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: TranslationService,
        deps: [HttpClient]
      }
    })
  ],
  exports: [...DECLARATIONS],
  //entryComponents: [...ENTRYCOMPONENT],
  providers: [...PROVIDERS],

})
export class OmCommonModule {
  static forRoot(): ModuleWithProviders<OmCommonModule> {
    return {
      ngModule: OmCommonModule,
      providers: [...PROVIDERS]
    };
  }
}

My app.module.ts file is:

export const MODULES = [
  ...LIB_MODULES,
  BrowserModule,
  AppRoutingModule,
  ModelerModule.forRoot(),
  OmCommonModule.forRoot(),
  FormsModule,
  ReactiveFormsModule,
  CommonModule,
  BrowserAnimationsModule,
  ImportExportProcessModule,
  CompareVersionModule.forRoot(),
  ProcessExecutionModule
];

Package.json

 "dependencies": {
    "@angular/animations": "^16.2.12",
    "@angular/cdk": "^16.2.12",
    "@angular/common": "^16.2.12",
    "@angular/compiler": "^16.2.12",
    "@angular/core": "^16.2.12",
    "@angular/forms": "^16.2.12",
    "@angular/localize": "^16.2.12",
    "@angular/platform-browser": "^16.2.12",
    "@angular/platform-browser-dynamic": "^16.2.12",
    "@angular/platform-server": "^16.2.12",
    "@angular/router": "^16.2.12",
    "@angular/service-worker": "^16.2.12",
    "@ng-bootstrap/ng-bootstrap": "^15.0.0",
    "@ngrx/effects": "^16.2.0",
    "@ngrx/store": "^16.3.0",
    "@ngrx/store-devtools": "^16.3.0",
    "@ngx-translate/core": "^15.0.0",
    "@ngx-translate/http-loader": "^8.0.0",
    "@popperjs/core": "^2.11.8",
    "angular-tree-component": "^8.2.0",
    "angular2-prettyjson": "^3.0.1",
    "awesome-typescript-loader": "2.2.1",
    "bootstrap": "~5.2.0",
    "clone": "^2.1.1",
    "core-js": "^2.5.4",
    "d3-shape": "^3.2.0",
    "gojs": "2.3.10",
    "jquery": "^3.6.0",
    "karma-spec-reporter": "0.0.32",
    "moment": "^2.22.1",
    "ngx-bootstrap": "^5.5.0",
    "ngx-toastr": "^16.0.1",
    "rxjs": "6.6.7",
    "rxjs-tslint": "0.1.5",
    "sass-loader": "^10.1.1",
    "shortid": "^2.2.8",
    "ts-md5": "^1.2.9",
    "tslib": "^2.0.0",
    "uuid": "^9.0.0",
    "zone.js": "~0.13.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.2.12",
    "@angular/cli": "^16.2.12",
    "@angular/compiler-cli": "^16.2.12",
    "@angular/language-service": "^16.2.12",
    "@babel/helper-module-transforms": "^7.23.0",
    "@ngrx/schematics": "^12.3.0",
    "@schematics/angular": "^0.4.8",
    "@schematics/package-update": "^0.4.8",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "^2.0.10",
    "@types/node": "^14.11.1",
    "codelyzer": "^6.0.0",
    "colors": "1.4.0",
    "husky": "^0.14.3",
    "jasmine-core": "~3.8.0",
    "jasmine-marbles": "~0.8.3",
    "jasmine-spec-reporter": "7.0.0",
    "karma": "^6.3.12",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "^2.0.3",
    "karma-firefox-launcher": "^1.2.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "lint-staged": "^7.2.0",
    "ng-event-source": "^1.0.14",
    "ng-packagr": "^16.2.3",
    "prettier": "^1.13.7",
    "protractor": "~7.0.0",
    "sonar-scanner": "3.1.0",
    "ts-node": "~5.0.1",
    "tslint": "~6.1.0",
    "typescript": "~4.9.5"
  },

For angular update followed below steps:

1. Deleted Node modules from project folder

2. npm cache verify

3. used cmd :- ng update @angular/cli@16 @angular/core@16

4. npm install

5. I have tried to import CommonModule inside imports as NgSwitch , NgClass all are coming from commonModule but still getting errors.

How can I resolve this?`

Answer 1

You are only importing the providers of the module OmCommonModule by using forRoot instead you need to import OmCommonModule. Also ensure CommonModule is imported in app.module.ts

 export const MODULES = [
  ...LIB_MODULES,
  BrowserModule,
  AppRoutingModule,
  OmCommonModule, // <- changed here!
  ModelerModule.forRoot(),
  OmCommonModule.forRoot(),
  FormsModule,
  ReactiveFormsModule,
  CommonModule,
  BrowserAnimationsModule,
  ImportExportProcessModule,
  CompareVersionModule.forRoot(),
  ProcessExecutionModule
];