javascript - Angular 9子路由模块未加载
问题描述
我正在使用 Angular 9 创建一个应用程序,其中我为管理目的创建了一个单独的路由模块,并在 app.module 中调用它来初始化。但是由于某种原因,路由没有被调用,并且控制台中出现了以下错误。
ERROR 错误 Angular 11 resolvePromise resolvePromise scheduleResolveOrReject invokeTask onInvokeTask invokeTask runTask drainMicroTaskQueue invokeTask invoke timer 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 { }
解决方案
急切加载模块路由的简单示例。父模块中至少需要一个组件的引用,并且该组件主要是具有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),
...
]
})
推荐阅读
- mongodb - 当同一字段存在重复项时,MongoDB 如何决定使用哪个单字段索引?
- sql-server - sql server 选择所有列中有 1 个值的行
- uwp - “FullTrustProcessLauncher”:不是类或命名空间名称
- mongodb - MongoDB 聚合 $or 与 $elemMatch, $expr 在 $lookup 管道中
- visual-studio - 如何在解决方案资源管理器中手动对文件夹进行排序?
- express-gateway - Express Gateway:使用 Request-Transformer 策略添加参数,但在条件下
- c - 如何重新分配参数?
- html - 如何从文本区域中的占位符中消除空格
- r - R lattice:如何添加带边框的空白图以填补定义布局的空白
- spring-boot - Spring Boot WebSecurityConfigurerAdapter:未应用一项配置