4

I'm currently trying to migrate an old Ionic app to Ionic 4.

they were no issues at all before migration

I'm working on a provider file helper.ts , and i'm stuck with a migration issue.

here is the ionic info output


Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/usr/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.3.1
   @angular-devkit/build-angular : 0.13.8
   @angular-devkit/schematics    : 7.3.8
   @angular/cli                  : 7.3.8
   @ionic/angular-toolkit        : 1.5.1

System:

   NodeJS : v10.12.0 (/usr/bin/node)
   npm    : 6.9.0
   OS     : Linux 4.13

In the old app i had to import 

import { App, MenuController } from 'ionic-angular';

In ionic 4 ionic-angular is replaced by @ionic/angular , but the App isnt there anymore.

import { App, MenuController } from '@ionic/angular';

will result in an error :

ERROR in src/services/helper.ts(2,10): error TS2305: Module 'URLmodule' has no exported member 'App'.

So I have tried importing an other class, IonApp, but this class doesn't seem to have the same functions

import { IonApp, MenuController } from '@ionic/angular';

will result in an error :

ERROR in src/services/helper.ts(18,18): error TS2339: Property 'getRootNav' does not exist on type 'IonApp'.

I was wondering if IonApp is the right member, and i had to overwrite it , or if the App member disappears in Ionic 4 ?

Here is the new helper.ts .

import { Injectable } from '@angular/core';
import { IonApp, MenuController } from '@ionic/angular';
import { Storage } from '@ionic/storage';

import { HomePage } from '../app/home/home.page';

@Injectable({
  providedIn: 'root',
})
export class Helper {

  constructor(private app: IonApp, private menuCtrl: MenuController, private storage: Storage) { }

    /**
     * go to HomePage, no matter where u are
    */
    previousPage() {
        this.app.getRootNav().setRoot(HomePage, {}, {animate: true, direction: 'forward'});
    }

    // menu handler, because we have two
    openMenu(menu) {
        this.menuCtrl.enable(true, 'menu-map');
        this.menuCtrl.open('menu-map');
    }

    closeMenu(menu) {
        this.menuCtrl.close('menu-map');
        this.menuCtrl.enable(false, 'menu-map');
    }

    storeStats(article) {
       this.storage.get('processStats').then((val) => {
            let find = false;
            for(let i=0; i < val.length; i++) {
                if(article.code === val[i].code) {
                    let array = val;
                    array[i].view = val[i].view + 1;
                    this.storage.set('processStats', array);
                    find = true;
                    break;
                }
            }
            if(find === false) {
                let array = val;
                array.push({code: article.code, title: article.title, view: 1, notFound: 0})
                this.storage.set('processStats', array)
            }
       })
    }

    notFoundStats(article) {
        this.storage.get('processStats').then((val) => {
            for(let i=0; i < val.length; i++) {
                if(article.code === val[i].code) {
                    let array = val;
                    array[i].notFound = val[i].notFound + 1;
                    this.storage.set('processStats', array);
                    break;
                }
            }
        });
    }

    initialiseStats() {
         this.storage.set('processStats', [{code: "", title: "", view: 0, notFound: 0}])
    }
}
Plouyroe
  • 103
  • 2
  • 10

1 Answers1

0

hi ionic 4 you need use this.appCtrl.getActiveNav to this.appCtrl.navigateRoot and import { App,} from "ionic-angular"; to import { NavController } from '@ionic/angular';

Erick Magalhaes
  • 1