Cancel the starting path in Angular 9 and initiate a redirection

Question

Cancel the starting path in Angular 9 and initiate a redirection

I am attempting to change the initial path such as localhost:4200/ so that it displays an error view instead of the home page. I want the home page to only be accessible if you navigate to something like localhost:4200/tag1/tag2.

I need to be able to capture the given URL and set it as the home page. I have tried to implement this in the app-routing module, but nothing is loading or I receive errors stating that the segments do not exist.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {AppRoutes} from '../shared/globals/app-routes';
import {errorComponent} from '../errorComponent.ts'

export const tag1 = document.location.pathname.split('/')[1];
export const tag2 = document.location.pathname.split('/')[2];

const routes: Routes = [
  { path: 'tag1/tag2',
    loadChildren: () => import('../auth/auth.module').then(m => m.AuthModule) },
    { path: '',
    component: errorComponent    },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

javascript angular typescript angular-router

Answer 1

Answer №1

Your routing module has some issues that need to be fixed.

First: The variables tag1 and tag2 should not be used as strings in your routes. They are meant to be variables, so the correct format is:

path: `${tag1}/${tag2}`

Second: Avoid directly getting URL parameters in the routing module. Instead, structure your code as follows:

const routes: Routes = [
  { 
    path: '/:tag1/:tag2',
    loadChildren: () => import('../auth/auth.module').then(m => m.AuthModule) 
  },
  { 
    path: '',
    component: errorComponent    
  },
];

In your AuthPageComponent, you can retrieve tag1 and tag2 using the following method:

import { ActivatedRoute }  from "@angular/router";

constructor(
  private route: ActivatedRoute
) {
}

ngOnInit() {
  this.route.params.subscribe((params: { tag1: string, tag2: string }) => {
    console.log("tag1", params.tag1);
    console.log("tag2", params.tag2);
  })
}

For additional information, please consult the official documentation: Route Parameters

Answer 2

Your routing module has some issues that need to be fixed.

First: The variables tag1 and tag2 should not be used as strings in your routes. They are meant to be variables, so the correct format is:

path: `${tag1}/${tag2}`

Second: Avoid directly getting URL parameters in the routing module. Instead, structure your code as follows:

const routes: Routes = [
  { 
    path: '/:tag1/:tag2',
    loadChildren: () => import('../auth/auth.module').then(m => m.AuthModule) 
  },
  { 
    path: '',
    component: errorComponent    
  },
];

In your AuthPageComponent, you can retrieve tag1 and tag2 using the following method:

import { ActivatedRoute }  from "@angular/router";

constructor(
  private route: ActivatedRoute
) {
}

ngOnInit() {
  this.route.params.subscribe((params: { tag1: string, tag2: string }) => {
    console.log("tag1", params.tag1);
    console.log("tag2", params.tag2);
  })
}

For additional information, please consult the official documentation: Route Parameters

Cancel the starting path in Angular 9 and initiate a redirection

Answer №1

Similar questions

When a dialog box is displayed, a scrollbar will automatically appear

How can I establish default values for 2 to 3 options in a Dropdownlist?

Retrieving the data from a observable

Divide a list Observable into two parts

Can you explain NodeSource in simple terms, and what purpose does it serve?

Inscribe latitude from marker onto input field

Achieving www prefix enforcement for loading js file

Executing the collection.find() function triggers an internal server issue and eventually leads to a timeout error

What is the best way to apply a jQuery function to multiple div elements simultaneously?

ASP.Net - Unexpected JSON Format Error

Obtain the Unprocessed Product Details with the Shopify-Buy Software Development Kit

React - Anticipated an assignment or invocation of a function

Attempting to grasp the concept of Typescript generics

What is the best way to incorporate multiple pages and export them in an angular2 project?

Click event dynamically bound to list items

Is there a way for us to determine the time at which the user last took a screenshot or photo?

Having trouble with Ajax and facebox integration issues?

Beginner's Guide: Building your debut JavaScript/TypeScript library on GitHub and npm

I am interested in incorporating the ability to select and scroll the window without needing to interact with the scroll bar by

How to prevent click events and still enable scrolling within a DIV using CSS/JS