Angular 9 детский маршрутный модуль не загружается

Question

Я создаю приложение с Angular 9, где я создал отдельный модуль маршрутизации для целей администратора и вызываю его в app.module для инициализации. Но по какой-то причине маршруты не вызываются, и в консоли появляется следующая ошибка:

Ошибка ОШИБКИ Angular 11 resolPromise resolPromise scheduleResolveOrReject invokeTask onInvokeTask invokeTask runTask dumpMicroTaskQueue invokeTask invokeTorek invokeTourse invokeTask invokeTashk invokeTask invokeTashk invokeTashk invokeTashk invokeTashk invokeTask invokeTashk invokeTask invokeTask invokeTask invokeTask invokeTask invokeTask invokeTask invokeTask invokeTask invokeTask invokeTask invokeTask invokeTask invokeTorek invoke timer. 1027 *: 3872

Я создал дочерние модули, подобные этому, в предыдущих версиях Angular, и он работал отлично. Вы можете проверить мой 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

Простой пример маршрутизации загруженного модуля. Ссылка, по крайней мере, на один компонент требуется в родительском модуле, и в основном это компонент с тегом router-outlet для отображения маршрутов дочернего модуля.

...

const routes: Routes = [
  { 
    path: '', 
    component: CompWhichHasRouterOutletTag,
    children:[
      {path: '', redirectTo: 'signup', pathMatch: 'full'},
      { path: 'signup', component: SignupComponent },
      { path: 'login', component: LoginComponent },
      { path: 'admin', component: AdminComponent },
      { path: 'admin/blog', component: ManageBlogsComponent }]
    }

];

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

файл app.routing.ts

const routes: Routes = [
  { path: '', redirectTo: '/home/', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'contact', component: ContactComponent },
  { path: 'admin-route', component: CompWhichHasRouterOutletTag },
]
@NgModule({
  imports: [
    ...

    RouterModule.forRoot(routes),

    ...
  ]
})