Begin by adding the sub Route at the start of the route path in Angular

How can I dynamically add a user's name to all routing pages in my Angular project when they type the URL like www.mysite.com/hisName? The desired result should be www.mysite.com/hisName/home

This is the routing code I have:

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { AppComponent } from "./app.component";

const routes: Routes = [
  { path: "", redirectTo: "home", pathMatch: "full" },
  { path: "home", component: HomeComponent },
  { path: "supliers", loadChildren: () =>
    import("./supliers-container/supliers-container.module").then(
      (mod) => mod.SupliersContainerModule
    ),
  }
];

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

Answer №1

Perhaps what you're looking for is a wildcard feature? It must be specified as the final element in the list.

const routes: Routes = [
    { path: "", redirectTo: "home", pathMatch: "full" },
    { path: "home", component: HomeComponent },
    { path: "supliers",
     loadChildren: () =>
       import("./supliers-container/supliers-container.module").then(
          (mod) => mod.SupliersContainerModule
        ),
     },

     { path "**", redirectTo: "home", pathMatch: "full" } // positioned here
]

Please note: if you include the wildcard, the initial path option may not be necessary.

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

Show all span elements in a map except for the last one

Within my ReactJS application, I have implemented a mapping function to iterate through an Object. In between each element generated from the mapping process, I am including a span containing a simple care symbol. The following code snippet demonstrates t ...

Utilizing the real module instead of resorting to mock usage

I've configured Jest as follows: jest: { configure: { testEnvironment: 'jsdom', preset: 'ts-jest', transform: {...}, moduleNameMapper: { antd: '<rootDir>/__mocks__/antd/index.tsx&apo ...

Advanced Transclusion in Angular 2: Taking Your Application to the

My HTML code is currently functioning well: <div class="form-group" [ngClass]="{'has-error': !control.valid && control.dirty, 'has-success': control.valid && control.dirty}"> <label class="col-sm-3 con ...

Obtain a union type in TypeScript based on the values of a field within another union type

Is it feasible in Typescript to derive a union type from the values of a field within another union type? type MyUnionType = | { foo: 'a', bar: 1 } | { foo: 'b', bar: 2 } | { foo: 'c', bar: 3 } // Is there an automati ...

Navigating the Next.js App Router: Leveraging Global Providers

When working with the classic Pages Router of Next.js, you have the option to incorporate a global provider in your _app.js file and wrap it around the entire component tree. This approach ensures that the provider is accessible to all components within th ...

Encountering a 404 Error while attempting to access a locale in Angular 5

Currently, I am facing an issue while trying to load a locale in my Angular 5 project that is being run from within VS 2015. According to the documentation, to add a locale, I should include the following code in the app.module: import { NgModule, LOCALE_ ...

How is it that the callback method in the subscribe function of the root component gets triggered every time I navigate between different pages within the application?

I am currently using Angular 10 and have developed a server that returns an observable: export class CountrySelectionService { private _activeCountry = new BehaviorSubject(this.getCountries()[0]); public getActiveCountryPush(): Observable<CountryS ...

Using the directive in AngularJS and passing ng-model as an argument

Currently, I am creating a custom directive using AngularJs, and my goal is to pass the ng-model as an argument. <div class="col-md-7"><time-picker></time-picker></div> The directive code looks like this: app.directive(' ...

Display a component by selecting a hyperlink in React

Currently working on a story in my storytelling, which might not be too important for the question I have. What I am trying to accomplish is creating a scenario where there is an anchor tag that, once clicked, triggers the opening of a dialog box or modal ...

methods for eliminating duplicate values from distinct genres

By clicking on the link provided, you will be able to view the code. The issue arises when I click on the action checkbox as it removes redundant data. However, if I then click on another checkbox, such as family, it will display the value. Interestingly, ...

Show the coordinates x and y on a map using React JS

Is there a way to display a marker on the map in React JS using x and y coordinates instead of latitude and longitude? In my Json-file, I have x and y coordinates like "gpsx":6393010,"gpsy":1650572. I've tried using Point for x and y but can't ...

Using Typescript Type Guard will not modify the variable type if it is set in an indirect manner

TL;DR Differentiation between link1 (Operational) vs link2 (not functional) TypeGuard function validateAllProperties<T>(obj: any, props: (keyof T)[]): obj is T { return props.every((prop) => obj.hasOwnProperty(prop)) } Consider a variable ms ...

What is the process of including a pre-existing product as nested attributes in Rails invoices?

I've been researching nested attributes in Rails, and I came across a gem called cocoon that seems to meet my needs for distributing forms with nested attributes. It provides all the necessary implementation so far. However, I want to explore adding e ...

Guide on generating a PDF on the client side and opening it in a new browser tab using AngularJS

In need of assistance with creating a PDF file on the client side using AngularJS and downloading it in a new tab on the browser. Any suggestions on how to achieve this task? ...

How to reference an object from an external file in TypeScript using Ionic 2 and Angular 2

I am currently developing a mobile application with Ionic2 and have integrated a simple online payment service called Paystack for processing payments. The way it operates is by adding a js file to your webpage and then invoking a function. <script> ...

The service subscription in the ngOnInit lifecycle hook is only invoked once and does not remain populated when the route changes

I need some clarification. The Angular app I'm working on is successfully populating data to the view, but when navigating from one component to another, the ngOnInit lifecycle hook doesn't seem to be invoked, leaving the list on the view empty. ...

Conceal and reveal submenu options

I have been exploring a jQuery function that toggles between hiding and showing different divs when a menu item is clicked. However, I am facing an issue where clicking on the same menu item does not close the newly opened div as intended. Additionally, I ...

"Typescript: Unraveling the Depths of Nested

Having trouble looping through nested arrays in a function that returns a statement. selectInputFilter(enteredText, filter) { if (this.searchType === 3) { return (enteredText['actors'][0]['surname'].toLocaleLowerCase().ind ...

What is the method to adjust the color of <pagination-controls>?

Seeking assistance with customizing the color of angular pagination from blue to a different hue. Any suggestions? https://i.stack.imgur.com/JjcWk.png I've experimented with various code snippets, but unfortunately, none have yielded the desired res ...

Implementing Bootstrap modal functionality in PHP

I'm attempting to trigger a hidden modal from an HTML file using PHP as part of a verification process. One modal is displayed when a button is clicked, while the other is meant to be called by PHP. Below is my PHP code: $File = include("index2.html ...