CODEWITHSUNDEEP
angularangular-components
jgauffin
jgauffin

Reputation: 101194

Nested child component is not loaded/rendered

I have the following structure:

enter image description here

In app-home I have several components that doesn't get rendered, for instance a component named <app-insightchart [applicationId]="applicationId"></app-insightchart>. It isn't created nor loaded (I've got a lot of console.logs to verify :)).

The entire app-home HTML is loaded, but the components are not translated (their markup is untouched). enter image description here

Now, if I instead put that chart component code in app-details it renders perfectly fine.

Module definition

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CommonModule } from '@angular/common';
import { CreateApplicationComponent } from './admin/create/create.component';
import { EditComponent } from './admin/edit/edit.component';
import { MembersComponent } from './admin/members/members.component';
import { SummaryChartComponent } from "./charts/summary/summary.component";
import { InsightChartComponent } from "./charts/insights/insightchart.component";
import { GroupCreateComponent } from './group-create/group-create.component';
import { GroupListComponent } from './group-list/group-list.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ApplicationDetailsComponent } from "./details/details.component";
import { ApplicationHomeComponent } from "./details/home/home.component";
import { NavbarComponent } from './details/navbar/navbar.component';
import { PipeModule } from "../../pipes/pipe.module";
import { ControlsModule } from "../_controls/controls.module";

const ourRoutes: Routes = [
  { path: 'application/group/create', component: GroupCreateComponent },
  {
    path: 'application/:applicationId',
    component: ApplicationDetailsComponent,
    children: [
      {
        path: '',
        outlet: 'application-details-outlet',
        component: ApplicationHomeComponent
      }
    ]
  },
  { path: 'application/:applicationId/members', component: MembersComponent },
  { path: 'application/:applicationId/edit', component: EditComponent },
];

@NgModule({
  declarations: [
    CreateApplicationComponent,
    EditComponent,
    MembersComponent,
    SummaryChartComponent,
    InsightChartComponent,
    GroupCreateComponent,
    GroupListComponent,
    ApplicationDetailsComponent,
    NavbarComponent,
  ],
  imports: [
    PipeModule,
    CommonModule,
    FormsModule,
    ControlsModule,
    ReactiveFormsModule,
    RouterModule.forChild(ourRoutes)
  ],
  exports: [
    CreateApplicationComponent,
    SummaryChartComponent,
    InsightChartComponent,
    GroupCreateComponent,
    GroupListComponent
  ]
})
export class ApplicationModule { }

What's going on?

Upvotes: 1

Views: 1954

Answers (1)

chris burd
chris burd

Reputation: 818

Your home component is not imported so it cannot be aware of the adjacent components - in effect its just ignoring it.

You have to load the home component directly here or into another module that is loaded here. Currently they are contextually unaware of one another.

Upvotes: 7

Related Questions