Question

当我尝试启用延迟加载时出现此错误。目前，我在显示页脚的所有组件中都有。

Uncaught Error: Template parse errors:
'app-footer' is not a known element:
1. If 'app-footer' is an Angular component, then verify that it is part of this module.
2. If 'app-footer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
    </div>
    <div class="clearfix"></div>
    [ERROR ->]<app-footer></app-footer>
  </section>
  <section class="body-right-insidepages  animated fadeInRig"): ng:///OurPoliciesModule/OurPoliciesComponent.html@276:4

当前，我正在页面末尾的“我们的政策”组件中实现此功能。我们的策略模块和我们的策略路由都在我们策略的组件目录中。

我们的政策路由

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { OurPoliciesComponent } from './our-policies.component';

const routes: Routes = [
  {
    path: "", component: OurPoliciesComponent
  }
];

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

我们的政策模块

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

import { OurPoliciesRoutingModule } from './our-policies-routing.module';
import { OurPoliciesComponent } from './our-policies.component';

    @NgModule({
      declarations: [OurPoliciesComponent],
      exports: [OurPoliciesComponent],
      imports: [
        CommonModule,
        OurPoliciesRoutingModule
      ]
    })
    export class OurPoliciesModule { }

在app.module中

 imports: [ 
 OurPoliciesModule
 ]

如果我从应用程序模块OurPoliciesModule中删除imports并在our-policy模块中删除了exports: [OurPoliciesComponent]，则该错误仅在我转到localhot：4200 / our-policies route和不在其他组件中。之后，如果我从政策中删除应用程序页脚，则该页面将加载而没有任何错误

Answer 1

您需要将app-footer组件添加到app.module.ts的声明数组中

  declarations: [AppFooterComponent],

Answer 2

您需要有一个共享模块来声明您的app-footer组件，所有应用程序模块都可以导入并使用您的app-footer组件。

DEMO 复制您的问题。

DEMO 修复问题。

请按照以下步骤操作：

使用声明的SharedModule组件创建一个app-footer。

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

import { AppFooter } from '../components/app-footer.component';

@NgModule({
  declarations: [ AppFooter ],
  exports: [ AppFooter ]
})
export class SharedModule {
}

从app-footer中删除AppModule的声明。
将SharedModule导入您的AppModule和OurPoliciesModule中。

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

import { SharedModule } from '../shared-module/shared.module'; // or some other path to it
import { OurPoliciesRoutingModule } from './our-policies-routing.module';
import { OurPoliciesComponent } from './our-policies.component';

    @NgModule({
      declarations: [OurPoliciesComponent],
      exports: [OurPoliciesComponent],
      imports: [
        CommonModule,
        OurPoliciesRoutingModule,
        SharedModule
      ]
    })
    export class OurPoliciesModule { }

错误如果“ app-footer”是Angular组件，请验证它是否属于此模块

2 个答案: