315 questions
0
votes
0
answers
41
views
Why does the canActivateChild guard on route gets called before canActivateChild guard on parent route?
When I navigate to SomeChildComponent, I wonder why SOME_CHILD_GUARD is called before SOME_PARENT_GUARD. It makes no sense to me. And I would like the order to be inverted.
I have not found anything ...
- 51
2
votes
1
answer
117
views
Angular | Why catchError does't catch 401 error?
Listen, I'll explain how it all happens.
I'm making a refresh system for a jwt token. It's a standard thing. I configured exactly two systems: guards and interceptors. That's why I'm sure people will ...
1
vote
1
answer
98
views
How to display loading indicator without flickering on redirection
I'm currently trying to display a loading indicator on navigation in Angular. The issue I am experiencing is that when the user is tries to get on a protected route, the guard will redirect them but ...
- 69
1
vote
1
answer
77
views
Microfrontend Architecture: Angular Guards
I have an application that uses a microfrontend architecture. In one specific microfrontend, I'm using Angular guards with the canDeactivate method. Here's an example:
const exampleRoutes: Routes = [
...
- 81
1
vote
1
answer
155
views
How to have a route guard that routes to an auxiliary route after passing?
I have a section of my Angular app that is only accessible through a generated link sent to the user's email (a Docusign type thing). It is sectioned off from the rest of the app via a feature module, ...
- 37
2
votes
2
answers
876
views
Angular Guard Issue with Server-Side Rendering (SSR)
I'm working on an Angular 17 project with login and session functionality. Everything is working well except for the guard. Every time I refresh the page, the screen briefly blinks back to the login ...
- 21
2
votes
1
answer
89
views
Angular auth bug guard and interceptor
I want to do token-based authorization with angular, but I have a bug like this
I can protect pages with auth guard if the token has not exploded, but I cannot use the interceptor because auth guard ...
- 21
0
votes
1
answer
86
views
Why interacting of two guards leads to infinite redirection loop in Angular 18?
I've got routes '/' and '/auth'. The logic is that NOT logged in users can access ONLY /auth page, while logged in users CAN'T access it.
So, I've made two guards and for some reason I get infinite ...
- 11
0
votes
2
answers
72
views
Common directive to detect for form value before any routing
I need to team suggestion , I have more than 10 form. I want create common directives or any other option form value change before routing. If form changed we need to get confirmation from ...
- 100
2
votes
0
answers
690
views
Angular devtools "Angular application not detected." with canActivate keycloak guard
The angular devtools plugin in firefox and chrome does not work and reports Angular application not detected. when the root path is guarded by a keycloak auth guard.
Reproduction steps:
Create a new ...
- 1,413
1
vote
1
answer
256
views
CoreUI with Angular 18 - interceptor not intercepting http requests
I just started with coreUi and Angular 18 and would like to intercept the requests, when the user calls another route. I started with the standard coreUi modern theme and set everything up so far but ...
- 3,801
1
vote
1
answer
245
views
Angular deep linking with JWT bearer token in authorization header
How can I get the incoming request headers in an Angular authentication guard?
In an Angular 17 application, I'd like to support authenticated deep links with JWT tokens in the incoming request header,...
- 12k
0
votes
1
answer
780
views
Angular 17 and above: How to add a guard or protect empty path, redirectTo route
I am not able to add any guard or anything for redirectTo route in my case which is an empty path.
I am using MSAL for authentication, MSAL does provide a guard and its working for other routes.
So ...
- 117
0
votes
0
answers
70
views
Persisting user and user profile in Angular and data changes after consulting it
Yesterday I encountered a very peculiar bug which I have not been able to solve. I essentially created services to handle user authentication and data management. I also created an additional service ...
- 17
2
votes
0
answers
149
views
Cannot inject services into functional guard
We're trying to implement a functional guard but an error keeps occurring relating to the injected services.
Code: role.guard.ts:
import { HttpClient } from "@angular/common/http";
import { ...
- 833
3
votes
0
answers
127
views
Why Component Destruction Occurs Before canDeactivate Guard : Component is destory before going to canDeactivate guard
I’m attempting to add an unsaved popup modal in my component. I’ve used lazy loading to load modules, and after that, I’m loading standalone components. However, I’ve encountered an issue: when ...
- 407
1
vote
1
answer
548
views
Angular inject Router into CanActivateFn to use in runInInjectionContext
I have a guard that needs to get something async and then decide with that value if a user needs to be redirected with the URLTree.
The code itself is very simple:
export const otapGuard: ...
- 13
2
votes
1
answer
202
views
angular 17 guard's Dependency injection got reinitialized or doesn't update
After login router.navigate goes to guard but in guard it doesn't get updated value.
My app.config.ts is:
export const appConfig: ApplicationConfig = {
providers: [
provideRouter(routes),
...
- 150
0
votes
0
answers
58
views
After implementing guards for routes, the pages are not reloading
The guard I shared below controls access to routes based on the user's role. Since we started using this guard, whenever we refresh pages in the browser or try to load pages with URL information, it ...
- 1
1
vote
3
answers
358
views
unable to perform CanDeactivateFn Karma Test Angular 16
I have a canDeactivateGuard which returns from component's MatDialog for unsaved action.
My problem is I am unable to test the functional guard and getting error -
TypeError: Cannot read properties of ...
- 33
0
votes
1
answer
216
views
why I get this null message when trying to use my guard?
enter image description here
As you can see in the uploaded image, I have everything good imported as it should be when using httpClient, but i get this error when going to the route where I use my ...
0
votes
1
answer
1k
views
How to implement Guard for components which are lazy loaded in Angular 16+
I am trying to trying to implement Guards for lazy loaded components. I have tried canMatch and canActivate for which I am getting the error.
Cannot match any routes. URL Segment:
'admin/home/all-...
- 55
1
vote
2
answers
4k
views
How can define router guard in standalone components in Angular?
I have defined my routes as follows:
import { Routes } from '@angular/router';
import { domainGuard } from './guard-routes.service';
import { NotFoundComponent } from './notFound/not-found.component';
...
- 600
0
votes
1
answer
2k
views
Angular 17 - functional guard - ERROR NullInjectorError: NullInjectorError: No provider for
I am migrating old angular project to latest angular 17. I changed class based auth guard to functional auth guard. The problem I am having is that I get this error:
ERROR NullInjectorError: ...
- 622
0
votes
1
answer
63
views
Guard condition not executing
I'm working on a new project using Angular & Firebase Auth + Firestore DB, and I noticed a problem in my implementation but I've ran out of ideas what it could cause this.
I created an Admin Guard ...
0
votes
1
answer
2k
views
Functional Guards in Angular
I want to prevent navigation by changing the URL and only navigate on button click.
My code:
import {Injectable} from '@angular/core';
import {CanActivateFn, Router} from '@angular/router';
@...
1
vote
1
answer
96
views
How to unsubscribe from RxJs subject within an Angular functional route guard
I have a simple Angular functional route guard that retrieves a boolean value from a Subject<boolean> property on a service. The guard seems to work as expected and looks like this:
export const ...
- 2,136
-1
votes
1
answer
1k
views
Role based system in Angular
I would like to ask, how I can create the role based system in Angular. In my application, I have created the class app-routing.ts, where i would like to define
ClientComponent can open only the ...
- 87
0
votes
1
answer
489
views
Error: Uncaught (in promise): TypeError: guard is not a function TypeError: guard is not a function on Angular
Hi everyone I'm struggling with this error on my webapp and I followed the suggestion on the old topic but I still have the error. Here is my code. When I try to go on dashboard I receive a blank page ...
7
votes
1
answer
4k
views
How to test Functional Router Guard with Parameter within runInInjectionContext
I'm implementing a functional router guard in Angular 15.2.9 which checks if a user is logged in. When this is not the case, the guard should return either false or a UrlTree (i.e. redirect to login ...
- 4,698
1
vote
1
answer
324
views
AuthGuard Not Recognizing Session Cookie 'sessionId' in Angular App
I'm encountering an issue with my Angular application where the AuthGuard isn't recognizing a session cookie named 'sessionId' correctly. I have implemented user authentication, and the expected ...
- 77
0
votes
1
answer
1k
views
Failing to test Angular functional guards using RouterTestingHarness
I am trying to test Angular functional guard with Jest as a testing framework. For mocking the Router component I am using Angular RouterTestingHarness. Here is my functional guard (I can't edit or ...
- 576
0
votes
1
answer
166
views
Problem accessing RouterStateSnapshot on Angular function guards
Since the old method for Angular Guards (Class and injection token guards and resolvers) is deprecated (see angular deprecation docs) , I'm trying to update the usages of guards in my project. But I'm ...
- 404
4
votes
1
answer
4k
views
Router parseUrl() vs navigate() in Angular16
I am in Authenticate with authGuard. I would like to know the difference between these two
// Redirect to the login page
return router.navigate(['/login']);
return router.parseUrl('/login');
In ...
- 832
0
votes
1
answer
767
views
Do not load a micro frontend if the user has not authenticated - single spa
Good morning community
I am new to micro frontend, currently I am building an application where all the microfrontends are made in angular and i am using the single-spa plugin to display them.
What I ...
- 15
1
vote
0
answers
517
views
Getting NullInjectorError while using inject for guard (since CanActivate is deprecated)
I was using CanActivate, but I recently migrated to Angular 16 and since it is deprecated, I tried to use inject() as guided by the official documentation.
This is how my routing component looks like:
...
- 407
0
votes
1
answer
105
views
Angular routing (AuthGuard) inside a Docker Container
I have just deployed my Angular project inside a Docker Container. Path for me to access to the site is: localhost:4200, because on my machine is listening on 4200, but inside the container is ...
- 53
0
votes
0
answers
139
views
Route-guard no longer prevents navigation
I have built an angular website with a bootstrap navbar, where I use the [routerLinkActive] in order to highlight the links which indicate where the user is right now.
The navlinks which don't route ...
- 3,709
0
votes
1
answer
1k
views
CanDeactivateFn in Ionic Angular
I would like to implement a CanDeactivate Guard in my Ionic Angular application. I've found out, that I should use the new "CanDeactivateFn" Guard, but I can't found any information or an ...
- 111
0
votes
1
answer
2k
views
Angular CanActivate Guard
I am developing a small project using Angular, Nodejs, Express, MySQL. In the project there is 2 type of user, customer user and contractor user.
I am having difficulty in using CanActivate to guard ...
- 31
2
votes
0
answers
924
views
show the Microsoft Login page instantly when using msal for angular
MSAL library is used with Angular 15, every controller is protected with the MsalGuard in the app-routing file as follows:
const routes: Routes = [
{
path: 'protected-component',
component: ...
15
votes
6
answers
34k
views
How to use CanActivateFn in Angular 16 via constructor dependency injection
How can I make use of the latest CanActivateFn in Angular 16 with DI?
The recent Angular 16 uses a function, not a class, for the canactivate functionality.
This is my code below. How can I add my DI'...
- 522
3
votes
1
answer
3k
views
Logout is not working properly - angular-oauth-oidc
I'm using the angular-oauth-oidc library to manage authentication in an angular app. I'm also using this sample as the base for my work: https://github.com/jeroenheijmans/sample-angular-oauth2-oidc-...
2
votes
2
answers
4k
views
Router doesn't redirect by guard
I have an angular app with Angular 15. App-routing module somehow doesn't redirect, when a guard returns the UrlTree.
app-routing.module.ts
import { NgModule } from '@angular/core';
import { ...
- 45
0
votes
1
answer
848
views
Why does Angular route resolver only listen to the first value of my observable?
I am working with Angular 15 and I am trying to use the routing resolver handler to prefetch products before loading a product-list component. This product-list component simply displays the products. ...
- 29
1
vote
1
answer
2k
views
Return boolean observable on angular guard
I would like to block URL access from unauthorized users.
I'm currently using canActivate with route Guard from angular to block users to access /my/specific_url_route.
Indeed, I want to block some ...
- 37
0
votes
1
answer
425
views
Lock/deny url from users (angular guard)
I would like to block url access from unauthorized users.
I'm currently using canActivate with route Guard from angular for blocking no Admin user to access /admin route (that's works OK).
But now, I ...
- 37
0
votes
1
answer
452
views
Handling errors throwed in routing guards in Angular routing guards
Hello Stack community,
Is there a efficient way of handling errors throwed inside one of following:
canActivate
canActivateChild
canDeactivate
canMatch
resolve
canLoad
While Angular navigation? ...
- 3,475
2
votes
1
answer
1k
views
Angular 15: Empty ActivatedRoute params in Functional Route Guards
I use new functional guards like:
export function AuthGuard() {
const route = inject(ActivatedRoute);
const authService = inject(AuthService);
return authService.state$.subscribe((user) => {
...
2
votes
1
answer
6k
views
Using "redirectTo" and "canMatch" in routing config to redirect users based on permissions
I'm trying to configure a set of routes where the top level URL in a module should redirect users to an alternate path in the same module based on their current permissions. I think I should be able ...
- 23