Question

app.component.html

<a routerLink="./">Main Home</a> &nbsp;| &nbsp;
<a routerLink="./contactus">ContactUs</a> &nbsp;| &nbsp;
<a routerLink="./productmodule">Product Manager</a> &nbsp;| &nbsp;
<a routerLink="./customermodule">Customer Manager</a> &nbsp;| &nbsp;
<a routerLink="./ordermodule">Order Manager</a> &nbsp;| &nbsp;
<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> &nbsp;| &nbsp;
<a routerLink="home">Product Home</a> &nbsp;| &nbsp;
<a routerLink="new">New Product</a> &nbsp;| &nbsp;
<a routerLink="list">List Product</a> &nbsp;| &nbsp;

子路由器

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
{

}

当我单击子模块/惰性模块routerroute时，浏览器的链接已正确更新，但组件未显示在插座区域中，

当我同时在主路由器和子路由器html中添加路由器出口时，引发了异常。

ProductManagerComponent.html:6 ERROR Error: No component factory found for ProductHomeComponent. Did you add it to @NgModule.entryComponents?

如果我从子路由器html中删除了< router-outlet > < / router-outlet>，错误已删除，但如果我将路径从子路由器链接移动到惰性模块中的父节点，则组件未显示，惰性模块的组件会出现，但链接会被删除。

可以让我看看代码中的错误是什么吗？

角模块延迟加载，路由器子级不显示组件

0 个答案: