I would like to know how to import a module without it taking priority over the parent module. I am trying to understand why my imported module is overriding the parent modules entry component. I import the QuotesModule into my CompaniesModule so that it's components are available to my CompaniesModule. When the QuotesModule is imported as shown here:
CompaniesModule (lazyloaded)
const ROUTES: Routes = [
{path: '', component: CompaniesComponent}
];
@NgModule({
declarations: [
CreateCompanyComponent,
CompaniesComponent
],
providers: [
],
imports: [
QuotesModule,
FormsModule,
ReactiveFormsModule,
GlobalModule,
CommonModule,
RouterModule.forChild(ROUTES)
],
exports: [
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
],
entryComponents: [
CompaniesComponent
]
})
...and I attempt to navigate to CompaniesComponent route, the QuotesModule entry component resolves instead. Any insight would be much appreciated!
Here is my QuotesModule Routes and NgModule:
const ROUTES: Routes = [
{path: '', component: QuotesComponent}
];
@NgModule({
declarations: [
QuotesComponent
],
providers: [
],
imports: [
CommonModule,
GlobalModule,
RouterModule.forChild(ROUTES)
],
exports: [
]
})
I will post as answer then (based on above comments)...
...the problem sounds like your router, not the lazy loaded modules (depending on if those modules are in fact loading correctly). Check that the child routes vs. main routes aren't overwriting each other.
And glad to have helped. Tracking down router issues can be a bear.
The problem was the routing. I had used different paths to lazy load my QuotesModule independently of the CompanyModule and when imported,QuotesModule's routes matched and then overwrote the importing modules routes.