Questions tagged [angular-routing]
The ngRoute module provides routing and deeplinking services and directives for AngularJS apps.
3,578
questions
0
votes
1
answer
16
views
Angular: Why is Child Route Loading Into Parent Outlet
I have an Angular 15 application with 2 levels of routing: Primary (router-outlet defined in AppComponent) and Person (router-outlet defined in PersonMainComponent). The default component (...
0
votes
1
answer
22
views
Problem while trying to do routing in Angular
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{path: 'login', component: LoginComponent},
{path:'forget-password', ...
2
votes
0
answers
38
views
Angular Routes, Redirects and Guards
Introduction
In my project I have a setup where I have two routes, route A and route B.
Both of these routes have guards which implement CanActivate interface.
routes code look something like this:
...
0
votes
0
answers
9
views
Router does not provide a valid path in APP_INITIALIZER
I use APP_INITIALIZER for automatic authentication (OAuth2) on the site. On entering the site, if the user is not authenticated then I redirect them to the Identity Server page with information on ...
-2
votes
1
answer
25
views
Angular Router navigate not firing ngOninit
I'm encountering an issue where the ngOnInit is not firing when returning to a page using the Angular router navigate.
//this fires and goes to the /test/parent-route
this.router.navigate(['/test/...
0
votes
1
answer
27
views
Angular Routing - Redirect on Empty No `pathMatch`
I am following the Angular Tour of Heroes Guide. I have stumbled upon the "default route" section and decided to try getting rid of the pathMatch attribute of the Route corresponding to the ...
0
votes
0
answers
14
views
SEO and Angular Translation using ngx-translate
I'm wondering how SEO is working for translated webpages from Angular app. I can see sometimes that when the translate call makes few time to retrieve the translation, the translation code are ...
0
votes
1
answer
21
views
Angular 14 routes, add Dynamic loadComponent import url with variable
USing angular 14 standalone concept I am looking to implement dynamic routing which will load component for respective customer from path
loadComponent: () => {
const abc:string = 'customer1';
...
0
votes
0
answers
14
views
Why is my sign-In state is not synced in AuthGuard
I'm working on an Angular app that uses Google OAuth. In my route module, I set up AuthGuard to protect some of the routes so users cannot access these pages if they are not signed in. Once they ...
0
votes
0
answers
35
views
Password Reset Route Angular
I have an angular project that hits a url and send an email to a user email.
Everything works fine and it sends the email containing the url - http://127.0.0.1:4200/auth/password-reset/Mg/bkub0k-...
0
votes
0
answers
23
views
PWA + redirection in routes cause 404 error
I have a simple app with routing functionality which has a redirection:
const routes: Routes = [
{
path: '',
redirectTo: 'orders',
pathMatch: 'full'
},
{
path: 'orders',
...
0
votes
0
answers
18
views
How to avoid template from getting repeated or stuck in angular during component Interaction?
I am working on an angular15 project. I am trying to understand @Input decorator but my template is getting stuck .
// file 1 app.component.html
<router-outlet></router-outlet>
<app-...
0
votes
0
answers
25
views
[Angular Application]: Navigate to another Page and Scroll to a particular section
We can add a anchor element with id and by pasting the id as fragment in the link it will scroll to that section.
But the challenge here is, If we add fragment and anchor present in same page it is ...
0
votes
0
answers
12
views
Implement routing(nested) with lazy loading
In app-routing.module.ts
{
path: '',
canActivate: [AuthGuardService],
loadChildren: () => import('../app/appeals/appeals.module').then((mod) => mod.AppealsModule),
},
{
...
0
votes
0
answers
19
views
Invalid URL and routing to default URL
I am using angular for my website. When user enters wrong url, how to redirect to our home page. I have been using wildcard routing also. It works when user give wrong url like www.wename.com/test But ...
0
votes
0
answers
15
views
Disabling navigation for whole feature module in Angular feature-module base application
Hello Stack Community,
The scenario is following:
Angular app contains of several feature modules. Those modules provides their RouterModule.forChild(roues) to define their internal routing and are ...
1
vote
0
answers
17
views
Angular lazy loading of components in dynamic routes
Problem
I have an Content Management System Angular application where all components are present in main component. Routes are created dynamically for this components (at runtime).
E.g. a page is ...
1
vote
1
answer
19
views
Angular : Navigating in auxiliary router
I have an app with auxiliary router and some nested routes in it.
If I remove navigation to my auxiliary router from my main routes it works fine.
If I do this from a nested route in my auxiliary ...
0
votes
1
answer
30
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? ...
0
votes
0
answers
11
views
Load Angular pages into different Angular Material TAB Page
Dear All,
Is it posible to load Angular pages to different material tabs with router?
I am going to keep "n" pages open at the same time.
mat-tab-nav-bar is not good form me, because it ...
0
votes
0
answers
22
views
In Angular not able to see URL path in browser , but routing works
I have an angular application , where the routing is using hash based location strategy and useHash is also set to true , in development mode the URL routes come up in browser but in production mode ...
1
vote
0
answers
20
views
OpenShift and Angular deployment on Nginx
I am trying to do a deployment of an Angular 15 app hosted on Nginx on OpenShift with a route like this www.example.com and it works fine but when it's not in root (www.example.com/myApp) the app ...
1
vote
2
answers
28
views
Nav links not showing (bootstrap, angular)
I tried using routerLinkActive and routerLink for my nav links and it affects the display of the navigation links.
=====app.component.html======
<app-navbar></app-navbar>
<div class=&...
0
votes
1
answer
24
views
Angular 13 routing: Static with Resolved Data does not work
After migration to angular 13, I get this routing errors:
error TS2339: Property 'myParam' does not exist on type 'Data'.
this.activatedRoute.data.subscribe(({ myParam, operation }) => {
const ...
0
votes
2
answers
28
views
Angular: Prevent URL without param using a guard
I want to avoid user change the URL from /dashboard/1234-12 to /dashboard to prevent an error, so I want to redirect to /home when user type /dashboard without the id.
I have this route:
{
path: '...
0
votes
0
answers
13
views
Is it possible to get runGuardsAndResolvers: "always" to apply to only one resolver and not the rest?
Here's my component:
{
path:"aaaa",
component: aaaa,
data: {
message: "this is aaaa"
},
resolve: {
setDraftResolver: SetDraftResolver, // I want ...
0
votes
0
answers
54
views
How to select the correct element in a PrimeNg Listbox when the page get refreshed
I'm using a PrimeNg ListBox for one level of our app:
<p-listbox [options]="items" optionLabel="label" [(ngModel)]="selectedItem">
<ng-template let-item ...
0
votes
0
answers
95
views
Angular 15: 'router-outlet' is not a known element:
I'm on learning angular and I wrote a angular project has file structure:
File structure of angular project
app-routing.module.ts:
import { NgModule } from '@angular/core';
import { RouterModule, ...
0
votes
3
answers
50
views
Angular Modular Routing with '**' no matching route
To have the n each separete sub-module with routes.forchild is a great methode to modulrize the applikation, fine. But how to handle all not matching urls? If I implement into the main (boottrap) ...
0
votes
0
answers
30
views
Angular Routing with child routes in separate modules and no matching path
For modularisation, I have split the app in differ folders and each folder has a own xxx.module.ts.
All this xxx.module were importet into the app.module.ts (boottrap moduke) by
@NgModule({
...
0
votes
1
answer
161
views
Angular Inject() function doesn't provide router to CanActivateFn
I am trying to use one of the Angular v14 features which is CanActivateFn.
Unfortunately, when my guard is executed and the statement in return is false, I am not getting redirected. Error is being ...
0
votes
1
answer
20
views
Appending parameter by default to every route by default
In my angular application, the route is defined below.
const routes: Routes = [
{
path: ':lang',
children:
[
{ path: 'home', component: HomeComponent },
{ path: '...
0
votes
1
answer
33
views
How do you combine a pathless route with a fallback route?
I want to combine a pathless route and a fallback route in Angular alongside some normal routes
What I mean by a pathless route is the "home" component of the app which is reached without a ...
0
votes
1
answer
22
views
Do .ts (Typescript) file methods cause problems with routing in Angular?
I have added multiple components in my Angular app including a registration component which allows users to register themselves; there was no issue with the frontend part until I added the methods for ...
0
votes
2
answers
63
views
Routing to a module
Disclaimer: This is my first time programming in angular and it's quite possible that this is a misconception and therefore my question is invalid
I've started to write an app that is supposed to get ...
0
votes
2
answers
57
views
Angular Routing: correct way of redirecting to 404 page for nested routes
In my Angular application every feature has their own feature-routing.module.ts, and then feature.module.tsis imported to app.module.ts. It is actually directing to not-found page, but it is not ...
0
votes
0
answers
4
views
I don't see the query strings in the route after defining them in routerlink in Angular
I'm defining this route
<a class='nav-link' [routerLink]="['/ofertas']" [queryParams]="{Todas:'No'}">Ofertas</a>
But I see this
That is, I see http://localhost/...
1
vote
0
answers
18
views
Aliasing a service lazy loaded from a module
If I define a Route in my AppModule to alias a provider that is included in the module, like so:
{
path: "my-path",
loadComponent: () => import('./my-component'),
providers: [
{
...
0
votes
0
answers
45
views
Angular route with segment variables not reloading the child component when the url changes dynamically
Angular route with segment variables not reloading the child component when the url changes dynamically.
I am trying to have both the parentRoute and the childRoute inside one component and whenver i ...
0
votes
0
answers
23
views
Instant Redirect User to Homepage, if he is authenticated (Angular and Firestore)
I want to redirect the user automatic to the Home Page (Tabs/Tab1).
In my case it is going to the Login (Login) Page and then navigate to the HomePage (Tabs/Tab1)
My Routing Module:
import { NgModule }...
0
votes
1
answer
32
views
Dynamically Assign Routes in ngModule of app.routing.module.ts
I have a couple of routes I need to remove based on a flag from a service file. I am not able to set the routes dynamically...Here is what I have tried so far.
My app.routing.module.ts
const ...
1
vote
1
answer
64
views
Angular router causing issues
Edit:
I have uploaded the project to StackBlitz
https://stackblitz.com/edit/angular-ivy-kfyhcp?file=src/app/chat-view/chat-view.component.ts
Through more testing I found out that the issue is being ...
0
votes
1
answer
28
views
Set the routerlink value dynamically after click using HostListener
In the Angular application, there is a grid in which the first column is Name, and the routerLink value is decided based on the runtime API call and its return type. Shown below:
<tr *ngFor="...
0
votes
1
answer
60
views
Angular pass route to lazy loaded module
i have a app-routing.module where at specified path i lazyload another module.
{
path: 'ROUTE1',
loadChildren: () => import('../modules/modulename/modulename.module').then((val) =&...
0
votes
0
answers
59
views
Lost child routes on refresh/reload - Angular
When a refresh/reload occurs I lose the path of the child route and return to the default lazyloads path
In the app-routing.module I have implemented the "dashboard" path that loads the ...
0
votes
0
answers
14
views
Angular/Ionic. Error: Cannot match any routes
Here is an example of my routes in the app-routing.module.ts file:
const routes: Routes = [
{
path: "onboarding-intro",
loadChildren: () =>
import("./pages/onboarding-...
1
vote
2
answers
81
views
Cannot match any routes. URL Segment: 'auth/login'
I'm new to Angular, and I've been dealing with the routing of my first project. I'm having trouble once I try to access my login page and I come across the error Cannot match any routes. URL Segment: '...
2
votes
1
answer
115
views
Angular - How to change the url in without modifying the history
I would like to change the url of my page, but without changing the angular history state nor reloading the page.
Is this somehow possible ?
Already tried
Method
no history changes
not reloading
...
1
vote
2
answers
44
views
Angular Routing Invalid URL Segment
In my main Routing File
RouterModule.forRoot([
{
path: '', component: AppMainComponent,
children: [
{path: '', component: DashboardComponent},
...
0
votes
0
answers
16
views
After connecting to a Google account (with the help of firebase), routing to another component does not work for me (I am dealing with Angular)
After logging in to a Google account (by using firebase) automatic routing to another component does not work for me and I remain in the same component that I was in before logging in.
I wrote routes ...