CODEWITHSUNDEEP
angularmoduleroutes
Christian S
Christian S

Reputation: 51

Angular 4, convert from component to module

I have a component DfqComponent that I want to turn into a module, but it should keep its routing behavoir. These are the routes I want to keep, defined in the module ProductionLineRoutingModule, that has its own outlet: 

const routes: Routes = [
  { path: 'line', component: ProductionLineListComponent },
  { path: 'line/:name', component: ProductionLineDetailsComponent,
  children: [
    { path: 'dfq', component: DfqComponent },
    // other modules planed
    { path: '', pathMatch: 'full', redirectTo: 'dfq' }
  ]
}];

To turn DfqComponent to DfqModule and call it as before, I used the following routing in DfqRoutingModule: 

const routes: Routes = [
  { path: 'line/:name/dfq', component: DfqComponent }
];

This showed me the desired html (actually only simply the word DFQ), but in my opinion there are two drawbacks:
1. The outlet now is the primary outlet of the AppComponent.
2. The route definition is coupled with the ProductionLineModule ('line/:name/dfq' instead of 'dfq').

So how can I achieve this?

The project actually looks like this:

Project overview

Upvotes: 0

Views: 3680

Answers (2)

Christian S
Christian S

Reputation: 51

OK, thanks to elasticrash it now works and the code files look clearly.

To remove the children[] array in ProductionLineRoutingModule and by adding multiple path definitions with the loadChildren property did the trick. DfqModule and DfqRoutingModule already were ok.

const routes: Routes = [
  { path: 'line', component: ProductionLineListComponent },
  { path: 'line/:name', component: ProductionLineDetailsComponent,
  loadChildren: '../masterdata/masterdata.module#MasterdataModule'
  },
  { path: 'line/:name', component: ProductionLineDetailsComponent,
  loadChildren: '../order/order.module#OrderModule'
  },
  { path: 'line/:name', component: ProductionLineDetailsComponent,
  loadChildren: '../dfq/dfq.module#DfqModule'
  }
];

There's on thing missing: How can I now set a default route, like 'dfq'?

Thanks!

Upvotes: 1

elasticrash
elasticrash

Reputation: 1221

The way I do that is through loadChildren. In the parent Routing

[{
    path: 'line/:name',
    loadChildren: './dfq/Dfq.module#DfqModule'
}]

And in the dfq routing

 [{ 
      path: 'dfq', component: DfqComponent
 }]

And on the DfqModule in imports

    RouterModule.forChild(dfqRoutes),

Upvotes: 1

Related Questions