javascript - Property 'navigate' does not exist on type 'Router'. Did you mean 'navigate

admin管理员组

文章数量:1241124

I have no idea why, but it was suddenly stopped working... The import is correct but it cannot see navigate() method.. any ideas?
Every answer for this is about missing import but there is a correct import here. navigate() stopped working in every part of my code LOL it is only example here. Any ideas?

import { Injectable } from '@angular/core';

import { Actions, Effect, ofType } from '@ngrx/effects';
import * as  AuthActions from './auth.actions'
import * as UserDetailsActions from '../user/user-store/user.actions';
import * as StudentActions from '../../student/student-store/student.actions';

import { map, mergeMap, switchMap, switchMapTo, concatMapTo, withLatestFrom } from 'rxjs/operators';

import { Router } from '@angular/router';

@Injectable()
export class AuthEffects {
    constructor(private actions$: Actions,
                private router: Router) { }

    @Effect()
    authSignin = this.actions$
        .pipe(
            ofType(AuthActions.TRY_SIGNIN),
            map((action: AuthActions.TrySignin) => {
                return action.payload;
            }),
            switchMap((authData: any) => {

                //here should be request to backend server with JWT
                //set token and and username or user id
                const userRetunedFromRequest = {
                    id: '5',
                    username: authData.username,
                    role: authData.role
                }

                localStorage.setItem('currentUser', JSON.stringify(userRetunedFromRequest));
                //----------------------------------------------------

                return [
                    new AuthActions.SigninUser,
                    new UserDetailsActions.GetUserDetailsById
                ]
            })
        );

    @Effect({ dispatch: false })
    loginRedirect = this.actions$
        .pipe(
            ofType(AuthActions.SIGNIN_USER),
            map((action: AuthActions.SigninUser) => {
                let url = this.navigateByUserRole();
                this.router.navigate([`/${url}`]);
            })
        );


    private navigateByUserRole(): string {
        return JSON.parse(localStorage.getItem('currentUser')).role === 'PARENT' ? 'student' : 'teacher';
    }

}

I have no idea why, but it was suddenly stopped working... The import is correct but it cannot see navigate() method.. any ideas?
Every answer for this is about missing import but there is a correct import here. navigate() stopped working in every part of my code LOL it is only example here. Any ideas?

import { Injectable } from '@angular/core';

import { Actions, Effect, ofType } from '@ngrx/effects';
import * as  AuthActions from './auth.actions'
import * as UserDetailsActions from '../user/user-store/user.actions';
import * as StudentActions from '../../student/student-store/student.actions';

import { map, mergeMap, switchMap, switchMapTo, concatMapTo, withLatestFrom } from 'rxjs/operators';

import { Router } from '@angular/router';

@Injectable()
export class AuthEffects {
    constructor(private actions$: Actions,
                private router: Router) { }

    @Effect()
    authSignin = this.actions$
        .pipe(
            ofType(AuthActions.TRY_SIGNIN),
            map((action: AuthActions.TrySignin) => {
                return action.payload;
            }),
            switchMap((authData: any) => {

                //here should be request to backend server with JWT
                //set token and and username or user id
                const userRetunedFromRequest = {
                    id: '5',
                    username: authData.username,
                    role: authData.role
                }

                localStorage.setItem('currentUser', JSON.stringify(userRetunedFromRequest));
                //----------------------------------------------------

                return [
                    new AuthActions.SigninUser,
                    new UserDetailsActions.GetUserDetailsById
                ]
            })
        );

    @Effect({ dispatch: false })
    loginRedirect = this.actions$
        .pipe(
            ofType(AuthActions.SIGNIN_USER),
            map((action: AuthActions.SigninUser) => {
                let url = this.navigateByUserRole();
                this.router.navigate([`/${url}`]);
            })
        );


    private navigateByUserRole(): string {
        return JSON.parse(localStorage.getItem('currentUser')).role === 'PARENT' ? 'student' : 'teacher';
    }

}

• javascript
• angular
• routes
• angular2-routing

Share Improve this question Follow edited Sep 30, 2021 at 21:33 Guerric P 31.8k66 gold badges5858 silver badges105105 bronze badges asked Apr 15, 2019 at 4:34 Mateusz GebroskiMateusz Gebroski 1,33455 gold badges3030 silver badges6161 bronze badges 4

• console log the URL. there might be an issue that url is not available. – TheParam Commented Apr 15, 2019 at 5:00
• Console log the this.router too. It seems it may have been overriden somehow in the dependency injection or sth. – Apokralipsa Commented Apr 15, 2019 at 5:06
• Any chances of context change of this .. try logging and check. – Sachin Gupta Commented Apr 15, 2019 at 5:19
• what does it mean and how could it be overriden? – Mateusz Gebroski Commented Apr 15, 2019 at 9:04

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

This is a Typescript issue. Logging as suggested in the ments won't help here because the problem is at pilation time.

Try (<any>this.router).navigate([`/${url}`]); and if that fixes your problem, then you probably have an issue with your dependencies versions. Create a new project from scratch and use the generated package.json to update your project's one.

This issue will be raised because of your imports with "@angular/router" like this:

import { Router } from '@angular/router';

Sometimes when the typescript automatically adds the "import {} from ''" it uses different modules. Let me explain with an example:

I wrote the following to add dependency.

    constructor(private router: Router){}

The typescript added:

    import {Router} from "express"

instead of:

    import { Router } from '@angular/router'

So the piler gave me the same error that you faced and rightly so. I change the first import statement to the second one and the error was resolved. Keep an eye on these automatic imports to verify.

本文标签： javascriptProperty 39navigate39 does not exist on type 39Router39 Did you mean 39navigated39Stack Overflow