Tips for resolving relative child routes in Angular

Routing Configuration

const routes: Routes = [
   { path: '', loadChildren: './home/home.module#HomeModule' },
   { path: 'admin', loadChildren: './admin/admin.module#AdminModule' }
];

Nested Home Routing

const routes: Routes = [
  {path: '', component: HomeComponent, children: [
    {path: 'inner', loadChildren: './home-inner/home-
inner.module#HomeInnerModule'},
  ]}
];

Inner Home Routing

const routes: Routes = [
  {path: '', component: HomeInnerComponent}
];

Explore the example on GitHub here and test it on StackBlitz here

If you click on inner twice, you may encounter a routing issue. The route will be redirected to inner/(inner). This issue may occur with other routes as well.

Looking for a solution?

angulartypescriptangular-routingangular-router

Answer №1

To ensure proper routing in your home.component.html, be sure to use an absolute path rather than a relative path for your destination URL.

<a routerLink="/inner">Inner</a>
<router-outlet></router-outlet>

As stated in the documentation here:

The first segment name should start with /, ./, or ../:

  • If the first segment starts with /, the router will begin its search from the root of the application.

  • If the first segment starts with ./, or has no leading slash, the router will look within the child routes of the current activated route instead.

  • If the first segment begins with ../, the router will navigate up one level.

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

Explain the interaction of cookies between Angular and C# controllers

Can anyone provide clarity on how cookies are utilized between an angular application and a C# server controller? After looking through various discussions and forums, here's what I've gathered: The angular client initiates an HTTP Request (e. ...

c#angularcookies

Adding text in CKEditor with Angular while preserving the existing formatting

To add my merge field text at the current selection, I use this code: editor.model.change(writer => { var position = editor.model.document.selection.getFirstPosition(); // trying to connect with the last node position.stickiness = 'toP ...

javascriptangulartypescriptckeditor

Encountering an ERROR during the compilation of ./src/polyfills.ts while running ng test - Angular 6. The module build

I encountered a problem in an angular project I am working on where the karma.config was missing. To resolve this, I manually added it and attempted to run the test using the command ng test. However, during the execution, an error message appeared: [./src ...

angulartypescript

Encountering an issue with importing from 'sockjs-client' in TypeScript

I am a beginner with Angular and TypeScript. To get started, I used npm to install the following package: npm install --save sockjs-client I attempted to import it in my chat.component.ts file like this: import * as SockJS from 'sockjs-client'; ...

angulartypescriptnpmsockjs

Using Class as a Parameter

I recently started using TypeScript and encountered an implementation issue. I'm working on a class that takes another class as an argument. The challenge is that it can be any class, but I want to define certain possible class properties or methods. ...

typescript

Storing the subscription value retrieved from an API in a global variable

I am trying to find a way to make the data retrieved from an API accessible as a global variable in Typescript. I know that using subscribe() prevents this, so I'm looking for a workaround. Here is the API code: getResultCount(category:any):Obs ...

javascripttypescript

Experimenting with parallelism using TypeScript/JS

Currently, I am tackling a TS project that involves testing concurrent code and its interactions with a database, specifically focusing on idepotency. My goal is to ensure that multiple requests modifying the same resource will either apply changes correct ...

javascripttypescripttestingconcurrency

activating a component by interacting with another component

How can I pass the uuid from parent to child component through a click event in Angular? App.component.ts import { Component } from '@angular/core'; import { v4 as uuid } from 'uuid'; @Component({ selector: 'my-app', tem ...

angular

Setting a border on a specific column in ag-grid is a simple task that can help you customize

I have a table where the first set of columns differs from the rest. I am looking to emphasize this distinction by adding a vertical border on the right side of the specific column to highlight it both in the header and rows. Our setup includes using the ...

cssangularsassag-gridag-grid-angular

What is the way to retrieve an array property in a typescript interface?

Imagine a scenario with three interfaces structured as follows: registration-pivot.ts export interface RegistrationPivot { THead: RegistrationPivotRow; TBody: RegistrationPivotRow[]; } registration-pivot-row.ts export interface RegistrationPivotR ...

javascripthtmlcssangulartypescript

Exploring the Various Path Options in Angular 2 Routing

As a newcomer to Angular and Node JS, I am currently working on an application and struggling with how to efficiently navigate between my different components. Users can input the name of a user and add books associated with them When clicking on a book ...

javascriptangularroutesangular-ui-router

Tips for executing Firebase transactions involving read operations subsequent to write operations

Is there a method to incorporate read operations following write operations in nodejs for cloud and background functions? According to the information provided in the documentation, only server client libraries allow transactions with read operations afte ...

node.jstypescriptfirebasegoogle-cloud-firestoregoogle-cloud-functions

Using TypeScript to validate the API response against specific types

I'm intrigued by the scenario where you expect a specific data type as a response from fetch / Axios / etc, but receive a different type instead. Is there a way to identify this discrepancy? interface HttpResponse<T> extends Response { parsed ...

javascripttypescriptasync-await

Tips for integrating Tesseract with Angular 2 and above

I'm currently exploring the use of Tesseract within one of my components for OCR processing on a file. .ts: import * as Tesseract from 'tesseract.js'; fileToUpload: File = null; handleFileInput(files: FileList) { this.fileToUpload = f ...

angulartypescriptimportocrtesseract

Fairly intricate React function component declaration with TypeScript

const withAuth = () => <OriginalProps extends {}>( Component: React.ComponentType<OriginalProps & IAuthContextInterface> ) => { } (withAuth()(PrivateRoute)) // this is how the HOC called Could someone simplify what this function d ...

reactjstypescript

Adding custom TypeScript classes to an Electron project is a straightforward process that allows developers to enhance their

Currently working on a hello world project in Electron and stumbled across the possibility of using Typescript for the Main process, . The provided instructions suggest changing the file extension from index.js to index.ts and updating the package.json fi ...

typescriptvisual-studio-codeelectron

Filter through the array of objects using the title key

I'm attempting to extract specific data by filtering the 'page_title' key. Below is a snippet of my JSON object: { "page_components": [ { "page_title": "My Account", "row_block": [ { "heading": "", "sub_headi ...

javascriptangulartypescript

Retrieving the row value of a checkbox in an Angular table

I'm facing a challenge where I have a table with three columns, one of which is a checkbox. Here is an image for reference: https://i.sstatic.net/4U6vP.png Here is the code snippet: <div nz-row> <nz-table nz-col nzSpan="22" [nzLoading] ...

angulartypescript

Struggling to map the response data received from an http Get request to a TypeScript object that follows a similar structure

Currently, I am invoking an http Get service method from a component to retrieve data and map it to a Person object. The goal is to display this information on the front end. Below is my component code: export class DisplayPersonComponent implements OnIni ...

angulartypescriptrxjsangular-httpclientangular2-observables

Steps for setting up an Azure Pipeline for a NativeScript Angular application

I'm working on a project with NativeScript Angular, and I am looking for a way to streamline the build process for iOS and Android devices whenever changes are made to the main branch through commits or merges. Ideally, I would like to utilize Azure P ...

angularazure-devopsazure-pipelinesnativescript