Angular 16's platform-driven redirection functionality

I'm facing a challenge with my module that has its own subrouting. The page only consists of a header and material tabs linked to my routing, with the need for the landing tab to differ between desktop and mobile.

To handle platform detection, I have a ToolService with a method called ToolService.isDesktopOrTablet() which I typically use.

Prior to wanting the redirectTo to point to 'list' instead of 'tree' on mobile, my routing module was structured like this:

insert modified code here

My initial attempt involved using a class-based guard, but I discovered that Angular 15 deprecated them in favor of functional guards.

Next, I tried a functional guard but encountered a warning about canActivate conflicting with redirectTo since redirects are processed ahead of guards.

So, I turned to another solution - a resolver:

insert modified code here

Although no error is triggered by this approach, it also doesn't seem to have any effect. When I navigate to the main route, the app remains on the '' route without redirecting as if the resolver wasn't executed. This leads me to these questions:

  1. Is there an issue with my resolver?
  2. Is a resolver suitable for this task?
  3. If so, what am I missing?
  4. If not, what alternative should I consider? Should I have persevered with guards?
angulartypescriptroutesangular2-routing

Answer №1

If I had to make a choice, I'd opt for using a CanActivateFn guard.

function canAccess() {
   const router = inject(Router)
   if(isMobile) {
     return router.createUrlTree(['list']);
   } else {
     return true
   }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble installing the gecko driver for running protractor test scripts on Firefox browser

Looking to expand my skills with the "Protractor tool", I've successfully run test scripts in the "Chrome" browser. Now, I'm ready to tackle running tests in "Firefox," but I know I need to install the "gecko driver." Can anyone guide me on how t ...

node.jstypescriptnpmjasmineprotractor

What is the most efficient way to iterate through an array to push properties into an object nested within another array?

I have been working on a small Angular application that functions as a scheduler, allowing users to input a Name, Start and End dates, and toggle a boolean checkbox through a form. One challenge I am facing is trying to assign the names entered by each use ...

javascriptarraysnode.jsangulartypescript

Managing Scroll Behavior in Ionic

I'm in the process of developing a quiz application using Ionic and Angular. My goal is to display one card at a time, similar to how Instagram and Facebook do it. This means that as users scroll down the app, only one card should be visible on their ...

angularionic-framework

ReactJS: error occurs when trying to fetch data and encountering issues with reading properties

I am currently attempting to initiate an API call (a GET request) in order to download a document. However, I am encountering an error when making the API call: TypeError: Cannot read properties of undefined (reading 'payload') const printPin ...

javascriptreactjstypescript

Ordering an array in Angular 2: A step-by-step guide

I am working on an Ionic 2 app with an older version of AngularJS that does not have the orderby pipe by default. As a result, I have an array structured like this: <div *ngFor="let boatBooking of boatBookings" style="padding: 0px; margin:0px;"> ...

angularionic2angularfire2

Having trouble with installing angular-cli

angular-cli unexpectedly quits while trying installing: (myapp)vagrant@myapp-local:/vagrant$ sudo npm install -g angular-cli npm WARN deprecated <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="caadb8aba9afacbfa6e7acb98afbe4f8e4 ...

angularjsangularnpmangular-cli

Developing a unique TypeScript singleton pattern tailored for multiple PouchDB instances

I have developed a node application that interfaces with multiple databases. I've designed a class which allows me to create various databases effortlessly, as they share similar CRUD operations. The Class: class DatabaseService { private dbName: ...

node.jstypescriptpouchdb

Prevent Angular from performing change detection on specific @Input properties

Within my Angular component, there are extensive calculations that take place when changes are detected. @Component ( selector: 'my-table', ... 400+ lines of angular template ... ) class MyTable implements OnDestroy, AfterContentInit, On ...

angulardartangular-dart

Sending an ID from an array within a *ngFor loop to a different component in Angular: a step-by-step guide

I have a collection of items that I loop through using ngFor. My goal is to pass all its attributes to another component. I attempted to accomplish this with the following code: *ngFor='let item of postList [routerLink]="['/detailed-post&ap ...

htmlangulartypescript

I'm struggling to grasp the issue with my current route

Just starting out with Laravel and I've got a frontend and a backend set up for my application. I have all the routes, controllers, and necessary configurations in place. However, whenever I click on the post title in the frontend, it redirects to the ...

phplaravelroutes

Is there a way to display only the year in the Angular ngx boostap 2.0.5 datepicker?

https://i.sstatic.net/UYqFi.png https://i.sstatic.net/0EHIx.png My goal is to display only the year in the datepicker, but when I select a year, the month appears afterwards. How can I adjust this? ...

angularngx-bootstrap

Getting around using Material-UI Icons

Is it possible to utilize a Material-UI Icon for navigation using React Router Dom? I attempted the following approach without success: <NavigateBeforeIcon path="/vehicles"></NavigateBeforeIcon> With buttons, I am able to use component={Link ...

javascriptreactjstypescriptmaterial-uireact-navigation

Canceling a promise in a Vuex action

I am looking to implement the ability to cancel a running promise in my Vue component, specifically a promise returned by a Vuex action. In my scenario, the Vuex action is continuously polling an endpoint for status updates, and I need the capability to s ...

javascripttypescriptvue.jspromisevuex

Nested loop with Angular and Bootstrap Modal

I am trying to implement a Modal in Angular to display the details of a row in a table with matching IDs, but I'm encountering an issue where only the data from the first row is shown when I open the Modal. The other rows do not seem to work correctly ...

angularbootstrap-4bootstrap-modal

"Implementing a Node.js/Express backend paired with an Angular front-end within a unified Azure web application

Currently, I have set up a Node/Express configuration for my development environment that provides JSON data through the endpoint localhost:3000/data. In addition to this, there is an Angular 8 application within the same node directory for the frontend. ...

node.jsangularexpressazure-web-app-service

What is the best way to set up a sidenav with router-outlet and a distinct login page with router-outlet?

My goal is to create an application with a login page that, once the user logs in, displays a navbar, toolbar, and sidenav with a router-outlet. In my app.component.html, I have set it up like this: <div *ngIf="isAuthenticated"> <app- ...

angularangular-materialangular-material2angular-routingangular-router

Generate ES6 prototypes using TypeScript

Is it possible to enhance specific class methods in TypeScript by making them prototypes, even when the target is ES6? Additionally, can a specific class be configured to only produce prototypes? Consider the following TypeScript class: class Test { ...

typescript

Sending JSON data from Angular to WCF

Attempting to utilize the post method in Angular to send JSON data to a WCF service. The data is being sent in JSON format from Angular, however, the WCF service is receiving it as a null object. Is it possible to use the get method to send JSON data? Th ...

c#jsonangularwcf

The logic behind regular expressions

Currently working on building a web application with Angular 6 and I have a query: I'm in the process of developing a custom input component (specifically for text inputs) like so: @Component({ selector: 'input-text', templateUrl: &apos ...

regexangulartypescriptcomponents

Angular2 - HTML not displaying the response

I am currently mastering angularjs2. In my latest project, I attempted to fetch data from an API and received a response successfully. However, I encountered an issue where the response is not rendering in homepage.component.html as expected. I am unsure o ...

javascriptangularjsangularangular-ui-router