Angular 9子路由模块未加载

Question

我正在使用 Angular 9 创建一个应用程序，其中我为管理目的创建了一个单独的路由模块，并在 app.module 中调用它进行初始化。但是由于某种原因，路由没有被调用，并且控制台中出现了以下错误。

ERROR 错误 角 11 解决承诺 解决承诺 调度解决或拒绝 调用任务 onInvokeTask 调用任务 运行任务 排水微任务队列 调用任务 调用 计时器 core.js:3872

我在以前版本的 Angular 中创建了这样的子模块，并且效果很好。如果您想https://github.com/tridibc2/sample-angular，可以查看我的 github 存储库。看看我下面的模块

管理模块：

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

预加载模块路由的简单示例。 父模块中至少需要一个组件的 Ref，并且该组件主要是具有 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),

    ...
  ]
})