Questions tagged [angular-routing]

I have developed a web application using node.js, express, angular (with routes), and mongo. The authentication process is handled by Passport.js. In my angular views, I make HTTP requests to interact with the server. For example, if I send a request of t ...

I recently implemented URL routing in my project, but I have encountered an issue. Upon redirecting to the home page, the URL changes to http://localhost:4200/home. However, I would like the URL for the home page to simply be http://localhost:4200/ instea ...

I prefer to use multiple routing modules to maintain a clean and readable application structure. Currently, I have implemented lazy loading for the SubComponent, but I am exploring alternatives to avoid this. Below is the functioning code in use: The foll ...

I have a link that looks like this http://localhost:4200/cr/hearings?UserID=61644&AppID=15&AppGroupID=118&SelectedCaseID=13585783&SelectedRoleID=0 The router module is set up to display content based on the above URL structure { path: & ...

During the course of a project, we encountered a situation where updating certain UI elements proved challenging. For instance, the navigation includes a counter showing pending activities due today. Whenever a user schedules an activity for later in the d ...

Looking for a method to retain a local variable not affected by path or angular app changes. Attempted using $window.localStorage.set and get item, rootScope, and $window.variable with no success. ...

I'm having trouble getting the routing and child routing to work in my simple navigation for an angular 6 app. I've configured everything correctly, but it just doesn't seem to be working. Here is the structure of my app: └───src ├─── ...

I am attempting to incorporate the initial child component into parent one, specifically placing "test1.html" within "test.html". Take a look at the HTML code below: test.html: <div ui-view></div> test1.html: <h1>First</h1> < ...

I've decided to revamp my Angular application based on John Papa's style guide (well, mostly) and my main focus is on improving modularity. The stumbling block I've encountered is with route resolves. So far, I've been using a global app variable to store ...

I have been working through the Angular Tour of Heroes Guide and encountered the section on the "default route". I decided to experiment by removing the pathMatch attribute from the Route associated with an empty string. Below is the code snippet in quest ...

In my unique Angular 2 application, I am facing a challenge with the layout. The home page has a completely different layout compared to the rest of the app, which only share a navigation bar. Here are some sample URLs: http://localhost:4200/ <= ...

I'm encountering difficulties with my Express+Jade+AngularJS[v1.2.22] application when attempting to access routes such as "mydomain.com/something/somethingelse" or "mydomain.com/something/another/last", which include one or more path subdivisions. The is ...

Organizational layout of projects: /app app.module.ts app.routing.ts : : /dashboardModule /manage-productModule manage-product.module.ts manage-product.routing.ts Within 'app.routing.ts' [ { path : '&a ...

I am currently working on a Java-based web application built using Spring MVC. My goal for this project is to integrate the AngularJS framework in order to achieve modular client-side code and separate my client side model from the view. In Spring MVC, we ...

Apologies for any language barriers, I have been following the guidance provided in the phoneCat app example. Specifically, I am working on integrating one category (phone list and detail partial templates) into my project. For instance, I aim to include ...

We are in the process of conceptualizing a cutting-edge angular 7 application featuring material design (md-tabs) with multiple tabs. Our goal is to enable dynamic tab creation, with each tab representing the content of a specific route. The home page sh ...

Just a heads up: I'm relatively new to Angular, so there's a possibility that my understanding might be off and therefore my question may not make sense. I've recently started working on an application that requires several intricate features. To keep thi ...

Is there a way to send the "data" to the home component only when redirected from an old path, and not from an empty path? const routes: Routes = [ {path : '', redirectTo:'home'}, {path : 'oldPath', redirectTo:&apo ...

I am currently working on incorporating a title service into my Angular 10 application. My goal is to subscribe to router events, access the activated route's component, check if it has a title() getter, and then use that information to set the page&a ...

Below is the anchor tag provided: <a class="uppercase" routerLink="settings/pressure" routerLinkActive="text-success" (click)="closeModal()" > <div class="pad-btm"> PRESSURE </div> </a> I need to include another route ...

After logging in on my login page, the dashboard component appears below the login page instead of redirecting as a new page. How can I achieve this in Angular 7? Any assistance would be greatly appreciated. Thank you! app.component.ts import { Component ...

I am trying to route to a state by using the complete URL with query parameters and then perform an action in the controller based on those query parameters. So far, everything works fine when I use a simple routing URL with variables like: "/load/:portNa ...

In my Ionic project, I am dealing with an AngularJS routes file that contains a large number of routes, approximately a hundred. The structure is similar to the one provided below. (function() { 'use strict'; angular.module('applicatio ...

I am setting up two different layouts, one for visitors and one for management. Routes: app.config(['$routeProvider', function ( $routeProvider) { $routeProvider .when('/', { templateUrl: 'Home/Main', }) ...

I am new to Angular and struggling with an issue. Despite reading numerous similar questions and answers related to AJAX, async programming, my problem remains unsolved. When I click on the 'Details' button to view product details, the routing wo ...

Currently, I am in the process of developing a single page application using Angular 2. Within this project, I have implemented angular material mat-sidenav and mat-toolbar components. The toolbar includes a sidenav toggle button, as well as buttons that a ...

Is it possible to display a different component in Angular routing based on a condition in the Routing file? For example, if mineType is equal to "mino", can I navigate to another component instead of the one declared in the Routing? Should I use Child ro ...

In my CRM module, I have created a custom Routing Module like this: const routes: Routes = [ { path: 'crm', component: CrmComponent, children: [ { path: '', redirectTo: 'companies', pathMatch: 'full&ap ...

When navigating through my routes, I encountered an issue with the following routing setup: const routes: Routes = [ { path: '', component : HomeComponent, children: [] }, { path: 'login', children: [ ...

Currently in my Angular app (Angular v4), I'm working on developing a breadcrumb module. After coming across this insightful question on Stack Overflow, I learned about storing breadcrumb information in the router's data property as shown below: ...

In my project, I have implemented the side-nav component for routing between different components. Here is how it looks: https://i.stack.imgur.com/v6hE8.png However, I am currently facing an issue with the side-nav. On mobile devices, the side-nav appear ...

Why would I even consider complaining about this? You’re already here, aren’t you? I have a couple of reasons why a reload needs to happen, but for now I’ll just mention one. 1) When my user clicks on a link, they may not realize it's the same ...

I am currently working on a project involving a nodejs application with angular. I have come across some scenarios that are causing confusion for me. Can anyone provide guidance on the best practices to handle the following situations? Regarding route: ...

I am currently working on an Angular 6 project with JWT authorization deployed on AWS Elastic Beanstalk and utilizing CloudFront. I am using the @auth0/angular-jwt library to manage everything efficiently. The setup is functioning smoothly, and I have a li ...

I am currently working on implementing dynamic routing functionality in my Angular application. So far, I have successfully achieved the following functionalities: Addition of routing to an existing angular component based on user input Removal of routin ...

I am currently trying to integrate the canDeActivate and canActivate functions in my Angular 4 project. However, I seem to be encountering a no provider error. Can someone please guide me on what might be wrong with my implementation or suggest a cleaner a ...

After implementing the built-in function from Twitter docs into ngAfterViewInit function, my app works flawlessly. However, I encountered an issue where the widget disappears when switching routes. Here is the code that only functions on the initial page ...

I am in the process of developing an Angular 7 application that features nested routes. My goal is to identify the specific component being used by the parent route. While I have managed to achieve this locally, the method fails in a production environment ...

I am currently working on an Angular project that involves Angular routing. The code snippet below is extracted from my app-routing.module.ts file: // app-routing.module.ts: import { NgModule } from '@angular/core'; import { ActivatedRoute, Route ...

I'm currently working on a simple task to manage user roles within routes. The goal is straightforward: Verify the role of the logged-in user on each route (using a resolve function to authenticate the user based on token or login credentials) Direc ...

I am facing a straightforward problem while attempting to access an asynchronous property in my template - the returned value is consistently null. This is the method I am using: someAsyncProperty():Observable<string> { return this._router.event ...

Within my angular app-file, I am configuring the routing as follows: (function() { var app = angular.module("CustCMS", ["ngRoute"]); app.config(function ($routeProvider) { $routeProvider .when("/Index", { templateUrl: "~/CustCMS/V ...

I'm new to the AngularJS scene and I've encountered a challenge. My goal is to have the selected tab change dynamically based on the URL changes. Here's my JavaScript code: app.config(function($routeProvider, $locationProvider){ $rou ...

Within my sidebar navigation component, the sidebar.component.html file is structured as follows: <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav"> <a class="navbar-brand" href="#page-top"> <span cl ...

I operate a factory where I utilize a function called getExpenseList that performs an ajax call to fetch data from the expense table. Currently, I have two routes set up - one for listing expenses and another for adding new expenses. However, whenever I n ...

Just dipping my toes into the world of AngularJS and feeling a bit lost. I'm on a mission to discover how to determine when a view has finished rendering its template. I've tried countless suggestions from all over the internet, but nothing seems to work. ...

I have the following route provider setup: $routeProvider .when('/', { templateUrl: '/slapppoc/Style Library/TAC/Views/tarification/home.html', controller: 'homeController' /* resolve: { // This function will be called before ...

Within our main app.component routing, we have the following setup: { path: 'store', loadChildren: './store/store.module#StoreModule', canActivate: [LoginGuard] }, Then, in the module, our routes are defined as follows: const routes: Routes = [ { pat ...

In my Angular (v13) application, I have defined a resolver to interact with a Wordpress backend. The purpose of this resolver is to determine the post type and ID from Wordpress when a user accesses a URL, and then route accordingly (to a post list, single ...

I am currently working on an Angular 15 application that has 2 levels of routing: Primary (router-outlet defined in AppComponent) and Person (router-outlet defined in PersonMainComponent). Everything seems to be working fine, except for when I click a link ...

I am facing an issue with a URL that needs to be opened in a new tab. Unfortunately, Angular generates this URL without the # symbol. Currently, we have implemented the following: <!-- HTML --> <a title="Edit" [routerLink] = "['/object/objec ...

I am currently experimenting with nested routing while utilizing a named router-outlet for managing the routing in my side-bar navigation. Within my main module, I have loaded the nav-component which contains a named router-outlet within its template: &l ...

Embarking on a new SPA journey, my tech stack includes: Back-end: NodeJS + Express Front-end: Angular + Angular-route. Twitter Bootstrap Underscore Having followed many tutorials with similar stacks, my project files are structured as follows: pac ...

Hello there, I am facing a simple problem. I have 2 components navigating to 1 component and in that one component, I need to distinguish which component the navigation came from so I can take appropriate action (such as refreshing a list). The issue is t ...

I am currently developing a custom file viewer. To achieve this, I have created a specialized component known as FileBrowserComponent that is specifically designed to be displayed when the route /files is accessed. When navigating, I include a query param ...

How can I prevent my initial component from being loaded twice in Angular? I am trying to implement a default/empty component to avoid the AppComponent being loaded within itself. The empty component would serve as the starting point for loading other comp ...

My route provider setup looks like this: app.config(function ($routeProvider, $locationProvider){ $locationProvider.hashPrefix(''); $routeProvider .when('/', { templateUrl: 'login.html', controller: 'loginCtrl' }) .when('/home', { resolve:{ ...

I have been attempting to update my NativeScript application, and I am facing challenges with the new routing system introduced in the latest Angular upgrade. In my package.json file, my dependency was: "@angular/router": "3.0.0-beta.2" After the upg ...

During a recent project, I encountered an issue with the URL functioning differently after some changes. Originally, when working locally, the URL worked fine by going to localhost:9000/ However, now the URL becomes http://localhost:9000/#/ After ...

After upgrading to Angular 15, I encountered an issue with the redirect functionality. The error message points out a double slash "//" in my code, but upon inspection, I couldn't find any such occurrence. * * PagesRoutingModule: const routes: Routes ...

Exploring the best approach for managing dynamic content within an angular application has been my recent focus. Currently, I have an array containing phone numbers and aim to organize them based on their respective countries. For instance, all German phon ...

Allow the user to choose an option that influences the controller's dependencies. When the user changes this option, I would like to refresh the route while still executing the resolve section of $routeProvider. Using $route.reload() only refreshes t ...

After successfully incorporating lazy loading into my Angular application, I noticed that when I switch pages, the previously loaded page reverts back to its initial state (ngOnInit being triggered again). { path: '/posts', loadChildren: () => ...

I've encountered an issue while sending an email with an invitation link. The link provided in the email is myapp.com/#/invitation/J5QSXr9/token/J6ixelV3. However, when I click on it, it automatically redirects to my default page myapp.com/#/login, wh ...

As a newcomer to the world of Angular, I am seeking guidance on a specific issue. I have encountered a one-to-many relationship scenario where one Category can have multiple Product items. The challenge lies in my layout page setup where I display various ...

I'm facing an issue with my routing module where I have successfully used activatedRoute for multiple other modules but now running into trouble when implementing it in a new singular component. The structure of my routing module is as follows: const rout ...

I have encountered a frustrating issue with AngularJS routing and despite countless searches for solutions, I am still facing the same problem. In my root folder at c:intepubwwwrootangular, I have three files that I am testing under IIS. When I try to ...

I currently have an Angular2 active guard in place to handle redirection to the login page if the user is not logged in: import { Injectable } from "@angular/core"; import { CanActivate , ActivatedRouteSnapshot, RouterStateSnapshot, Router} from ...

I need to reinitialize the mat-tab-group in order to make the first tab active when there is a change in the routeParams. ts file: public index = 0; ngOnInit() { this.subscription = this.route.params.subscribe((routeParams: Params) => { // some ...

I needed to find out the current route's path name and discovered this simple solution. this.route.snapshot.firstChild.url[0].path Is there a more efficient method for achieving this? Appreciate any advice! ...

How can I modify a parameter in the URL without altering the overall address? https://i.stack.imgur.com/LOd4T.png This is the TypeScript code that I currently have: onRowClicked(event: any) { let currentIdPerson = event.data.IdPerson; } I am trying ...

In my application built with Angular 5, this is how my app.module.ts file looks like. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { For ...