Ionic v4 Navigation & Routing


#1

Hello,

I am new with Ionic and currently i am working on ionic v4 project and i am trying to link one page with other page (Navigation & routing) but its not working can any please suggest any tuts for ionic 4 or explain in simple language. I already read " [Josh Morony]" post but i will still facing issue becsue i am not understand how to connect to page in ionic.

Query : I need to move my application one page to other page using on button click.

This is not working it’s showing error because i miss something

All below codes not working

<ion-button horizontal=“start” [href]="’/signup’"
class=“button-block button-native bg-white color-gold icon-left btn-align font-color-gray”>
Start Now!

<ion-button horizontal=“start” [href]="’/home/signup’"
class=“button-block button-native bg-white color-gold icon-left btn-align font-color-gray”>
Start Now!

viewSignup()
this.router.navigateByUrl(‘home/signup’, { skipLocationChange: true });
//this.router.navigate([’/home/signup’]);
//this.router.navigateByUrl(’/home/signup’, { skipLocationChange: true });
//this.router.navigateByUrl(’/signup’, { skipLocationChange: true });
//this.router.navigateByUrl(‘signup’, { skipLocationChange: true });
}

app-routing.module.ts


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


const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  { path: 'signup', loadChildren: './signup/signup.module#SignupPageModule' },
  { path: 'Splash', loadChildren: './splash/splash.module#SplashPageModule' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

ERROR

ERROR Error: Uncaught (in promise): TypeError: Object(...) is not a function
TypeError: Object(...) is not a function
    at index.js:119
    at Object../node_modules/@ionic-native/google-plus/index.js (index.js:180)
    at __webpack_require__ (bootstrap:81)
    at Object../src/app/signup/signup.page.ts (signup-signup-module.js:40903)
    at __webpack_require__ (bootstrap:81)
    at Object../src/app/signup/signup.module.ts (index.cjs.js:127)
    at __webpack_require__ (bootstrap:81)
    at $_lazy_route_resource lazy namespace object:25
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:3760)
    at index.js:119
    at Object../node_modules/@ionic-native/google-plus/index.js (index.js:180)
    at __webpack_require__ (bootstrap:81)
    at Object../src/app/signup/signup.page.ts (signup-signup-module.js:40903)
    at __webpack_require__ (bootstrap:81)
    at Object../src/app/signup/signup.module.ts (index.cjs.js:127)
    at __webpack_require__ (bootstrap:81)
    at $_lazy_route_resource lazy namespace object:25
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:3760)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3751)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
defaultErrorLogger @ core.js:1633
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1679
next @ core.js:4255
schedulerFn @ core.js:3491
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:195
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:133
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3483
(anonymous) @ core.js:3782
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:3719
onHandleError @ core.js:3782
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:392
push../node_modules/zone.js/dist/zone.js.Zone.runGuarded @ zone.js:154
_loop_1 @ zone.js:677
api.microtaskDrainDone @ zone.js:686
drainMicroTaskQueue @ zone.js:602
Promise.then (async)
scheduleMicroTask @ zone.js:578
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:297
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:401
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:862
resolvePromise @ zone.js:808
(anonymous) @ zone.js:724
webpackJsonpCallback @ bootstrap:23
(anonymous) @ signup-signup-module.js:1

Thanks.


#2

https://angular.io/tutorial/toh-pt5


#3

I have already use this URL steps but error… is still same…


#4

The code you posted does not look like the code in the tutorial.