Currently, I am delving into the world of Angular2 with Ionic and working on crafting a login page. However, upon loading the page, an error surfaces: 'router.initialNavigation is not a function'
To address this issue, I inserted '{initialNavigation : false}' in app.routing.ts, as shown below:
@NgModule({
imports: [ RouterModule.forRoot(appRoutes, {initialNavigation : false})],
exports: [ RouterModule ]
})
Even after implementing the above change, another error pops up: 'router.setUpLocationChangeListener is not a function'
In addition, despite adding 'initialNavigation:false', clicking the login button triggers the following message: 'this.router.navigate is not a function'
I am stumped on identifying the root cause... Any guidance would be greatly appreciated! Below you will find my code for reference.
app.module.ts
import { NgModule, ErrorHandler } from '@angular/core';
import { HttpModule } from '@angular/http';
import { Router, Routes, RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { AppRoutingModule } from './app.routing';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { TabsPage } from '../pages/tabs/tabs';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
LoginPage
],
imports: [
BrowserModule,
HttpModule,
AppRoutingModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
LoginPage
],
providers: [//Global Services
StatusBar,
SplashScreen,
{provide: Router, useClass: IonicErrorHandler}
]
})
export class AppModule {}
app.routing.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TabsPage } from '../pages/tabs/tabs';
import { LoginPage } from '../pages/login/login';
const appRoutes: Routes = [
{ path: '', component: TabsPage},
{ path: '/login', component: LoginPage },
{ path: '/tabs', component: TabsPage },
{ path: '**', redirectTo: 'tabs' }
];
@NgModule({
imports: [ RouterModule.forRoot(appRoutes, {initialNavigation : false})],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
login.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';//for .map()
import 'rxjs/add/operator/map';//for .map()
import { Router, Routes, RouterModule } from '@angular/router';
import { TabsPage } from '../tabs/tabs';
@Component({
selector: 'page-login',
templateUrl: 'login.html'
})
export class LoginPage {
id:string="";
pw:string="";
rootPage:any = TabsPage;
constructor(public navCtrl: NavController, private http: Http, private router: Router) {
}
ngOnInit(){
}
loginAction(){
let id:string = this.id;
let pw:string = this.pw;
this.http.post("http://localhost:80/loginAction", {
id:id,
pw:pw
}, '').map(response => response.json()).subscribe(data => {
this.router.navigate(['/tabs']);
console.log(data);
});
}
}
login.html
<ion-header>
<ion-navbar>
<base href="/" />
<ion-title>Login</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-label floating>Id</ion-label>
<ion-input type="text" value="" [(ngModel)]="id"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Password</ion-label>
<ion-input type="password" value="" [(ngModel)]="pw"></ion-input>
</ion-item>
</ion-list>
<div padding>
<button ion-button color="primary" (click)="loginAction()" block>Sign In</button>
</div>
</ion-content>>