[SOLVED] - Updating the url when pushing page on the nav stack

dzincolorado · November 7, 2016, 4:35pm

Sorry, just saw this now. Using ionic-angular 2.0.0-rc.2 with @angular/router 3.1.2 and the remaining @angular packages on 2.1.1; below is an example of app.routes.ts:

import {ModuleWithProviders} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';

export const APP_ROUTES_PROVIDER: ModuleWithProviders = RouterModule.forRoot(
[
{
  path: "",
  component: HomePage,
},
{
  path: "news",
  component: NewsPage,
}
] , {useHash: false});

Below is an example for app.module.ts:

import 'rxjs/Rx';

import { NgModule} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {HttpModule} from '@angular/http';
import {LocationStrategy, PathLocationStrategy, APP_BASE_HREF} from '@angular/common';
import {FormsModule} from '@angular/forms'

import {APP_ROUTES_PROVIDER} from "./app.routes";
import { IonicApp, IonicModule } from 'ionic-angular';
import { OurApp } from './app.component';

@NgModule({
    declarations: [
        OurApp,
        COMPONENT_DIRECTIVES,
        PAGES
    ],
    imports: [
        APP_ROUTES_PROVIDER,
        BrowserModule,
        FormsModule,
        HttpModule,
        IonicModule.forRoot(OurApp)
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        OurApp,
        PAGES
    ],
    providers: [
        COMMON_PROVIDERS,
        {provide: APP_BASE_HREF, useValue: "/m"},
        {provide: LocationStrategy, useClass: PathLocationStrategy}
    ]
})
export class AppModule {}

our index.html looks like this:

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!--<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' use.typekit.net 'unsafe-inline'; script-src 'self' use.typekit.net font-src 'self' data: use.typekit.net img-src 'self' p.typekit.net 'unsafe-inline' 'unsafe-eval'">-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">

    <meta name="apple-mobile-web-app-title" content="Our App">
    <meta name="application-name" content="Our App">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="assets/images/raster/favicon/mstile-144x144.png?v=zXXQE6wmrr">
    <meta name="msapplication-config" content="assets/images/raster/favicon/browserconfig.xml?v=zXXQE6wmrr">
    <meta name="theme-color" content="#ffffff">
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <title>title</title>

    <link href="build/main.css" rel="stylesheet">
    <link href="assets/images/sprites/view/sprite.css" rel="stylesheet">

    <base href="/m">

</head>

<body>


    <!-- this Ionic's root component and where the app will load -->
    <ion-app></ion-app>

    <script src="build/polyfills.js"></script>
    <!-- the bundle which is built from the app's source code -->
    <script src="build/main.js"></script>

</body>

</html>

And finally our app.component.html looks like this:

<a [routerLink]="['/']"></a>
<router-outlet></router-outlet>

<bottom-nav></bottom-nav>

The bottom-nav element is our own version of tabs and not ionic’s tabs. We ran into a pretty big issue with using any ionic navigation elements while trying to use ng2 router. Doing this meant we had to write our own logic to track navigation history.

As far as lazy loading, it’s on my list to implement for the next phase of our project. Based on a quick review of the Route interface, looks like the loadChildren callback might be the way to go.

Finally, we don’t currently bundle our code into app/play store package. So, we don’t use any cordova/ionic-native plugins. This is something we might do in the future, though.

Hope this helps.

Denis