Questions tagged [angular2-routing]
Angular Routing is a built-in feature that enables you to create a Single Page Application (SPA) user interface, where users can navigate to different views without having to reload the entire page from the server every time.
4,795
questions
0
votes
1
answer
12
views
Angular 2 Not redirecting to Dashboard
I have the below in my route:
const routes: Routes = [
{ path: '**', redirectTo: 'dashboard' },
{ path: '', component: DashboardComponent },
];
After logging in, I have a white screen until I ...
0
votes
0
answers
111
views
How do I use a CanActivateFn to hide a link?
I am using CanActivateFn rather than CanActivate to handle my routing authentication.
Here is my app-routing.module.ts:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@...
1
vote
0
answers
14
views
Is there a way to change angular routing component depending on the value of a routing parameter
I have the following route with a parameter:
RouterModule.forRoot({ path: 'record/:type', component: RecordComponent,
children: [{ path: 'edit/:id', component: ...
0
votes
2
answers
48
views
reload component/page without refreshing the entire page in angular
After a user has selected a file to upload, the file is only visible after a reload the entire page. I am looking for a neater way for the reload to happen so that I can display the document.
public ...
1
vote
1
answer
35
views
Angular not releasing components when using routing?
I have an app that uses routing to display various pages. I'm having some severe memory leak issues where the app will gradually (or rapidly!) gobble RAM until the browser quits.
I worked with another ...
1
vote
0
answers
30
views
SignalR upgrade from 3.1.5 to 6.0.11 in Angular causing navigation issues to 'result' component
I have a Microsoft SignalR service in my Angular project. Everything was working fine with SignalR version 3.1.5. However, after updating to version 6.0.11, I'm facing a peculiar issue. When a user ...
0
votes
2
answers
59
views
Angular 16 Route from Child to another Child Module
I want to route from a child to a completely different child in another lazy loaded module. I keep getting the error "Cannot match any routes - clients/client/clientreport"
This is my first ...
0
votes
2
answers
72
views
Angular unintentionally redirects to localhost:4200/#
When attempting to this.router.navigate(['newcard']); it correctly loads the URL but then immediately redirects to localhost:4200/#.
Here is how I'm redirecting from showcard to newcard.
<a href=&...
0
votes
0
answers
28
views
How to remove index.html in routing URL and resolve type error _angular_core__WEBPACK_IMPORTED_MODULE_0__.ɵcrt is not a function
I recently upgraded my project from angular 7 to angular 8. My project is a combination of angular JS and angular 8. After changing the routing way in the app-routing.module.ts from the #Modulename to ...
0
votes
0
answers
24
views
App Shell not generated when wildcard route (not found page) is presented in app
Yea, I'm struggling with the Angular app-shell as I have a wildcard in my app routes. My project is a standalone Angular project. How can we solve this?
app.config.server.ts file:
import { ...
1
vote
1
answer
201
views
Error While Running ANGULAR PROJECT , Tried using different versions of node using nvm but did not w
Angular version screenshot
$ ng serve
\ Generating browser application bundles (phase: building)...node:internal/crypto/hash:69
this[kHandle] = new _Hash(algorithm, xofLen);
^
...
0
votes
0
answers
3
views
Angular child using auxilary route
I have a component declared in TESTMODULE that I want to render a named auxilary route in the child component.html
The App.html has a router-outlet and I lazy load the component w/ specified module.
...
1
vote
1
answer
198
views
Angular -> NG04002: Cannot match any routes. URL Segment: 'edit'
Why when I click the edit button (blue icon with a pencil) I get an error:
Error: NG04002: Cannot match any routes. URL Segment: 'edit'
My repo:
https://github.com/RobotHabanera/august2023
I want the '...
0
votes
1
answer
45
views
Google redirect to a page like http://my-website.s3-website-eu-west-1.amazonaws.com/#/callback
I have an angular application that I upload to AWS S3, everything works fine with the login page, but when I authenticate with Google I redirect the authentication to http://my-website.s3-website-eu-...
0
votes
1
answer
39
views
How to show an uploaded image by user from one component to another component?
I am working on an Angular app with routing, where I have three components: app-createimage, app-page-builder, and app-page-editor. The flow is as follows: the user uploads an image using the app-...
0
votes
0
answers
40
views
shouldDetach method isn't firing when navigatin away from a route in Angular?
I'm trying to preserve a component (prevent default behavior of destroying it) when user navigates away to a different route, because I want to store all the data inside the forms that it contains. I'...
0
votes
0
answers
22
views
Ref of routeur-outlet return NG04012 error when trying to access to activatedRoute
I want to run an animation based on the path parameter of the route so to do that I need to my param id like that :
prepareRoute(outletRef: RouterOutlet) {
const id = outletRef.activatedRoute....
1
vote
1
answer
109
views
Angular router.navigate is causing the target component to render twice
I have a simple button for entering the app, in my HomeComponent, which simply does:
this.router.navigate(['/budget']);
This event causes the target component BudgetListComponent to be rendered twice!...
0
votes
0
answers
13
views
How to Access to path directly without passing by Root path in angular?
I have a confirmation path from backend
http://localhost:4200/newsletter/[email protected]/confirm?confirmationId=9c7f8645-9cb9-495f-a0df-f6a843944372
I need to access in this path from paste it in ...
0
votes
1
answer
32
views
angular routing with urls starting with # doesnt work
I want to create routing for angular 2 application with urls starting with #. However, angular redirects to the home page instead of the component. How can I fix this problem?
I used matcher, and it ...
0
votes
0
answers
132
views
My application freeze when use router.navigate
I try to return to the main page with
navigateToHome () {
this.router.navigate([''])
.then(() => {
window.location.reload();
});
}
html
<div class="toolbar">
&...
0
votes
0
answers
17
views
Invalid Url on Angular
On First Load, let's say http://localhost:6969/app/main/login
but when I try to change the browser url http://localhost:6969/app/main/register, it doesn't
redirect to http://localhost:6969/app/main/...
0
votes
0
answers
36
views
Angular FeatureModule should not import FeatureRoutingModule but it should be the opposite
I would like to know why angular by default declare module in the following manner.
First Option
@NgModule({
imports: [CommonModule, Feature1RoutingModule],
declarations: [Feature1Component],
...
0
votes
1
answer
285
views
Angular auth guard not redirecting when returning Promise<UrlTree>
I have created an auth guard for my /sign-in and /verify-email routes to only allow access to the users that are not logged in or havent verified their email:
export const signInGuard: CanActivateFn =...
0
votes
1
answer
60
views
Adding dynamic routes in angular?
The routes for a page are coming from the API in the following format:
[{
"name": "Contact",
"url": "/customers/contact",
"pages": [],
},
{...
0
votes
0
answers
70
views
Binding a number to angular routerLink is showing strange behaviour
In Angular v16, when binding a number to routerLink the expected behaviour is changed. Instead of routing to recipes/:id the url updated to recipes;0=1
PRE URL : localhost:4200/recipes
<!-- Here ...
0
votes
0
answers
150
views
angular 14 and node js websocket error ng cli was failed trying to reconnect
I am using the Angular 14 project front-end and Node.js as the server. I am getting these errors, but I didn't use websocket. I am trying to host the application on Apache 2 and getting these errors, ...
0
votes
0
answers
356
views
Standalone components in Angular doesn't load in router
Alright, today I tried to implement standalone components in my app. Just to investigate how it works. So on initial launch it's loading correctly. But, here is the thing.
Here I have a regular ...
0
votes
2
answers
196
views
Angular routing redirect to home when I use a good route for the first time
I really don't know what's happened, but read carefully here my problem to understand it.
NOTE : if you want to try and retry, use an INCOGNITO web page, and close it to retry
I have a site with some ...
2
votes
0
answers
43
views
Angular routing with multiple children
I have routing like this
path: '',
component: MainComponent,
children: [
{
path: '',
redirectTo: 'component1',
pathMatch: 'full',
},
{
...
0
votes
1
answer
158
views
ActivatedRouteSnapshot looses all values between Router Events
I have Angular 15 application and I want to integrate a router to it.
I've created Routing Module:
const routes: Routes = [ // for example
{path: "dashboard/:code", title: "...
0
votes
1
answer
277
views
Child component is loading under Parent component - Angular
I am trying to load child component in new page when button is clicked but instead it is loading below parent component.
app-routing.module.ts
const routes: Routes = [
{
path: '',
component: ...
0
votes
1
answer
258
views
Angular universal route on server side
Is it possible to route only on server side, so that the client already will receive the redirected route?
ngOnInit(): void {
// Only do this once when rendered by server
if (isPlatformServer(...
0
votes
2
answers
1k
views
Angular Routing not Working (Error: The Site Cannot Be Found)
After creating a new app in NX workspace, I am using two components at the moment. Homepage and Product List Page. When I try to create router links, the site displays the error that "Site Cannot ...
0
votes
0
answers
405
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
1
answer
124
views
Angular RouterLink breaks the whole Layout
I already built an Angular-App with ~8 Pages and fully functional Routing.
Now on another machine, I struggle to set up routing again and I don't see my error.
I activated routing when creating the ...
0
votes
1
answer
416
views
Angular adding new Module with routing doesn't work. But already existing Modules work
TL;DR In my case I needed to change the import order of modules in
AppComponent. I needed to import my SearchModule before
AppRoutingModule.
But a better way to solve it is to use
LazyLoading
and don'...
0
votes
1
answer
66
views
Angular dialog open causes query parameters being removed on newly loaded page
I think it has something to do with how the dialog is injected so it does not know about the component tree or the routing. Which I say it's good thing if it's the case.
But it's strange the URL (...
1
vote
2
answers
354
views
Angular 14: Not found errors on CSS and JS files when using Routing
I have the following child routing specified in the app-routing.module.ts file:
const routes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'register', component: ...
0
votes
1
answer
280
views
Why can I access an component in a sub module via multiple routes in Angular 15?
TLDR; I am learning Angular and prepending routes from a sub modules, makes the module available on its original url aswell as the url with the prefix.
Long:
I am learning Angular and I am trying to ...
0
votes
0
answers
19
views
Mobile app is not visible internal redirect Angular 2
There is a mobile application whose behavior depends on the built-in web application written in Angular 2. The mobile application does not see the internal redirects of Angular 2. In turn, I cannot ...
0
votes
0
answers
126
views
How to redirect to the Auth0 login page automatically, when the application URL is typed in the browser
To configure the application login URI in Auth0 for Single Page Application in angular. To redirect to the Auth0 login page automatically, when the application URL is typed in the browser. Instead of ...
0
votes
2
answers
333
views
Angular routing: Empty route path getting ignored
I have two modules; one which is named external-module and the other dashboard-module. External-module uses dashboard-module's Dashboard Control Component, hence it has to import that module.
Here's ...
0
votes
1
answer
44
views
chrome exits the angular app on clicking hardware backbutton
i have setup my route links like this
matches screen
http://localhost:4200/#/nav/matches
my profile
http://localhost:4200/#/nav/my-profile
edit profile
http://localhost:4200/#/nav/edit-profile
...
0
votes
0
answers
36
views
I get error on navigation from 2 different nested routes
Whenever I try to navigate from 2 different nested routes I get this error
Error
I am trying to logout from a portal
routing from (patient/dashboard) to (auth/login)
using the header component (shared ...
1
vote
0
answers
274
views
Nx Angular - 404 after refresh with PathLocationStrategy
I am working on creating an Nx monorepo workspace for Angular apps. I have a single sandbox app and am configuring routes for it.
My configuration is as follows:
app.module.ts
@NgModule({
...
0
votes
1
answer
51
views
Route Guard - observable
import { Injectable } from "@angular/core";
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from "rxjs";
...
0
votes
0
answers
31
views
Getting an error while trying to access the database POST Erorr 404 Angular
I GOT AN ERORR in Sigin() and Signup() I got my token but there is no red line and my API work too. I don't what's the problem
onLogin(){
if (this.loginForm.valid){
console.log(this.loginForm.value);
...
0
votes
2
answers
1k
views
I want to navigate to Another page after I click Login
I use .Net as back-end and now im working with angular for routing part i'm stuck in navagite to another page using authentication I supposed to use
navigate router after subscribe but I don't know ...
0
votes
2
answers
55
views
Routing the data from EF .NET Core 6 to Angular
I'm trying to get data from my ASP.NET Core 6 back-end to Angular and I run into a problem:
Error: NG0900: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
export class ...