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

Question

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 could be wrong, but that sounds like a router problem. If the component is otherwise properly imported (lazy or otherwise), all should be well. — Tim Consolazio, Apr 26 '17 at 15:53
You are right! I noticed that the import Module shares an identical router path. And changing them fixes the problem. I'll edit the question to put in the other module and routes. — Rex, Apr 26 '17 at 16:01

score 2 · Accepted Answer · answered Apr 27 '17 at 11:20

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.

score 0 · Answer 2 · answered Apr 26 '17 at 19:13

0

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.

answered Apr 26 '17 at 19:13

Rex

376
2
11

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

2 Answers2