NavParams / Providers Issues in Ionic 2 BETA

Ionic Framework ionic-v3
1

Dear Ionic Team,

ive updated my app to 2.0.0-beta.8 and try to update all my files.

Now i have the issues that im not getting NavParams working.

Using the old way throws an No provider for NavParams! exception.

Now i’ve used a

@ViewChild(NavParams) navParams: NavParams;

and tried to access it in the constructor via

constructor(public sqlService: SqlService) {
    this.refresh(this.navParams.data.album.album_id);
    this.title = this.navParams.data.album.album_name;
}

The issue is that data is undefined and i have no idea why.

I call the page using

@ViewChild(Nav) nav: Nav;

and

this.nav.push(myPage, { myData});

Same with my own providers.

Ive bootstrapped them in the app.ts with

ionicBootstrap(MyApp, [SyncService, SqlService, PushService, FileSyncService], {
   tabbarPlacement: 'bottom'
});

and tried to access them in the other components. But without bootstrapping them they seems to be undefined. I could bootstrap them in every class, but in the “performance” docs its told to implement them only in the loader class (app.ts)

2

you only get the navcontroller via @ViewChild decorator.

NavParams is a simple service you can inject via dependency injection:

import {Component} from '@angular/core';
import {NavParams} from 'ionic-angular';

@Component({...})
export MyComponent {
  constructor(private params: NavParams) {
    console.log(this.params);
  }
}
3

as written above this was the first i have tried.

import {NavParams, ionicBootstrap} from 'ionic-angular';

export class GalleryDetailsPage {

 constructor(private params: NavParams, public sqlService: SqlService) {
        this.refresh(this.params.data.album.album_id);
        this.title = this.params.data.album.album_name;
    }
}

ORIGINAL EXCEPTION: No provider for NavParams!
4

Any idea? Checked all my files in my Project. Maybe the updating routine failed.

Here is a part of my package.json:

     "dependencies": {
        "@angular/common": "^2.0.0-rc.1",
        "@angular/compiler": "^2.0.0-rc.1",
        "@angular/core": "^2.0.0-rc.1",
        "@angular/http": "^2.0.0-rc.1",
        "@angular/platform-browser": "^2.0.0-rc.1",
        "@angular/platform-browser-dynamic": "^2.0.0-rc.1",
        "@angular/router": "^2.0.0-rc.1",
        "es6-shim": "^0.35.0",
        "ionic-angular": "2.0.0-beta.8",
        "ionic-native": "^1.1.0",
        "ionicons": "3.0.0",
        "reflect-metadata": "^0.1.3",
        "rxjs": "5.0.0-beta.6",
        "zone.js": "^0.6.12"
      },
      "devDependencies": {
        "del": "2.2.0",
        "gulp": "3.9.1",
        "gulp-watch": "4.3.5",
        "ionic-gulp-browserify-typescript": "^1.1.0",
        "ionic-gulp-fonts-copy": "^1.0.0",
        "ionic-gulp-html-copy": "^1.0.0",
        "ionic-gulp-sass-build": "^1.0.0",
        "ionic-gulp-scripts-copy": "^2.0.0",
        "run-sequence": "1.1.5"
      },

EDIT: Updated ionic native to the latest.

Here’s the exception:

browser_adapter.js:77ORIGINAL EXCEPTION: No provider for NavParams!

Following the Dump it leads to the part of the source:

      self._GalleryDetailsPage_0_4 = new jit_GalleryDetailsPage1(self.parentInjector.get(jit_NavParams7),self.parentInjector.get(jit_SqlService8));

Here is the part of my GalleryDetailsPage:

    import {NavParams, ionicBootstrap} from 'ionic-angular';
    @Component({
        templateUrl: 'build/pages/gallery/gallery-details.html',
        })

    export class GalleryDetailsPage {
        album: any;
        title: string;


        constructor(private params: NavParams, public sqlService: SqlService) {
            this.refresh(this.params.data.album.album_id);
            this.title = this.params.data.album.album_name;
        }
    }
    ionicBootstrap(GalleryDetailsPage, [SqlService], {
        pipes: [PipeString, ParseDate]

    });

Edit2: Adding it to ionicBootstrap in the App.ts fixed some issue. This is new, maybe this should be added to the update process (same as the ionic-native). But now only the start page is displayed. The Tabs are not loaded. The GalleryDetailsPage which is a tabs page throws

    EXCEPTION: Error in :0:0
    app.bundle.js:35799 EXCEPTION: Error in :0:0BrowserDomAdapter.logError @ app.bundle.js:35799BrowserDomAdapter.logGroup @ app.bundle.js:35809ExceptionHandler.call @ app.bundle.js:3643(anonymous function) @ app.bundle.js:22363ZoneDelegate.invoke @ zone.js:323onInvoke @ app.bundle.js:32607ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216NgZoneImpl.runInner @ app.bundle.js:32638NgZone.run @ app.bundle.js:32539ApplicationRef_.run @ app.bundle.js:22352ApplicationRef_.bootstrap @ app.bundle.js:22374(anonymous function) @ app.bundle.js:22162ZoneDelegate.invoke @ zone.js:323onInvoke @ app.bundle.js:32607ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356onInvokeTask @ app.bundle.js:32598ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
    app.bundle.js:35799 ORIGINAL EXCEPTION: No provider for NavParams!BrowserDomAdapter.logError @ app.bundle.js:35799ExceptionHandler.call @ app.bundle.js:3652(anonymous function) @ app.bundle.js:22363ZoneDelegate.invoke @ zone.js:323onInvoke @ app.bundle.js:32607ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216NgZoneImpl.runInner @ app.bundle.js:32638NgZone.run @ app.bundle.js:32539ApplicationRef_.run @ app.bundle.js:22352ApplicationRef_.bootstrap @ app.bundle.js:22374(anonymous function) @ app.bundle.js:22162ZoneDelegate.invoke @ zone.js:323onInvoke @ app.bundle.js:32607ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356onInvokeTask @ app.bundle.js:32598ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
    app.bundle.js:35799 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ app.bundle.js:35799ExceptionHandler.call @ app.bundle.js:3655(anonymous function) @ app.bundle.js:22363ZoneDelegate.invoke @ zone.js:323onInvoke @ app.bundle.js:32607ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216NgZoneImpl.runInner @ app.bundle.js:32638NgZone.run @ app.bundle.js:32539ApplicationRef_.run @ app.bundle.js:22352ApplicationRef_.bootstrap @ app.bundle.js:22374(anonymous function) @ app.bundle.js:22162ZoneDelegate.invoke @ zone.js:323onInvoke @ app.bundle.js:32607ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356onInvokeTask @ app.bundle.js:32598ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
    app.bundle.js:35799 Error: DI Exception
        at NoProviderError.BaseException [as constructor] (app.bundle.js:3736)
        at NoProviderError.AbstractProviderError [as constructor] (app.bundle.js:25039)
        at new NoProviderError (app.bundle.js:25075)
        at ReflectiveInjector_._throwOrNull (app.bundle.js:26058)
        at ReflectiveInjector_._getByKeyDefault (app.bundle.js:26086)
        at ReflectiveInjector_._getByKey (app.bundle.js:26049)
        at ReflectiveInjector_.get (app.bundle.js:25858)
        at DebugAppView._View_GalleryDetailsPage_Host0.createInternal (GalleryDetailsPage_Host.template.js:15)
        at DebugAppView.AppView.create (app.bundle.js:27779)
        at DebugAppView.create (app.bundle.js:27972)BrowserDomAdapter.logError @ app.bundle.js:35799ExceptionHandler.call @ app.bundle.js:3656(anonymous function) @ app.bundle.js:22363ZoneDelegate.invoke @ zone.js:323onInvoke @ app.bundle.js:32607ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216NgZoneImpl.runInner @ app.bundle.js:32638NgZone.run @ app.bundle.js:32539ApplicationRef_.run @ app.bundle.js:22352ApplicationRef_.bootstrap @ app.bundle.js:22374(anonymous function) @ app.bundle.js:22162ZoneDelegate.invoke @ zone.js:323onInvoke @ app.bundle.js:32607ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356onInvokeTask @ app.bundle.js:32598ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
    app.bundle.js:35799 ERROR CONTEXT:BrowserDomAdapter.logError @ app.bundle.js:35799ExceptionHandler.call @ app.bundle.js:3659(anonymous function) @ app.bundle.js:22363ZoneDelegate.invoke @ zone.js:323onInvoke @ app.bundle.js:32607ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216NgZoneImpl.runInner @ app.bundle.js:32638NgZone.run @ app.bundle.js:32539ApplicationRef_.run @ app.bundle.js:22352ApplicationRef_.bootstrap @ app.bundle.js:22374(anonymous function) @ app.bundle.js:22162ZoneDelegate.invoke @ zone.js:323onInvoke @ app.bundle.js:32607ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356onInvokeTask @ app.bundle.js:32598ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
    app.bundle.js:35799 DebugContext {_view: _View_GalleryDetailsPage_Host0, _nodeIndex: 0, _tplRow: 0, _tplCol: 0}
5

You need to add/use ionicBootstrap() only in app.ts, i.e. remove it from all other pages/files.

6

Omg, that was the issue. Thank you iignatov.

How about the Performance? If i bootstrap my Providers like a “TwitterProvider” which is only used in one subpage and only if the user choose this in the settings… Can i still add the TwitterProvider in the @Component as provider?

7

In such case you could just add the provider (e.g. TwitterProvider) to the providers array of the specific page, but you don’t need ionicBootstrap() for this, i.e. this should work:

// TODO: Import TwitterProvider here.
// ...
@Component({
    // ...
    providers: [ TwitterProvider ],
    //...
})
export class MyPage {
    // ...
}