0

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.

2
  • Did you import OnInit from Angular core? Commented Feb 20, 2018 at 0:21
  • Did you register your routes against the Router module? Commented Feb 20, 2018 at 0:21

1 Answer 1

1

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
  }
];
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.