Cannot create routes on Ionic 3

1
votes

I want to see the actual route on the url but I can't figure out what I need to change exactly.

I'm following the docs here: https://ionicframework.com/docs/api/navigation/IonicPage/

but I get this error:

...home.ts has a @IonicPage decorator, but it does not have a corresponding "NgModule" at... I have this on the top of my page:

@IonicPage({
  name: 'sums-home',
  segment: 'sums-home'
})

I created the home.module.ts file with this code:

import { NgModule } from '@angular/core';

import { SumsHomePage} from './home'; import { IonicPageModule } from 'ionic-angular';

import { NgModule } from '@angular/core';
import { SumsHomePage} from './home';
import { IonicPageModule } from 'ionic-angular';

@NgModule({
  declarations: [
    SumsHomePage
  ],
  imports: [
    IonicPageModule.forChild(SumsHomePage),
  ],
  exports: [
    SumsHomePage
  ]
})
export class SumsHomePageModule { }

and I go to this page doing:

this.navCtrl.push('sums-home');

but I think it should have something else.

Does anyone archived this?

4
angulartypescriptionic3

4 Answers

5
votes

i was having the same problem on my Desktop Ionic project, and found this solution using DeepLinks :

imports: [ BrowserModule, IonicModule.forRoot(MyApp, {}, { links: [ { component: HomePage, name: 'Home', segment: 'home' }, { component: LoginPage, name: 'Login', segment: 'login' }, { component: UsersPage, name: 'Users', segment: 'users' }, { component: TrophiesPage, name: 'Trophies', segment: 'trophies' } ] }), HttpModule, LoginPageModule, UsersPageModule, TrophiesPageModule, TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: (createTranslateLoader), deps: [Http] } }), ]

Just notice links property used in IonicModule.forRoot import. Now when i use:

this.navCtrl.setRoot(HomePage);

I get correctly redirected to url "http://localhost:8100/#/home". Hope it'll help. Peace

1
votes

If SumsHomePage has an @IonicPage() decorator your corresponding module shoud look like this:

@NgModule({  
  declarations: [  
    SumsHomePage  
  ],  
  imports: [  
    IonicPageModule.forChild(SumsHomePage)  
  ]  
})

I don't think you need it in the entryComponents array but adding it will do no harm.

1
votes

You need to create your module as shown below. But if you use latest CLI this is done by it automatically for you.

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SumsHomePage } from './SumsHome';

@NgModule({
  declarations: [
    SumsHomePage,
  ],
  imports: [
    IonicPageModule.forChild(SumsHomePage),
  ],
})
export class SumsHomePageModule { }
1
votes

I was navigating like this.nav.setRoot(SumsHomePage);.

Url seems to change only when navigating using segment: this.nav.setRoot('sums-home');