1,908 questions
1
vote
2
answers
84
views
Prevent navigation to non-existent ID params
I try to prevent user to navigate to a non-existent id parameters with my details component. I read the documentation of Angular v20 and it seems that the "resolvers routes configuring" is ...
3
votes
1
answer
108
views
How can I stop an Angular component flickering when navigating with a guard?
Below are my current routes. If the user is not authenticated, I don't want them to be able to access any of the routes protected by the AuthGuard and they should be redirected to the Login page. This ...
- 77
0
votes
0
answers
58
views
How to link a ticket to its related object using objectId in Angular when data comes from /api/objects?caseId=...?
I’m building an Angular frontend for an ERP-like system, and I’m trying to generate a link like:
<a [routerLink]="['/erp/real-estates/objects', objectId]">Gå till objekt # som ...
0
votes
0
answers
62
views
Show error status when chunk is not loading
Is there any way to see the http error response in a NavigationError?
When navigating in angular, navigation can fail for different reasons. I'd want to catch at least two of those, namely:
Internet ...
- 189
2
votes
1
answer
79
views
Router outlet sibling styling
I've come back to Angular after a long time and am a bit confused. Last time I used angular any routes defined where being rendered as children of router outlet. But now it is being rendered as child ...
1
vote
0
answers
81
views
Directly access a child route by copying and pasting a URL from outside the app
The url: http://www.example.com/#/orders/new/today/3640963 shows me the 'new tab', with the order details view open.
This is when I click to it in the app. If I copy that URL and paste it in a new ...
- 729
1
vote
2
answers
113
views
Unexpected result when unit testing router.navigate's toHaveBeenCalledWith method
Angular: 18.2.13
Jest: 29.7.0
I'm unit testing a method in my component which performs a router.navigate after a successful HTTP call. Note that I've removed some of the unncessary code for brevity
...
- 5,046
2
votes
0
answers
27
views
Angular Enum Type [duplicate]
I have urls defined like this:
E_one = '/url1/'
E_two = '/url2/'
E_three = '/url3/'
export LINKS = { E_one: E_one, E_two: E_two, E_three: E_three}
So I import 'LINKS', but then I want to dynamically ...
- 14.2k
2
votes
1
answer
114
views
Multiple <router-outlet> Angular 19
I have a page where I display a material table with a select drop-down to select a category from multiple categories and a search box to filter the table.
I want to give each category in the drop-down ...
- 981
0
votes
1
answer
55
views
Angular unit testing relative RouterLinks
In my Angular app I need to be able to unit test that routerLink create the correct href attribute. Sometimes they are links relative to the current route, and sometimes they are absolute links from ...
- 34.6k
1
vote
2
answers
99
views
How can I mix primary and named outlets in nested navigation?
Given the following routes:
export const routes: Routes = [
{ path: "test-1/:name", component: TestComponent, title: "Main 1" },
{ path: "test-2/:name", component: ...
- 2,868
3
votes
0
answers
63
views
Persistent NG04002 ("No matching route found") navigating from lazy-loaded to eager route (Angular 15.2.9)
I'm facing a persistent routing issue in my Angular application (version 15.2.9) after refactoring some features into lazy-loaded feature modules. The error NG04002 ("Error: NG04002 Error: ...
- 33
1
vote
1
answer
76
views
How to stay on the same dynamic URL after refreshing the page, angular 19
In my single page angular app I represent the groups data in the tabs, one tab per group, one dynamic url with groupId in it per group tab. During first loading a user gets redirected to the tab of ...
- 295
1
vote
3
answers
299
views
How can I bind an id from the URL to an Angular signal and use that signal to fetch product details from an API?
Goal
I'm using Angular with the new signals feature and the experimental HttpResource. I want to:
Extract an id parameter from the route.
Bind this id to a signal.
Use that signal to fetch product ...
- 13
0
votes
1
answer
72
views
I am updating the angular component properties inside a if block and I feel it is not updating
ngOnInit() {
this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
if (event.url === '/common/time') {
this.zone.run(() => {
...
- 77
0
votes
2
answers
78
views
How to use a secondary router outlet without ng modules correctly to enable page reload by url?
How to use a secondary router outlet without ng modules correctly enabling page reload by url?
I have an app component with a router:
<main>
<router-outlet></router-outlet>
&...
1
vote
1
answer
46
views
Angular router activates outlet that is removed
I have dynamically added component with its own router outlet(for child paths):
this.componentRef = this.modal.createComponent(ComponentA);
After removing this component via destroy method:
this....
- 555
1
vote
1
answer
200
views
Why are components' imports not loading in Angular 19 SSR?
I've run into a problem that my header's imports are not loaded properly in SSR.
In my Angular 19 application the app.component.html includes a static <app-header> component that should exist on ...
- 11
1
vote
1
answer
53
views
Get routerLink DOM element after clicking without binding (click) event
Let's assume I have something like this in my code:
<button routerLink="/account" routerLinkActive="active">Account</button>
Is there a way to access this element when ...
- 555
0
votes
1
answer
58
views
Angular dev server treats route as static asset
I am using Angular 19 and trying to create routes that look like this https://localhost:4200/pics/pc-arch/mnt/drive and https://localhost:4200/pics/pc-arch/mnt/drive/gallery1.jpg.
I have the following ...
- 75
2
votes
1
answer
50
views
Cannot match children routes of blank path
I have this configuration in my routing in Angular:
...
{
path: 'account',
canActivate: [AuthGuardService],
children: [
{
path: '',
...
- 555
1
vote
0
answers
221
views
Angular 18 live reload routing issues
Somehow, the live reload (when any code is changed) causes routing issues. I've spent couple of hours investigating this, however couldn't understand what is going on. Here is what happens:
When I ...
0
votes
0
answers
29
views
How to override Angular's Router and ActivatedRoute for query param encryption?
I need to encrypt and decrypt query parameters in an Angular application. My idea is to create wrapper classes around Router and ActivatedRoute to handle encryption before navigation and decryption ...
- 1
1
vote
1
answer
97
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
35
views
Angular module loading children, child route is not initialising on router.navigate
The app loads app.module where I give it a route:
export const routes: Routes = [
{
path: '',
resolve: { mockData: MockApiResolver },
loadChildren: () => import('./shared-components/...
- 3,222
0
votes
1
answer
203
views
Resolving HTTP Request Pending State During Route Navigation
I currently have the issue that my HTTP requests are stuck in a "pending" state (for more than 10 seconds until it starts the request).
This issue is especially common if I navigate to other ...
- 891
1
vote
1
answer
773
views
Routes in angular 19 do not change anything in the interface
I have a simple route system in Angular 19, basically it is the home page and an about page that are between a header and a footer. However, despite the URL changing when clicking on the redirect link,...
1
vote
1
answer
823
views
angular routing is not working in angular 19
Why is this routing config not working? The router is trying to go /posts but it should not go to /posts. Currently it is showing a blank page. BlankComponentComponent contains router-outlet and ...
- 1,994
2
votes
0
answers
143
views
How to disable view transitions for a specific router outlet?
I have enabled view transitions using the withViewTransitions() function in provideRouter().
Now I like to write a directive or something to be able to disable the transition view for a specific <...
- 1,472
0
votes
0
answers
121
views
Angular19 with SSR, the page render component from router and with home component. Means always two component in one page
My Netflix clone project uses Angular19 with SSR,
the view always renders a component from Router and a home component. Means always two component on one page.
in my angular19 project, with the router-...
- 1
1
vote
1
answer
207
views
How to handle small bundles in an Angular app to reduce network overhead?
I’ve noticed that my Angular app generates several small bundles (some as small as 179 bytes, with a few others under 3.1 KB). These small bundles are typically related to routing files or small ...
- 11
0
votes
0
answers
66
views
Angular lib with route
Using Angular 18, I have a workspace and within it a lib-one. I want to know how I can apply routes within lib-one? Is it possible?
Within the lib-one I have two components: component-a and component-...
- 315
1
vote
1
answer
137
views
Router does not match route on navigation
I have a HTML code:
<table mat-table [dataSource]="claims" matSort class="mat-elevation-z8">
<ng-container *ngFor="let column of displayedColumns" [...
- 3,059
0
votes
1
answer
378
views
Angular Material mat-nav-list active route
I'm discovering angular material, and I'm struggling to find the correct way of highlighting the activate route in the navigation component. I noticed it was not done by default in the navigation ...
- 1
0
votes
0
answers
218
views
Angular 18 navigation between routes
I'm working with Angular and have implemented a NavigationService to handle routing/navigation in my app. However, i’m experiencing an issue where the navigation does not occur on the first click. I ...
- 1
0
votes
1
answer
111
views
Github Pages not recognizing Angular routing
I have a test Angular18 website hosted on Github Pages. I have an About page that works perfectly on my localhost, but came back as 404 not found. I created a 404.html file as suggested in many posts, ...
- 37
1
vote
0
answers
31
views
how to pass state in default route Angular
i'm facing an issue passing router state to the default child route("general"),
the state is set only when i click on the tab,
FunctionalLocationDetailsComponent is parent component,
...
- 67
1
vote
1
answer
151
views
I'm using version 17 of Angular and I would like to know how to use CanActivate, which has been discontinued and is now CanActivateFn
I have the following code in my old version of Angular
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from
'@angular/...
- 87
1
vote
1
answer
46
views
How to eliminate the verbose pattern of canActivate/canDeactivate in Angular?
My routing is set up like this (main parent node with a bunch of child sub nodes).
export const routes: Routes = [
{ path: "", component: HomeComponent },
{ path: "profile", ...
- 40.2k
2
votes
1
answer
459
views
Angular Standalone Component Routing Error: Not routing properly
So I have been working Angular for a time, but I recently started using v18 only, and wanted to make a simple app with standalone components... I am routing all unidentified path to landing, and from ...
- 306
1
vote
1
answer
34
views
Using Common Service Variables or Route Parameters [closed]
I have a Angular application, which has multiple components that access the same Service.
I am trying to understand if there is any benefit to switching away from using route parameters to using ...
- 183
1
vote
2
answers
55
views
Typscript error in Angular for a dynamic nav
I'm still learning Angular, and I'm trying to build a dynamic nav. This won't be my main nav, but a duplicate in the footer.
My main nav works fine, an i'm lazy loading in my app.routes.ts.
Here is ...
- 1,286
2
votes
2
answers
105
views
Underline the selected navitem after open link in new tab
I have a navbar that the selected/active navitem is recognizable by an orange underline. However, when I open another navitem in a new tab (by rightclick), the default navitem is underlined and not ...
- 621
1
vote
1
answer
790
views
Angular 18: How to redirect on result of resolve
In Angular 18, I am trying to resolve a value before navigation, but redirect to another page based on that value.
Please don't link to a page titled "Redirecting Guards and Resolvers in Angular ...
- 103
1
vote
1
answer
49
views
The parent component will be activated only when the child route is activated
I want a route structure like this:
If I go to the "/sale" route:
dashboard
feature
sale
If I go to the "/" route:
dashboard
That is, if the child route is not activated, ...
- 21
1
vote
1
answer
242
views
How to add fade-in animation to Angular <router-outlet> on route change?
I have html component:
<section
class="flex flex-col w-full h-[100vh] overflow-hidden animate__animated animate__fadeIn"
>
<!-- Top navbar remains fixed at the top and does not ...
- 123
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
0
votes
1
answer
112
views
How properly subscribe to observable paramMap Angular?
I can get params from paramMap:
this.route.paramMap.subscribe((params: ParamMap) => {
this.templateService.get(+params.get("id")!).subscribe((response: Json | JsonError) => {
...
...
- 3,502
2
votes
3
answers
130
views
merge two ParamMap angular
I have the following code that works fine:
let urlParameters = combineLatest(
[this.route.params, this.route.queryParams], (params, queryParams) => ({
...params, ...queryParams
}));
...
- 3,502
1
vote
0
answers
94
views
Using RouterLink and State to pass an object from one component to another, after a refresh on the child component, it loses its class
https://stackblitz.com/edit/stackblitz-starters-cdffrt
The issue is after navigating to the person details component, if you refresh the page, this.person doesn't seem to know that it's a Person class,...
