Angular 9 forChild модуль не загружается

Question

В моем приложении Angular 9 я создал отдельный модуль маршрутизации администратора и вызвал его в app.module для инициализации. Но маршруты для таких компонентов, как вход в систему и регистрация, не вызывают и не загружают компонент в представлении при получении ошибки в консоли. Только AdminComponent загружается. Вы можете проверить мой репозиторий GitHub, если хотите https://github.com/tridibc2/sample-angular.

AdminModule:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AdminComponent } from '../admin/admin.component';
import { SignupComponent } from '../signup/signup.component';
import { LoginComponent } from '../login/login.component';
import { ManageBlogsComponent } from '../manage-blogs/manage-blogs.component';

const routes: Routes = [
  { path: 'signup', component: SignupComponent },
  { path: 'login', component: LoginComponent },
    { path: 'admin', component: AdminComponent },
   { path: 'admin/blog', component: ManageBlogsComponent }
];

@NgModule({
  declarations: [
    AdminComponent,
    SignupComponent,
    LoginComponent,
    ManageBlogsComponent
  ],
  imports: [
    RouterModule.forChild(routes),
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],
  exports: [RouterModule]
})
export class AdminModule { }

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { RouterModule } from '@angular/router';
import { ClientModule } from './client/client-routing/client.module';
import { AdminModule } from './admin/admin-routing/admin.module';
import { AppRoutingModule } from './app.routing';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent ],
  imports: [
    BrowserModule,
    CommonModule,
    NgbModule,
    ClientModule,
    AdminModule,
    AppRoutingModule,
    FormsModule,
    RouterModule ],

   bootstrap: [AppComponent]
})
export class AppModule { }

app.routing.ts

import { NgModule } from '@angular/core';
import { CommonModule, } from '@angular/common';
import { BrowserModule  } from '@angular/platform-browser';
import { Routes, RouterModule } from '@angular/router';
import { BlogHomeComponent } from './client/blog-home/blog-home.component';
const routes: Routes =[
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'home',             component: BlogHomeComponent }
];

@NgModule({
  imports: [
    CommonModule,
    BrowserModule,
    RouterModule.forRoot(routes,{
      useHash: true
    })
  ],
  exports: [
  ],
})
export class AppRoutingModule { }

Answer 1

Я клонировал ваш репозиторий от мастера, и вот решение, к которому я пришел.

Я создал examples.routing.ts и добавил следующий код.

const routes: Routes = [
  { path: 'user-profile', component: ProfileComponent },
  { path: 'signup', component: SignupComponent },
  { path: 'landing', component: LandingComponent },
];

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

Я добавил ExamplesRoutingModule в массив импорта модулей в examples.module.ts

@NgModule({
  imports: [CommonModule, FormsModule, NgbModule, ExamplesRoutingModule],
  declarations: [LandingComponent, SignupComponent, ProfileComponent],
})
export class ExamplesModule {}

Затем внутри app.module я удалил импорт RouterModule из массив импорта

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    FooterComponent
  ],
  imports: [
    BrowserModule,
    NgbModule,
    FormsModule,
    ComponentsModule,
    ExamplesModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

А внутри AppRoutingModule Я экспортировал RouterModule

const routes: Routes =[
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'home', component: ComponentsComponent }
];

@NgModule({
  imports: [
    CommonModule,
    BrowserModule,
    RouterModule.forRoot(routes,{
      useHash: true
    })
  ],
  exports: [
    RouterModule
  ],
})
export class AppRoutingModule { }