Question

我正在尝试实现产品组件的延迟加载。该组件按预期延迟加载，但当我将NavBarComponent模板包含为产品模板的子组件时，我收到以下错误：

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中声明，如下所示，并且应该对产品组件可见：

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模板产生错误）

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

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：

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 :(热门应用程序路由模块）

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 { }

Answer 1

您不能拥有全局（即跨模块）可用的管道/组件/指令。

当你有一个模块A需要使用不属于该模块的组件/指令/管道时，模块A应该导入包含这些组件/指令/管道的模块。

如果这些已经在根级别导入并不重要。 https://angular.io/guide/ngmodule-faq

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

延迟加载组件未按预期工作

1 个答案: