While developing a new (tabs based) ionic app, i tried to push a new page. I already tried this.navCtrl.navigateForward(MyComponent)
and this.router.navigate(['tabs','my','component'])
. I injected the Router (or NavCtrl) in the constructor and made it private.
@Component({
selector: 'app-stream',
templateUrl: './stream.page.html',
styleUrls: ['./stream.page.scss'],
})
export class Component {
constructor(
private router: Router,
private navCtrl: NavController,
) {
}
public navigateRouter() {
this.router.navigate(['some', 'url'])
}
public navigateNav() {
this.navCtrl.navigateForward(OtherComponent)
}
}
In both cases, the URL gets updated, but the page component wont be displayed.
This is an example, the real app could be found on github (currently in the feature/stream branch)
Git (Fixed commit)
I’m actually not so sure about my routing (anymore).
My goal is to have /tabs removed in the URL and have routes like:
/stream
/stream/locations/:locationId
/tab2
/tab3
src/app/app-routing.module.ts
src/app/tabs/tabs.router.module.ts
src/app/tabs/stream/stream.module.ts
(picture from augury chrome extension)
The red circled route is the route that i want to navigate to, but isn’t loaded
Any help is appreciated.
PS: i also tried the directive routerLink="MyComponent"
in combination with routerDirection="forward"
Edit:
My Ionic Info output:
Ionic:
ionic (Ionic CLI) : 4.12.0 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.1.2
@angular-devkit/build-angular : 0.13.6
@angular-devkit/schematics : 7.2.4
@angular/cli : 7.3.6
@ionic/angular-toolkit : 1.4.1
Cordova:
cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : none
Cordova Plugins : cordova-plugin-ionic 5.3.0
System:
ios-deploy : 2.0.0
NodeJS : v10.9.0 (/usr/local/Cellar/node/10.9.0/bin/node)
npm : 6.7.0
OS : macOS Mojave
Xcode : Xcode 10.1 Build version 10B61