CODEWITHSUNDEEP
angularionic4angular-routing
Sree Grandhe
Sree Grandhe

Reputation: 419

router.navigate() is not a function

I am building an ionic app and using angular routing. I want my successful-login to result in the app going to my main tabs page. My code is attached below. Any idea why the navigate function is not being recognized? My assumption is that the Routing Module is not being imported properly, but it is being recognized by the IDE so I'm still lost.

Login.page.ts

import { Component, OnInit } from '@angular/core';
import {FirebaseUISignInFailure, FirebaseUISignInSuccessWithAuthResult} from 'firebaseui-angular';
import { Storage } from '@ionic/storage';
import {RouterModule} from '@angular/router';
import {AppRoutingModule} from '../app-routing.module';


// tslint:disable-next-line:import-spacing

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
  // tslint:disable-next-line:no-shadowed-variable
  constructor(private Storage: Storage, public router: RouterModule) { }

  ngOnInit() {
  }

  successCallback(signInSuccessData: FirebaseUISignInSuccessWithAuthResult) {
    this.Storage.set('uid',signInSuccessData.authResult.user.uid);
    this.router.navigate("['/tabs']");
  }

  errorCallback(errorData: FirebaseUISignInFailure) {

  }

}

Login.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';
import {IonicStorageModule} from '@ionic/storage';

import { LoginPageRoutingModule } from './login-routing.module';

import { LoginPage } from './login.page';

// tslint:disable-next-line:import-spacing

import {FirebaseUIModule, firebase, firebaseui} from 'firebaseui-angular';

import {AngularFireModule} from '@angular/fire';
import {AngularFireAuthModule} from '@angular/fire/auth';
import {environment} from '../../environments/environment';
import {AppComponent} from '../app.component';
import {RouterModule} from '@angular/router';
import {AppRoutingModule} from '../app-routing.module';
import {TabsPage} from '../tabs/tabs.page';

const firebaseUiAuthConfig: firebaseui.auth.Config = {
  signInFlow: 'popup',
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
  ],
  tosUrl: 'google.com',
  privacyPolicyUrl: 'google.com',
  credentialHelper: firebaseui.auth.CredentialHelper.ACCOUNT_CHOOSER_COM
};

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    IonicStorageModule.forRoot(),
    LoginPageRoutingModule,
    RouterModule.forRoot([
      {path: 'tabs', component: TabsPage}
    ]),
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    FirebaseUIModule.forRoot(firebaseUiAuthConfig)
  ],
  declarations: [LoginPage],
  bootstrap: [LoginPage]
})
export class LoginPageModule {
}

Upvotes: 0

Views: 5644

Answers (2)

Harsh
Harsh

Reputation: 350

Looks like you forgot to export routing module 

@NgModule({
  imports: [RouterModule.forRoot(
    [{path: 'tabs', component: TabsPage}]
  )],
  exports: [RouterModule]
})

export router module by adding exports: [RouterModule] in @NgModule.

And

  1. Change constructor import to constructor(private router: Router)
  2. Change router navigate this.router.navigate("['/tabs']"); to this.router.navigate(['/tabs']);

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222582

You need to inject Router not RouterModule

  constructor(private router: Router) { }

and navigate function should be without "" ,

 this.router.navigate(['/tabs']);

Upvotes: 2

Related Questions