Search code examples
angularangular2-modules

Angular 2 + Lazyloaded Module is being overridden by an imported module


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: [
    ]

})

Solution

  • 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.