Problems with the routing of deeplinks

Ionic Framework ionic-v3
1

Hello there,

I try to use DeepLinks with the routeWithNavController.

But when I try to serve the App I get:

Runtime Error
No provider for NavController!
Stack
Error: No provider for NavController!
    at injectionError (http://localhost:8100/build/vendor.js:1590:86)
    at noProviderError (http://localhost:8100/build/vendor.js:1628:12)
    at ReflectiveInjector_._throwOrNull (http://localhost:8100/build/vendor.js:3129:19)
    at ReflectiveInjector_._getByKeyDefault (http://localhost:8100/build/vendor.js:3168:25)
    at ReflectiveInjector_._getByKey (http://localhost:8100/build/vendor.js:3100:25)
    at ReflectiveInjector_.get (http://localhost:8100/build/vendor.js:2969:21)
    at AppModuleInjector.NgModuleInjector.get (http://localhost:8100/build/vendor.js:3937:52)
    at resolveDep (http://localhost:8100/build/vendor.js:11398:45)
    at createClass (http://localhost:8100/build/vendor.js:11262:32)
    at createDirectiveInstance (http://localhost:8100/build/vendor.js:11082:37)

app.component.ts:

import { Component } from '@angular/core';
import { Platform, NavController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';


import { HomePage } from '../pages/home/home';
import { Deeplinks } from '@ionic-native/deeplinks';
import { SecondPage} from "../pages/second/second";

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,  private deeplinks: Deeplinks, public navCtrl: NavController) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();

      this.deeplinks.routeWithNavController(this.navCtrl, {
        '/secondpage': SecondPage

      }).subscribe((match) => {

           alert(JSON.stringify(match))
      }, (noMatch) =>{
        alert(JSON.stringify(noMatch));
        }
      )
    });
  }
}

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule} from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule} from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { Deeplinks } from '@ionic-native/deeplinks';


import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { SecondPage} from "../pages/second/second";

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    SecondPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    SecondPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Deeplinks,
    {provide: ErrorHandler, useClass: IonicErrorHandler }
  ]
})
export class AppModule {}

so how can I get the NavController provided?

2

Found the Solution myself

What if you want to control navigation from your root app component? You can't inject NavController because any components that are navigation controllers are children of the root component so they aren't available to be injected.

By adding a reference variable to the ion-nav, you can use @ViewChild to get an instance of the Nav component, which is a navigation controller (it extends NavController):

import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
   template: '<ion-nav #myNav [root]="rootPage"></ion-nav>'
})
export class MyApp {
   @ViewChild('myNav') nav: NavController
   public rootPage = TabsPage;

   // Wait for the components in MyApp's template to be initialized
   // In this case, we are waiting for the Nav with reference variable of "#myNav"
   ngOnInit() {
      // Let's navigate from TabsPage to Page1
      this.nav.push(Page1);
   }
}