Multi-module program does not work properly

Question

I have a multi-module program. The route module is the AppModule and the children are AdminModule, EmployeeModule and HomeModule. For each module I have created a component with the same name.

The AppModule looks lie this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes, NoPreloading } from '@angular/router';  


import { AppComponent } from './app.component';
import { HomeModule } from './home/home.module';

const routes: Routes =  [    
  { path: 'Home', loadChildren:'app/home/home.module#HomeModule' },  
  { path: 'Employee', loadChildren:'app/employee/employee.module#EmployeeModule' },
  { path: 'Admin', loadChildren:'app/admin/admin.module#AdminModule' },  

];  


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HomeModule,
    RouterModule.forRoot(routes, { useHash: false, preloadingStrategy: NoPreloading }), 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

And this is how inside of each of the other 3 modules look like:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home/home.component';
import { Routes } from '@angular/router';  


const routes: Routes = [  
  { path: 'Home', component: HomeComponent },  
];  

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [HomeComponent]
})
export class HomeModule { }

The programs loads and works error-free. When I click on for example Home, the url changes to http://localhost:4200/Home, but I do not see the employee.component.html loads. What should I do to get this fixed?

Answer 1

Notice that the path routes in HomeModule is set to an empty string. This is because the path in AppModule routing is already set to Home, so this route in the HomeModule routing, is already within the Home context. Every route in this routing module is a child route.

import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [  
  { path: '', component: HomeComponent },  
];  

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  declarations: [HomeComponent]
})
export class HomeModule { }