Code in Angular 2+ routing component not running

Question

I have an Angular component on a route (and it has a router outlet within it). Whatever is in the template shows as expected, and the router outlet works as expected, so I know the routes are set up properly; however, the TypeScript for the component doesn't appear to be running. It doesn't matter if I navigate with a routerLink or start the app from the route. Neither the constructor or ngOnInit appear to run. I am using Angular 5.2.5.

@Component({
  template: `This is visible. <router-outlet></router-outlet>`
})
export class ApplicationComponent implements OnInit {

  constructor(sectionPagingService: SectionPagingService) {
    this.test();
  }

  ngOnInit() {
    this.test();
  }

  test() {
    alert('hello');
    console.log('hello');
  }

}

export const applicantRoutes: Routes = [
  {
    path: 'application',
    children:
      [
        { path: '', component: ApplicationComponent },
        { path: ':id',  children: [
          { path: 'media', component: MediaEditComponent },
          { path: 'birth', component: BirthEditComponent },
          { path: 'social', component: SocialEditComponent },
          { path: 'citizenship', component: CitizenshipEditComponent },
          { path: 'insurance', component: InsuranceEditComponent },
          { path: 'education', component: EducationEditComponent },
          { path: 'military', component: MilitaryEditComponent },
          { path: 'bankruptcy', component: BankruptcyEditComponent },
          { path: 'divorce', component: DivorceEditComponent },
          { path: 'certifications', component: CertificationsEditComponent },
        ] }
      ]
  },
  {
    path: 'instructions',
    component: InstructionsComponent
  },
  {
    path: 'confirmation',
    component: ConfirmationComponent
  }
];

What am I missing here.

BBaysinger BBaysinger · Accepted Answer · 2018-02-20T00:31:54

It turns out to be that I didn't have a component set for path: 'application'. Or you could say my ApplicationComponent was in the wrong place. Should be:

export const applicantRoutes: Routes = [
  {
    path: 'application',
    component: ApplicationComponent,
    children:
      [
        { path: '', component: ApplicationShimComponent },
        { path: ':id',  children: [
          { path: 'media', component: MediaEditComponent },
          { path: 'birth', component: BirthEditComponent },
          { path: 'social', component: SocialEditComponent },
          { path: 'citizenship', component: CitizenshipEditComponent },
          { path: 'insurance', component: InsuranceEditComponent },
          { path: 'education', component: EducationEditComponent },
          { path: 'military', component: MilitaryEditComponent },
          { path: 'bankruptcy', component: BankruptcyEditComponent },
          { path: 'divorce', component: DivorceEditComponent },
          { path: 'certifications', component: CertificationsEditComponent },
        ] }
      ]
  },
  {
    path: 'instructions',
    component: InstructionsComponent
  },
  {
    path: 'confirmation',
    component: ConfirmationComponent
  }
];

Code in Angular 2+ routing component not running

1 Answers