Questions tagged [angular-ui-router]
UI-Router evolves the concept of an AngularJS Route into a more general concept of a State for managing complex application UI states. Most notably, it allows nested state/view hierarchies and multiple named views.
10,379
questions
0
votes
0
answers
19
views
Angular router: Skipping loading parent route if routerLink is clicked from a nested route
I have a page with tabs, each tab is loaded according to a route:
<div class="tabs-container">
<div class="tab-button" [routerLink]="'history'" [...
0
votes
1
answer
46
views
Angular router: named router-outlet
I am trying to implement a named outlet. Basically, it works, but the URL in the address bar would look like this:
https://localhost/project/19/(projectEditorRouter:project-details)
So, refreshing ...
1
vote
1
answer
37
views
Angular : Routes access restrictions for Logged users
I Need to restrict the logged in user from accessing all the routes when the user is forced to change password after its expiry.
The user should not be able to manipulate the URL in the address bar ...
0
votes
0
answers
11
views
My angular production-level project on refresh shows 401 then 200 simultaneously when i reload "my-subscription" page
The project is running client-side(csr) and server-side(ssr) on the same time, when i am logged in then visit my-subscription page, reload the page it redirects me to login form but immediately ...
0
votes
0
answers
21
views
Angular routerLinkActive not working when we open a route on a new window
I have a sidenav with 3 list elements. one of the route will be opened in the angular app and rest 2 routes will be opened on a new browser window.
Angular router is working for the route opened with ...
0
votes
1
answer
45
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. ...
0
votes
1
answer
15
views
How to affect html elements in component
I have navbar component and in this nav component I have login and registration button. I have used this navbar component in different pages. When I click the login button in navbar I want to appear ...
0
votes
1
answer
28
views
In Angular, Is there a way to load the markup around the router-outlet without waiting for guards to resolve on first load?
In our Angular 12 app, We have guards that run checks via API calls to the backend to ensure the user has all permissions to view the requested route. The way guards work out of the box uses an all-or-...
0
votes
1
answer
13
views
How I preload a state in angularjs uirouter without navigating to it?
I'm working on an application in angularjs with multiple pages using uirouter.
After loading the page belonging to the current state, I wish to preload the other pages on the background, so that when ...
1
vote
1
answer
133
views
Getting this 404 error in angular application when page first time loads or when page refresh
When Page first time load or refresh then this error will generate in console with current url.
This error will generate in development server but not generate in localhost.
enter image description ...
0
votes
1
answer
35
views
Replace /app route with /web in angular app
I want to replace /app route with something else (say, /web) in my angular app.
For example -
I have the following URL that works as of now -
www.example.com/app/dashboard
I want to replace /app with /...
0
votes
1
answer
36
views
angular - using plus in path
How to make it so that in Angular, you can use the plus sign in the path.
For example: http://localhost:4200/how+to+do
Instead, angular changes plus to %2B
For example: http://localhost:4200/how%2Bto%...
0
votes
0
answers
29
views
How to Route to another component in same mat dialog
How to Route to another component in same mat dialog.
Image:-1 after putting values
The same mat dialog should open the another component window.
Image:-2
The window to be navigated is coming in ...
0
votes
1
answer
34
views
(Angular app) Copy current page url to mongodb
In my Angular project I am figuring out a method to directly copy current page url and send it into mongodb
Url is this. any suggestion will be appreciated
http://localhost:4201/contact?pincode=4343&...
0
votes
1
answer
132
views
angular 15 when router navigates away from lazy module, last component is still visible
I have an angular 15 app that is displaying a very strange behavior.
I have a lazy loaded module with routes called records.
If I navigate to any route within this "records" module and then ...
0
votes
0
answers
23
views
Angular 12 Page rendering issues
I am in process of migrating from Angular version 11 to 12, One version at a time. I am on version 12 of angular and cannot render the page. I saw many article regarding routing issue with 12.Can ...
0
votes
0
answers
16
views
Angular - Re-Trigger router guard
I have an angular app. There I have a route ('home') protected by a routeGuard.
I locally save the username and hash(password) if the user has signed in once and on app load I fetch them and initiate ...
0
votes
0
answers
34
views
Data communication between Interceptor and component to handle global error handling banner
I have below scenario, each component have different type of API post call on tab change.
Component A, Tab A
first name AA
Component B, Tab B
first name BB
Added global error handling component ...
1
vote
1
answer
279
views
How to subscribe to ActivatedRoute change event and get URL and params from it?
I'm trying to clear input text by pressing buttons which send routing event. So, if I'm getting specific route and no parameters (see green buttons on screen below), then text box should be cleared. ...
0
votes
0
answers
27
views
I want to create angular Chrome Extension Multi Page
So I want to create such type of extension but the problem after ng build is I can't open new page from the popup, because I have only 1 html file index.html. But I need to have another angular html ...
0
votes
0
answers
14
views
Working angular 14 with Material, mat-menu is failing to find Page
This is a working application. I added module Administration - new users etc.
Navbar Administration dropdown for NewUser html:
<div class="btn-group ml-3" style="margin-left: ...
0
votes
0
answers
38
views
All url with same prefix should load a particular component in angular-hybrid router
In a hybrid (AngularJs + Angular) angular application, I want to load a component (say ExampleComponent) if the URL prefix starts with /test. Let's say, I want to load the ExampleComponent each time ...
0
votes
4
answers
222
views
How to do two API calls in angular for same component
How to make two different api calls for same angular component for example In a page I’m rendering order component twice in tabular manager using ngif condition to display different data.I have TAB1 &...
1
vote
1
answer
197
views
Angular display error banner after API error on all pages throughout the application
I have many components in angular and I am trying to display static error banner on all pages in case of GET API error related with that component.
Through Interceptor I am able to get the API error ...
0
votes
0
answers
59
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 ...
1
vote
1
answer
34
views
Angular Home Page Component routing issue
I have 2 components in angular
Webpage
Registeration Form
The routes should be like
localhost:4200 - Home Component
localhost:4200/register - Registeration Component
But in router modules nothing ...
0
votes
0
answers
80
views
Angular 14: Problem with routing to child route
In my Angular 14 application I have tree on the left side which contains buildings and persons inside these buildings.
+ Building 1
- Person 1
- Person 2
- Person 3
+ ...
0
votes
1
answer
42
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
0
answers
42
views
An Angular problem with fetching data from firebase [undefined]
The problem is I can't fetch my firebase data to angular component.I am using firebase, which I am fetching works correctly I tried to fetch it by a lot of ways:
My ViewStudentComponent component:
...
0
votes
1
answer
25
views
route changes address but doesn't do anything
Here are my routes.
export const routes: Routes = [
{ path: 'signin-callback', component: SigninCallbackComponent },
{
path: '',
component: DatasetListComponent,
children: [
{
...
0
votes
1
answer
171
views
In lazy loading page is not loading till i click on the content of the page in angular 14
Hi Friends i had struct in this issue from past so many days below is my project structure the problem is that the page is not loading till i click on the website could anybody please help me out ?
my ...
0
votes
1
answer
81
views
Angular 13 Hightchart not loading in different tabs
when page loaded(Home page), the highcharts are loading correctly. After changing tabs or components and then pressing back to the previous tab or component(Home page) , the highcharts doesn't ...
0
votes
0
answers
20
views
stateNotFound returned when I fire $state.go from an iframe and inside a promise child to parent
State UI router is not working inside a promise and after being triggered from an iframe .
//https://www.codeproject.com/Tips/585663/Communication-with-Cross-Domain-IFrame-A-Cross-Bro
// Here &...
0
votes
1
answer
48
views
Angular routing back to same URL
Hi I'm in the URL http://localhost:4200/dsc-ui/message, now usecase is I should be able to navigate to particular url by typing route manually in the address bar.
So I need to navigate it to http://...
0
votes
2
answers
301
views
Angular check if particular route path in URL
http://localhost:4200/dsc-ui/#message and if I type in the URL (remove #message and type application-management)
http://localhost:4200/dsc-ui/application-management (/application-management), it ...
0
votes
1
answer
72
views
UI Router loading route but not component - Upgrade issue
So we've been using Angular UI router for a while since we were running hybrid with AngularJS
And now that i'm finally at the point to remove AngularJS, i'm moving the 'error' and 'auth' pages towards ...
0
votes
1
answer
91
views
I am trying to redirect after logining in angular. "Argument of type 'string | null' is not assignable to parameter of type 'string | UrlTree'."
here is my auth.service.ts
import { Injectable } from "@angular/core";
import { GoogleAuthProvider } from 'firebase/auth';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import ...
0
votes
0
answers
24
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
505
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 ...
1
vote
0
answers
17
views
After Writing in the constructor parameter the router linkstop working
follow is my code, if I emty the construction parameter thecode will work.but Likethis router linkwill not work.
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth....
6
votes
2
answers
811
views
Router getCurrentNavigation always returns null only after upgrading to angular 15
this problem appeared only after upgrading to angular 15,
I am passing a state property to the router but this.router.getCurrentNavigation() is returning a null value, that has been passed by router....
0
votes
1
answer
21
views
Angular: call a function of component A when the state of the routed component B has been changed
The following image can help to understand what I'm going to do.
Image that shows the scenario
I have ngFor directive, in the component A, for which I route a component B binding the i-th object as ...
0
votes
2
answers
45
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 ...
0
votes
0
answers
245
views
RangeError: Maximum call stack size exceeded, when router hits for the second time
Getting below exception for the router navigation when click for the second time, however there is no error for the first time click to same routerlink.
Also, when I enter url directly in the browser ...
0
votes
0
answers
39
views
Angular custom libraries and ui-router-config
I am having trouble setting up an angular application which consumes two custom angular-libraries (which contain many components/services/configs which we moved there because we want to migrate to ...
0
votes
0
answers
20
views
How do I make a directive setting the query parameters?
I have the following line in the template
<a [routerLink]="['page1', 'foo']" [queryParams]="{'q1': '123456'}" routerLinkActive="active">Page1</a>
Here the ...
-1
votes
2
answers
49
views
Angular lazy routes children aren't being found
I just started working on learning angular routes with lazy loading and loading components in auxiliary router-outlets. Initially working with /(aux-name:path) to add to the auxiliary route. This ...
0
votes
0
answers
17
views
Allow multiple slashes in an AngularJS parameter
I have a URL like this: https://example.com/display/this/is/a/single/parameter
I want this/is/a/single/parameter to be treated as a single parameter. The path is /display/.
export default function ...
0
votes
0
answers
69
views
Angular - Migration to libraries - How to handle states
we are currently trying to refactor our Angular-Application, a portal for either employees or employers, to use multiple custom libraries, to get rid of code duplication. Out current structure is as ...
-1
votes
2
answers
168
views
Angular: Avoid DOM injection
I have an angular application with multiple sub apps, which were built in angular too. I host the main application and it has tabs in it. The sub applications get loaded inside the iframe of the main ...