`Mapping child routes in Angular using basic components`

I am encountering an issue with Angular 8 routes. The problem lies in the child routes not functioning properly.

Here are my defined routes:

const routes: Routes = [
  {
    path: 'admin', component: MainComponent, children: [
      { path: 'uno', component: HomeComponent, outlet: 'sub' },
      { path: '', component: HomeComponent, outlet: 'sub' },
      //{ path: '', component: HomeComponent, outlet: 'sub' },
    ]
  }
];

When I access the URL localhost:5001/admin, both the "MainComponent" and "HomeComponent" are displayed on the browser. However, when attempting to access localhost:5001/admin/uno, I receive an error message in the console stating "Error: Cannot match any routes. URL Segment: 'admin/uno'".

Thank you for your assistance

** update **

In my app.component.html file, I have included:

<router-outlet></router-outlet>

And in the main.component.html file, I have the following code:

<div id="content" class="content">
    <div>
      <button routerLink="uno">Tab1</button>
    </div>
    <router-outlet name="sub"></router-outlet>
  </div>

Answer №1

Here are two solutions to resolve your issue. First, if you want to use named outlets, your link should be structured like this:

<button [routerLink]="[{outlets: {sub: ['uno']}}]">Tab1</button>

The second solution (which I believe is preferable in this scenario) involves removing the name from the <router-outlet> and the path configuration. By having a nested router-outlet in your MainComponent on the route /admin, all child routes will be rendered within the router-outlet of the MainComponent. You may need to include pathMatch: 'full' in your child routes.

const routes: Routes = [
  {
    path: "admin",
    component: MainComponent,
    children: [
      { path: "uno", component: HomeComponent, pathMatch: 'full'},
    ]
  }
];
<div id="content" class="content">
  <div>
    <button routerLink="uno">Tab1</button>
  </div>
  <router-outlet></router-outlet>
</div>

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 locating the type definition file for '@types' while working with Ionic 4 and Angular 7

Recently, I made the transition in my ionic 4 project to utilize angular 7. While everything seems to be functioning correctly in debug mode, I encountered an issue when attempting to compile for production using the command 'ionic cordova build andro ...

Next.js is failing to infer types from getServerSideProps to NextPage

It seems like the data type specified in getServerSideProps is not being correctly passed to the page. Here is the defined model: export type TypeUser = { _id?: Types.ObjectId; name: string; email: string; image: string; emailVerified: null; p ...

Tips for managing server data and dynamically binding values in Ionic 3

I am struggling with handling data retrieved from the server. I have a provider that fetches the data through HTTP, and I want to ensure the data is loaded before the page loads. However, there is a delay in reflecting the data on the page. Can someone pro ...

Employing async/await for efficient data retrieval

Attempting to utilize async-await in TypeScript Vue 3 to retrieve data, but encountering an issue where the function is already logging 'undefined' (or executing before the function call) private async exportDataOrder() { await this.getDataEx ...

Automate the compilation of Typescript project references by creating a solution that allows for passing unique options to each

When compiling or building a project with references programmatically, I make use of the ts.createSolutionBuilder API. The challenge I face is that in my specific scenario, I do not have individual tsconfig.json files stored on the filesystem for each pac ...

Choose the property category

Is there a more efficient way to specify the type of a property in TypeScript without resorting to casting? Take a look at this example: interface Overlay { type: "modal" | "drawer" other?: number } const rec = { obj1: { ty ...

Set up and run a SpringBoot + Angular web application on an external IIS server

When it comes to running a Spring Boot application locally, it's as simple as running it with the spring-boot:run command or executing the main class of the project. However, deploying the same application on an IIS Server can be a bit more challengin ...

How can you customize the color of the arrows in Carousel Bootstrap?

I've utilized Carousel Bootstrap to create a slideshow, but I'm struggling with changing the color of the arrows. Could you please assist me in figuring out how to change the color of the arrows? Thank you! slideshow.component.html: <di ...

Urgent dependency alert: calling for a necessity (sequelize) in next.js is a vital element

I'm encountering a challenge with integrating sequelize into my Next.js 13 project to connect my API routes with the database. I keep receiving errors that say "Critical dependency: the request of a dependency is an expression." import * as pg from &a ...

Syntax for TypeScript generic promises definition

I'm struggling to fully grasp the definition of Promise in TypeScript, as shown below: /** * Represents the completion of an asynchronous operation */ interface Promise<T> { /** * Attaches callbacks for the resolution and/or rejectio ...

The presence of 'touched' within Angular validation is causing a delay in method execution

Upon utilizing this validation method, it became apparent: <label>Password</label> <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': f.password.touc ...

What is the best way to implement a switch case for the value of a property within an object in a TypeScript file?

The object I'm dealing with looks like this: {a: auth?.type === '1' || auth?.type === '2' || auth?.type === '3' ? { reason: // I need to implement a switch case here : un ...

Issue encountered while attempting to package Azure project in Visual Studio 2015 Update1 due to difficulty copying Typescript files

Since upgrading to VS 2015 Update 1 (that includes Typescript 1.7) and Azure SDK 2.8, packaging my Azure application for deployment has become a challenge due to an error in the file path where the packager is attempting to copy the js output file: Erro ...

Implementing a toggleable light and dark mode feature in Bootstrap 4 with a simple checkbox

Is it possible to link a checkbox's boolean value to a table's class in order to enable dark mode when checked? I attempted the following: <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="styleshee ...

What is the best approach for integrating a Material UI Autocomplete component with graphql queries?

Hello there! I'm currently working with React Typescript and trying to incorporate query suggestions into an Autocomplete Material UI component in my project. Below is a snippet of my GraphQL queries: Query Definition: import gql from 'graphql- ...

Establishing API cookies in a Single Page Application

Scenario In the development of my single-page application (SPA), I have separated the frontend and backend components onto different domains: mywebsite.com myapi.com For simplicity, I am utilizing cookies for authentication. Upon signing in, the server ...

AGM MAP | Placing marker within a custom polygon created on the map

Query Description I am utilizing the AGM_MAP library for an Angular website, which includes a map where users can select an address for their orders. Current Issue The problem I am facing is that when I add a polygon to the map, the marker cannot be p ...

Tips for setting up a typeorm entity with attention to its nullable fields

How can I assign values to typeorm entities and insert them into the database? import { PricingPatternElement } from file const Element:PricingPatternElement = { displayOrder: 10, elementName: "test", createdAt : getCurrentDate(), createdBy: &qu ...

Guide on exporting a function from a module as a class property

How to export a function as a class property from a module? Even if modifiers such as public are added, when a class property points to a function within a module, it behaves as though it is private. There are multiple ways to define a property (a, b, c ...

Delete the text in MUI's TablePagination component that displays the number of rows per page and the total rows in the table

Currently, I am integrating MUI's tablePagination component into my React table with TypeScript. I am looking to remove/disable the circlemarked text displayed in the image (the picture is an example from MUI). https://i.stack.imgur.com/ib0t2.png Af ...