router.navigate() is not a function

Question

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 {
}

Answer 1

You need to inject Router not RouterModule

  constructor(private router: Router) { }

and navigate function should be without "" ,

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