CODEWITHSUNDEEP
ioscordovaionic-framework
RSK
RSK

Reputation: 161

Ionic NativeStorage error

I am trying to use nativestorage (https://github.com/TheCocoaProject/cordova-plugin-nativestorage) in my application.

All is fine, and I can build the application.

In my app.components.ts I have this

this.setRootPage();

at the end of the this.platform.ready().then(()

Which inturn calls the function

setRootPage() {

 //intro skip if value is set

  this.nativeStorage.getItem("intro").then((intro) => {
  if (intro) {
    this.rootPage = Category1Page;
  } else {
    this.rootPage = IntroPage;
  }
});

  }

I end up with an error when running the application Error: Uncaught (in promise): [object Object] on both IOS simulator as well as browser using ionic cordova run browser

Your help is greatly appreciated

Ionic Info

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.12.0
    ionic (Ionic CLI) : 3.12.0

global packages:

    cordova (Cordova CLI) : 7.0.1 

local packages:

    @ionic/app-scripts : 1.3.7
    Cordova Platforms  : android 6.2.3 browser 4.1.0 ios 4.4.0
    Ionic Framework    : ionic-angular 3.3.0

System:

    ios-deploy : 1.9.2 
    Node       : v6.11.2
    npm        : 3.10.10 
    OS         : macOS High Sierra
    Xcode      : Xcode 9.0 Build version 9A235 

Misc:

    backend : pro

Upvotes: 0

Views: 979

Answers (2)

RSK
RSK

Reputation: 161

Thanks a lot to David for pointing me into the right direction. As always, I love to put the full fix in the end of my questions to help others who might face something similar :)

The issue was to set / retrieve a value for an intro page (slider) and to dynamically send the user based on a value from nativestorage.

In app.html

<ion-nav #Nav [root]="rootPage"></ion-nav>

In app.module.ts

import { Category1Page } from '../pages/layout/app1/category1/category1';
import { IntroPage } from '../pages/layout/intro/intro';

@NgModule({
  declarations: [
    ...
    Category1Page,
    IntroPage,
    ...

  ],
....
entryComponents: [
    ...
    Category1Page,
    IntroPage,
    ...
  ],

In app.components.ts

import { Category1Page } from '../pages/layout/app1/category1/category1';
import { IntroPage } from '../pages/layout/intro/intro';

@Component({
  templateUrl: 'app.html'
})

export class MyApp {

  public rootPage: any;

...
constructor(... private nativeStorage: NativeStorage ...)
...

initializeApp() {
    this.platform.ready().then(() => {
      ...

      this.splashScreen.hide();

      this.setRootPage();
    });
  }

  setRootPage() {

  this.nativeStorage.getItem("intro").then((intro) => {
  if (intro) {
    this.rootPage = Category1Page;
  } else {
    this.rootPage = IntroPage;
  }
}, (error) => {
  this.rootPage = IntroPage;
});

  }

Upvotes: 0

David
David

Reputation: 7507

I think you can't just dynamically change the rootPage variable to set the root of the NavController. First of all make sure rootPage has an initial value (maybe a page thats empty). Then to use the NavController in your app.component you have to add a template variable to the ion-nav template:

<ion-nav #Nav [root]="rootPage"></ion-nav>

And add a reference using ViewChild:

@ViewChild('Nav') nav: NavController;

Then you can modify your setRootPage function as follows:

this.nativeStorage.getItem("intro").then((intro) => {
  if (intro) {
    this.nav.setRoot(Category1Page);
  } else {
    this.nav.setRoot(IntroPage);
  }
}, (error) => {
  this.nav.setRoot(IntroPage);
});

Upvotes: 2

Related Questions