Angular 6 - Routing correctly when importing a library/npm module with child routes

I have built an Angular 6 Library module following this guide and a dummy application running along my library so I can import and test modules during development.

The Library Module I am importing from the Library has child routes. Which I think is the root cause of this problem. Pun intended. The routing module for the Library Module looks like this:

// Library Module routing
const routes: Routes = [{
    path: '',
    children: [
        { path: '', component: LoginFormComponent },
        { path: 'forgot-password', component: ForgotPasswordFormComponent }
    ]
}];

@NgModule({
    imports: [ RouterModule.forChild(routes) ],
    exports: [ RouterModule ]
})
export class LoginRoutingModule {}

In my dummy application I have a Modules module that is lazy loaded by the App Routing module:

// Dummy app root routing
const appRoutes: Routes = [
    {
        path: '',
        children:  [{
            path: 'modules',
            loadChildren: './modules/modules.module#ModulesModule'
        }]
    },
    { path: '**', redirectTo: '' }
];

@NgModule({
    imports: [RouterModule.forRoot(appRoutes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

The Modules module file is where I import the Library Module and looks like this:

// Dummy app modules routing
import { LoginModule } from '@library-namespace/modules';
import { environment } from '../../environments/environment';

@NgModule({
    imports: [
        CommonModule,
        LoginModule.forRoot(environment)
    ],
    declarations: [ ModulesComponent ]
})
export class ModulesModule { }

When navigating to localhost:4200/modules the Library Module is instantiated even when the modules.component.html file doesn't have the component selector of the Library Module. All other ocntent in my modules.component.html file doesn't appear either. I think this is because the root path of the Library Module is ' ' ? I need to include the component selector as I pass in the function to watch for the eventEmitter. The selector looks like this:

<lib-login (loginEvent)="login($event)"></lib-login>

I want to navigate in my dummy application to localhost:4200/modules display the Library Module and capture the event emitter in the modules component of the dummy application.

Recommended topics

Hot tags