Question

我正在使用Angular 9创建一个应用程序，在该应用程序中我已经创建了一个用于管理目的的单独路由模块，并在app.module中对其进行了调用以进行初始化。但是由于某些原因，路由未得到调用，并且控制台中出现以下错误。

ERROR错误角度11 解决承诺解决承诺 scheduleResolveOrReject invokeTask onInvokeTask invokeTask runTask rainMicroTaskQueue invokeTask 调用计时器 core.js：3872

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

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),

    ...
  ]
})

Angular 9子级路由模块未加载

1 个答案: