Angular: importing child module into another child module overwrites latter's routes

Question

I have this hierarchy in my application:

app/
    app.module.ts
    app.routing.ts
    ...
    endpoints/
              endpoints.module.ts
              endpoints.service.ts
              endpoints.routing.ts
              ...
    indexes/
              indexes.module.ts
              indexes.routing.ts
              ...

The contains of my routing files:

app.routing.ts

...
export const AppRoutes: Routes = [{
    path: '',
    component: MainLayoutComponent,
    children: [{
            path: 'endpoints',
            loadChildren: './endpoints/endpoints.module#EndpointModule'
    },{
            path: 'indexes',
            loadChildren: './indexes/indexes.module#IndexModule'
    }
}];

endpoints.routing.ts

...
export const EndpointRoutes: Routes = [
    {    
        path: '',
        component: EndpointComponent
    }
];

indexes.routing.ts

...
export const IndexesRoutes: Routes = [
    {    
        path: '',
        component: IndexesComponent
    }
];

This is straightforward: when i call /endpoints/ the EndpointComponent gets called. Same for /indexes/ and IndexesComponent.

Now, I want to use the endpoints service in my indexes module. I add it to my indexes.module.ts which looks like this:

...
import { EndpointsModule } from '../endpoints/endpoints.module';
import { EndpointsService } from '../endpoints/endpoints.service';

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild(IndexRoutes),
        EndpointsModule,
        ...
    ],
    declarations: [ 
        IndexComponent
    ],
    providers: [
        EndpointService
    ]
})

export class IndexModule {}

This compiles fine. But now, when I load /indexes/, the view for /endpoints/ shows up. I guess it is importing the routing from the endpoints module too but I don't fully understand how imports work yet. The main module and endpoints module files looks like this (showing the routing related bits since i think are the relevant ones to my problem):

app.module.ts

...
import { AppRoutes } from './app.routing';
...

@NgModule({
    declarations: [
        AppComponent,
        MainComponent, 
        ...
    ],
    imports: [
        RouterModule.forRoot(AppRoutes),
        ...
    ],
    ...
        bootstrap: [AppComponent]
})
export class AppModule { }

endpoints.module.ts

...
import { EndpointRoutes } from './endpoints.routing';
...

@NgModule({
    ...
    imports: [

        RouterModule.forChild(EndpointRoutes),
        ...
    ],
})
export class EndpointModule {}

Answer 1

It is not so much in module imports as it is in paths overwriting. In your first example, you have a clear distinction: two different modules on different subpaths.

In your second example, you say path: 'endpoints', then your lazy router adds a route for '' (which, all things put together, resolves to /endpoints, and then that module imports another one, which has the same, '' path, so still the same endpoint.

You really should add both routes lazily loaded from main app component. They're lazy so you're not saving anything extra unless you actually call this route.