Angular2, ionic2 : How exactly one should implement routing in angular2 final?

Question

I've been trying to set routing to my ionic2 app which is still under development. I'm completely new to the concept of routing.So far whatever I've done is based on NavCtrl.push() or NavCtrl.setRoot().I want to know if routing is possible in ionic2.

But on following the code from official website:https://angular.io/docs/ts/latest/guide/router.html. I got a few errors while running the app. Here is my app.routing.ts file which I created for routing.

 import { Routes, RouterModule } from '@angular/router';
import { Contest } from '../pages/contest/contest';


export const appRoute: Routes = [
     { path: '', redirectTo: 'Contest', pathMatch: 'full' },
      { path: 'Contest', component: Contest}
]

export const appRouting = [
    RouterModule.forRoot(appRoute)
];

I imported this statement into app.component.ts and injected it into the constructor.

import { Router } from '@angular/router';

constructor(public platform: Platform,protected _router: Router) {
this.initializeApp();

In the app.module.ts I imported the following statements and also set them in the imports inside @ngModule

import { RouterModule, Routes } from '@angular/router';
import {appRouting} from './app.routing';

 imports: [appRouting,
IonicModule.forRoot(MyApp)

]

I put the <router-outlet></router-outlet> in my app.html file.On doing all this when I try to run I get the following errors.

Runtime Error: WEBPACK_IMPORTED_MODULE_0__angular_core.Version is not a constructor

Typescript Error: Module '"C:/Users/Impromptu_coder/dem/node_modules/@angular/core/index"' has no exported member 'NgProbeToken

Typescript Error: Module '"C:/Users/Impromptu_coder/dem/node_modules/@angular/core/index"' has no exported member 'Version'.

I have gone through many sources on the internet about routing in ionic2 and angular2 but most of them seem to be deprecated. Here are the current versions

I'm using:

Ionic2 : v2.2.1

npm: 3.10.10

cordova : 6.5.0

Angular2: Final Release rc5

Kindly tell me what is the exact procedure to set up routing in my app. Do i need to install any dependencies?

1) Ionic2 2.2.1 is using angular 2.4.9 and you are using angular rc5. 2) Ionic is using its own routing that is not the same as the angular2 routing. — misha130

Hayden Braxton Hayden Braxton · Accepted Answer · 2017-03-17T20:04:23

Make sure you're dependencies are set according to what's specified in ionic change log: https://github.com/driftyco/ionic/blob/master/CHANGELOG.md

Is there a reason you want to use angular routing in your ionic 2 app? The ionic 2 navigation system is very intuitive and completely different from that of angular. I would suggest sticking with the built in ionic navigation unless you can define a very real need to do otherwise. Unless you're just trying to use angular navigation out of curiosity. In that case, get your dependencies up to date and give it another try.

Angular2, ionic2 : How exactly one should implement routing in angular2 final?

1 Answers