Angular use module with routing inside another component

I’m facing a big problem and It’s taking me forever to figure out what can be the problem.

Actually I have a module called let’s say form.module.ts that contain 4 components, form.component that shows the other 3 components which are the 3 steps of my form.

Here is the form.component.html :

<div class="form">
  <router-outlet></router-outlet>
  <div class="validation" *ngIf="!isConseiller">
    <button type="button" class="btn btn-default" (click)="doSomething()">Abandonner</button>
    <button type="button" class="btn btn-primary" (click)="doSomethingElse()">
      Valider et envoyer
    </button>
  </div>
</div>

And here is what my routing config for this module looks form-routing.module.ts :

const formRoutes: Routes = [
  { path: 'donnees-administratives', component: DonneesAdministrativesComponent},
  { path: 'devis', component: DevisComponent},
  { path: 'validation', component: ValidationComponent}
];


@NgModule({
  imports: [RouterModule.forChild(formRoutes)],
  exports: [RouterModule]
})
export class FormRoutingModule { }

And here is my form.module.ts :

@NgModule({
  imports: [
    SharedModule,
    FormRoutingModule 
  ],
  declarations: [
    FormComponent,
    DevisComponent,
    DonneesAdministrativesComponent,
    ValidationComponent
  ],
  exports: [
    FormComponent
  ]
})
export class FormModule { }

After importing my module in my app.module.ts I tried to use my FormComponent inside another component employer.component.html like so :

<someDesign>
  <form [someInput]="data"></form>
</someDesign>

The problem is that when I try to access /employer I can see <button> and everthing else declared in my component but I can’t see the content of the rooter-outlet.

And if I try to access /donnees-administratives I get all the content of that component but without the employer data.

I hope I was clear in my explanation, and wondering what I’m doign wrong ?! Thank in advance.

Source: Angular

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.