Issur on Ionic update

Question

I’m slowly learning AngularTS and I’ve been struggling with this error in my app.module.ts file for a while. I just updated an Ionic application from version 4 to 7 here is my file:

//import {FormsModule} from '@angular/forms';

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

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@capacitor/splash-screen';
import { StatusBar } from '@capacitor/status-bar';

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

import {HttpClientModule, HttpClient} from '@angular/common/http';
//import { GuardService } from './providers/guard/guard.service';
import { IonicStorageModule } from '@ionic/storage';

//to reuse custom components :
//https://stackoverflow.com/questions/53185901/ionic-4-custom-components
//do the 2 first answers to make it work correctly
//import { ComponentsModule } from './components/components.module';
//import { CustomFooterComponent } from './components/custom-footer/custom-footer.component';

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { TranslationService } from './providers/translation/translation.service';
import { Globalization } from '@awesome-cordova-plugins/globalization/ngx';

//import { DatePicker } from '@ionic-native/date-picker/ngx';
//import { Keyboard } from '@ionic-native/keyboard/ngx';

import { CartPageModule } from './pages/cart/cart.module';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';

export function createTranslateLoader(http: HttpClient) {
  console.log('createTranslateLoader');
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],//[CustomFooterComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(), 
    AppRoutingModule,
    IonicStorageModule.forRoot(),
    HttpClientModule,
    CartPageModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    }),
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })

  ],
  providers: [
    
    //Keyboard,
    Globalization,
    //DatePicker,
    TranslationService,
    //GuardService,
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

And the error is: 'Value at position 0 in the NgModule.imports of AppModule is not a reference Valeur n'a pas pu être déterminée statically.(-991010) '

My package.json :

{
  "name": "basco-app",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.0.0",
    "@angular/common": "^16.0.0",
    "@angular/compiler": "^16.0.0",
    "@angular/core": "^16.0.0",
    "@angular/forms": "^16.0.0",
    "@angular/platform-browser": "^16.0.0",
    "@angular/platform-browser-dynamic": "^16.0.0",
    "@angular/router": "^16.0.0",
    "@angular/service-worker": "^16.1.7",
    "@awesome-cordova-plugins/globalization": "^6.4.0",
    "@capacitor/splash-screen": "^5.0.6",
    "@capacitor/status-bar": "^5.0.6",
    "@ionic/angular": "^7.0.0",
    "@ionic/storage": "^4.0.0",
    "@ionic/storage-angular": "^4.0.0",
    "@ngx-translate/core": "^15.0.0",
    "@ngx-translate/http-loader": "^8.0.0",
    "cordova-plugin-globalization": "^1.11.0",
    "install": "^0.13.0",
    "ionicons": "^7.0.0",
    "npm": "^9.8.1",
    "rxjs": "~7.8.0",
    "tslib": "^2.6.1",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.0.0",
    "@angular-eslint/builder": "^16.0.0",
    "@angular-eslint/eslint-plugin": "^16.0.0",
    "@angular-eslint/eslint-plugin-template": "^16.0.0",
    "@angular-eslint/schematics": "^16.0.0",
    "@angular-eslint/template-parser": "^16.0.0",
    "@angular/cli": "^16.0.0",
    "@angular/compiler": "^16.0.0",
    "@angular/compiler-cli": "^16.0.0",
    "@angular/language-service": "^16.0.0",
    "@ionic/angular-toolkit": "^9.0.0",
    "@types/jasmine": "~4.3.0",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "5.3.0",
    "@typescript-eslint/parser": "5.3.0",
    "eslint": "^7.26.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~4.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "ts-node": "^8.3.0",
    "typescript": "~5.0.2"
  },
  "description": "An Ionic project"
}

Can you help me solve it?

Yes i update everything as well watch that's my package.json (i add it to my question) — Lebonsavane, Aug 01 '23 at 10:21

score 0 · Answer 1 · answered Aug 01 '23 at 10:49

First, make sure to update the versions of Angular and other dependencies in your package.json to use Angular 12 and other compatible versions. Update your package.json like this:

"dependencies": {
  // ... other dependencies ...
  "@angular/animations": "^12.0.0",
  "@angular/common": "^12.0.0",
  "@angular/compiler": "^12.0.0",
  "@angular/core": "^12.0.0",
  "@angular/forms": "^12.0.0",
  "@angular/platform-browser": "^12.0.0",
  "@angular/platform-browser-dynamic": "^12.0.0",
  "@angular/router": "^12.0.0",
  // ... other dependencies ...
}

After updating the package.json, run the following commands in your project directory to update the packages:

npm install

I did it but i have now a new error which says "The class 'AppComponent' is listed in the declarations of the NgModule 'AppModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.(-996001)" pointed on app.module.ts on 'declarations : [AppComponent]' — Lebonsavane, Aug 01 '23 at 12:58

Issur on Ionic update

1 Answers1