Поскольку вы разбили свое приложение на модули. Я бы предложил вам использовать Функция угловой ленивой загрузки Модули . Функциональный модуль в вашем случае HomeModule должен быть подключен до RoutingModule, чтобы маршрутизатор знал об этом.
Обновил ваш код ЗДЕСЬ .
В RoutingModule обновите массив маршрутов следующим образом:
const routes: Routes = [
{ path:'Login/login', component: LoginComponent },
{ path:'Home', loadChildren: "./home/home.module#HomeModule" },
{ path:'Admin/admin', component: AdminComponent },
];
Обратите внимание, что в синтаксисе отложенной загрузки используется loadChildren, за которым следует строка, представляющая собой путь к модулю, хэш-знак или # и имя класса модуля.
Настройте маршруты HomeModule, обновив RouteHomeModule как:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CreateAlertsComponent } from './Alerts/create-alerts/create-alerts.component';
import { UpdateAlertsComponent } from './Alerts/update-alerts/update-alerts.component';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'Alerts/create-alerts', component: CreateAlertsComponent },
{ path: 'Alerts/update-alerts', component: UpdateAlertsComponent },
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class RouteHomeModule { }
Обратите внимание, что в загруженных модулями Lazy следует использовать RouterModule.forChild() вместо RouterModule.forRoot().
Наконец, удалите HomeComponent, CreateAlertsComponent и UpdateAlertsComponent из объявлений AppModule, поскольку эти компоненты являются частью HomeModule, и обновите routerLink в app.component.html. В AppModule:
@NgModule({
declarations: [
AppComponent,
LoginComponent,
AdminComponent,
],
...
app.component.html
<button mat-raised-button
routerLink='Home'
routerLinkActive="active">
Home
</button>