angular - 角度模块延迟加载,路由器子级不显示组件
问题描述
app.component.html
<a routerLink="./">Main Home</a> |
<a routerLink="./contactus">ContactUs</a> |
<a routerLink="./productmodule">Product Manager</a> |
<a routerLink="./customermodule">Customer Manager</a> |
<a routerLink="./ordermodule">Order Manager</a> |
<router-outlet></router-outlet>
app.main.router
import { Routes, RouterModule } from "@angular/router";
import { AppComponents } from "../Resource/app.Resource";
// import { ContactUsComponent } from "../Components/app.contactus.component";
import { LandingComponent } from "../Components/LandingComponent";
import { ContactUsComponent } from "../Components/app.contactus.component";
export const appRouters:Routes= [
{path:'', component : LandingComponent},
{path: "contactus",component : ContactUsComponent },
{ path: "productmodule", loadChildren: "./Product.Module#ProductModule" },
]
export const appRouting = RouterModule.forRoot(appRouters);
主模块
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { AppRoutingModule } from "./app.routing.module";
import { AppComponents, AppBootComponent, AppServices } from './ngObjects/Resource/app.Resource';
import {ProductComponents } from "./SubModules/LazyModules/ProductManager/ngObjects/Resources/Product.Resources";
//import { appRouting } from "./ngObjects/Router/AppRouter";
//import { RouterModule } from '@angular/router';
@NgModule({
declarations: [
...AppComponents,
],
imports: [
BrowserModule,
FormsModule,
CommonModule,
AppRoutingModule,
],
providers: [...AppServices],
bootstrap: [...AppBootComponent]
})
export class AppModule { }
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { appRouting } from "./ngObjects/Router/AppRouter";
@NgModule({
imports: [appRouting],
exports: [RouterModule],
providers: []
})
export class AppRoutingModule {}
惰性模块脚本 子html
<h1>Product Manager</h1>
<a routerLink="">Back</a> |
<a routerLink="home">Product Home</a> |
<a routerLink="new">New Product</a> |
<a routerLink="list">List Product</a> |
子路由器
import { Routes, RouterModule } from "@angular/router";
import { NewProductComponent} from "../Components/product.newitem.component";
import { ProductManagerComponent } from "../Components/Product.Manager.Component";
import { ProductHomeComponent } from "../Components/Product.Home.Component";
import { ModuleWithProviders } from "@angular/core";
export const productRouters: Routes= [
{path:'', component: ProductManagerComponent,
children: [
{ path: '', redirectTo:"home" },
{ path: 'home', component: ProductHomeComponent },
{
path:'new',
component: NewProductComponent,
},
]
},
// { path: '', redirectTo:"home" },
// { path: "home", component: ProductHomeComponent },
// {
// path:'new',
// component: NewProductComponent,
// },
];
export const productRouting = RouterModule.forChild(productRouters);
懒惰模块
import { NgModule } from "@angular/core";
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { productRouting} from "./SubModules/LazyModules/ProductManager/ngObjects/Router/product.router";
import {ProductComponents, ProductServices } from "./SubModules/LazyModules/ProductManager/ngObjects/Resources/Product.Resources";
//import {ProductManagerComponent} from "./SubModules/LazyModules/ProductManager/ngObjects/Components/Product.Manager.Component"
//import {NewProductComponent } from "./SubModules/LazyModules/ProductManager/ngObjects/Components/product.newitem.component";
@NgModule(
{
imports:[
CommonModule,
FormsModule,
productRouting,
],
declarations:[
...ProductComponents,
// NewProductComponent,
// ProductManagerComponent,
],
exports:[
// ...Produ
ctComponents,
],
providers:[
...ProductServices,
],
entryComponents:[
//...ProductComponents,
]
}
)
export class ProductModule
{
}
当我单击子/惰性模块 routerLink 浏览器的链接已正确更新但组件未显示在插座区域时,
当我在主路由器和子路由器 html 中添加路由器插座时,引发了异常。
ProductManagerComponent.html:6 ERROR Error: No component factory found for ProductHomeComponent. Did you add it to @NgModule.entryComponents?
如果我< router-outlet > < / router-outlet
从子路由器 html 中删除 >,如果我将路径从子路由器链接移动到惰性模块中的父节点,则会删除错误但不会显示组件,则会出现惰性模块的组件但删除链接。
有人能告诉我代码中的错误是什么吗?
解决方案
推荐阅读
- javascript - 为什么对 string.charCodeAt() 的两次调用比在从未达到的情况下一次调用一次更快?
- javascript - How to post select box and not the value of select box
- python - 无法在 Django Rest Framework 中查找具有外键子字段的字段
- ios - Expo iOS Build Not Working--"Could Not Receive Latest API Key from App Store Connect"
- python-3.x - 提取数据框中的单词列表
- node.js - How to share classes, with server side decorators, between server and client
- php - How can I get the session ID? from the cureent user login
- c++ - Is the main() function odr-used?
- dart - How can I initialize a mixin's immutable data in Dart?
- c++ - 与 std::wstring 的转换失败