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';
}
}
- 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.routertoo. 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
3 Answers
Reset to default 7This 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.