延迟加载组件未按预期工作 [英] Lazy loading component not working as expected

问题描述

我正在尝试对我的产品组件实施延迟加载.该组件按预期延迟加载，但是当我将NavBarComponent模板作为产品模板的子组件包括在内时，出现以下错误:

I am trying to implement lazy-loading of my product component. The component is lazily loaded as expected but when I include the NavBarComponent template as a child component of the product template, I get the following error:

core.js:1448 ERROR Error: Uncaught (in promise): Error: Template parse 
errors:
'app-navbar' is not a known element:
1. If 'app-navbar' is an Angular component, then verify that it is part of 
this module.
2. If 'app-navbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to 
the '@NgModule.schemas' of this component to suppress this message. ("[ERROR 
->]<app-navbar></app-navbar>
<div>
  <div class="container-fluid p-a-2">
"): ng:///ProductModule/ProductComponent.html@0:0
'app-footer' is not a known element:

NavBarComponent在应用程序的顶部模块AppModule中声明，如下所示，并且对产品组件应该可见:

NavBarComponent is declared in the application's top module, AppModule, as shown below and should be visible to the product component:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';

import {AppRoutingModule} from './app-routing.module';
import { NavbarComponent } from './navbar/navbar.component';

@NgModule({
  declarations: [
    NavbarComponent,
  ],
  imports: [
    BrowserModule,    
     InMemoryWebApiModule.forRoot(InMemoryDataService, {delay: 0, 
passThruUnknownUrl: true}),
  ],
  providers: [DataService],
  bootstrap: [AppComponent]
})
export class AppModule { }

product.component.html :(产品模板中包含的NavBarComponent模板会产生错误)

product.component.html: (NavBarComponent template included in product template produces error)

<app-navbar></app-navbar>
  <div class="container-fluid p-a-2">
  </div>
<app-footer></app-footer>

ProductModule:

ProductModule:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import {ProductComponent} from './product.component';
import { ProductRoutingModule } from './product-routing.module';
// import {NavbarComponent} from '../navbar/navbar.component';

@NgModule({
  imports: [
    CommonModule,
    ProductRoutingModule
  ],
  declarations: [
    ProductComponent,
    // NavbarComponent
  ]
})
export class ProductModule { }

ProductRoutingModule:

ProductRoutingModule:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import {ProductComponent} from './product.component';

const routes: Routes = [
  {
    path: ':id',
    component: ProductComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ProductRoutingModule { }

AppRoutingModule :(顶级应用程序路由模块)

AppRoutingModule: (Top application routing module)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {Routes, RouterModule} from '@angular/router';

import {HomeComponent} from './home/home.component';
import {AppliancesComponent} from './appliances/appliances.component';

const appRoutes: Routes = [
    {path: '', redirectTo: 'home', pathMatch: 'full'},
    {path: 'home', component: HomeComponent},
    {
        path: 'appliances',
        component: AppliancesComponent
        // loadChildren: 'app/appliances/appliances.module#AppliancesModule'
    },
    {
        path: 'product',
        loadChildren: 'app/product/product.module#ProductModule'
    },
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes),
    CommonModule
  ],
  exports: [
    RouterModule
  ],
  declarations: []
})
export class AppRoutingModule { }

推荐答案

您不能全局(即跨模块)使用可用的管道/组件/指令.

You cannot have globally (i.e. across modules) available pipes/components/directives.

如果模块A需要使用不属于该模块的组件/指令/管道，则模块A应该导入包含这些组件/指令/管道的模块.

When you have a module A that needs to use components/directives/pipes that are not part of that module, then module A should import the module containing these components/directives/pipes.

这些内容是否已经在根级别导入并不重要. https://angular.io/guide/ngmodule-faq

It does not matter if these have already been imported at the root level. https://angular.io/guide/ngmodule-faq

如果在多个功能模块中经常需要一组模块，则可以创建一个共享模块，该共享模块可以导入和导出其他模块.然后，在功能模块中，您只需导入该共享模块以使其他模块可用( https://angular.io/guide/ngmodule-faq#can-i-re-export-classes-and-modules )

If you have a set of modules that you frequently need across several of your feature modules, you can create a shared module that imports AND exports these other modules. Then, in your feature modules, you just need to import that shared module to have other modules available (https://angular.io/guide/ngmodule-faq#can-i-re-export-classes-and-modules)

这篇关于延迟加载组件未按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！