I'm facing an issue with displaying the third nested component.
Expected:
Hello App Component
Hello Nest-A Component
Hello Nest-1 Component
Hello Test-Z Component
Actual:
Hello App Component
Hello Nest-A Component
Hello Nest-1 Component
Why is my Test-Z component not showing up?
TLDR; StackBlitz - Code Example
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { NestAModule } from './nest-a/nest-a.module';
const rootRoutes: Routes = [
{ path: '', redirectTo: 'nest-a', pathMatch: 'full' },
{ path: 'nest-a', redirectTo: 'nest-a', pathMatch: 'full' },
];
@NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(rootRoutes),
NestAModule,
],
declarations: [
AppComponent,
],
bootstrap: [
AppComponent
]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '<h1>Hello App Component</h1><router-outlet></router-outlet>',
})
export class AppComponent {
}
nest-a/nest-a-routing-module.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { NestAComponent } from './nest-a.component';
import { Nest1Component } from './nest-1/nest-1.component';
export const nestARoutes = [
{
title: 'Nest A',
path: 'nest-a',
component: NestAComponent,
children: [
{ path: '', redirectTo: 'nest-1', pathMatch: 'full' },
{ path: 'nest-1', component: Nest1Component },
],
},
];
@NgModule({
imports: [
RouterModule.forChild(nestARoutes),
],
exports: [
RouterModule
]
})
export class NestARoutingModule { }
nest-a/nest-a.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-nest-a',
template: `<h1>Hello Nest-A Component</h1><router-outlet></router-outlet>`
})
export class NestAComponent {
}
nest-a/nest-a.module.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { NestAComponent } from './nest-a.component';
import { NestARoutingModule, nestARoutes } from './nest-a-routing.module';
import { Nest1Module } from './nest-1/nest-1.module';
@NgModule({
declarations: [
NestAComponent,
],
imports: [
NestARoutingModule,
Nest1Module,
RouterModule.forChild(nestARoutes),
],
})
export class NestAModule { }
nest-a/nest-1/nest-1-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { Nest1Component } from './nest-1.component';
import { TestYComponent } from './test-y/test-y.component'
import { TestZComponent } from './test-z/test-z.component'
export const nest1Routes = [
{
title: 'Nest 1',
path: 'nest-1',
component: Nest1Component,
children: [
{ path: '', redirectTo: 'test-z', pathMatch: 'full'},
{ path: 'test-y', component: TestYComponent},
{ path: 'test-z', component: TestZComponent},
]
},
];
@NgModule({
imports: [
RouterModule.forChild(nest1Routes),
],
exports: [
RouterModule
]
})
export class Nest1RoutingModule { }
nest-a/nest-1/nest-1.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-nest-1',
template: `<h1>Hello Nest-1 Component</h1><router-outlet></router-outlet>`
})
export class Nest1Component {
}
nest-a/nest-1/nest-1.module.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { Nest1Component } from './nest-1.component';
import { Nest1RoutingModule, nest1Routes } from './nest-1-routing.module';
import { TestZModule } from './test-z/test-z.module'
@NgModule({
declarations: [
Nest1Component,
],
imports: [
Nest1RoutingModule,
TestZModule,
RouterModule.forChild(nest1Routes),
],
})
export class Nest1Module { }
nest-a/nest-1/nest-/nest-.component.ts
(there is an Y and Z, the are no important differences)
import { Component } from '@angular/core';
@Component({
selector: 'my-test-*',
template: `<h1>Hello Test-* Component</h1>`
})
export class Test*Component {
}