Ошибка Если app-footer является угловым компонентом, убедитесь, что он является частью этого модуля.

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

В приложении.модуль

 imports: [ 
 OurPoliciesModule
 ]

Если я удаляю OurPoliciesModule из модуля приложения imports и удаляю exports: [OurPoliciesComponent] внутри модуля нашей политики, то ошибка появляется только тогда, когда я иду на localhot: 4200 / наш маршрут политики, а не в других компонентах. И после этого, если я удаляю app-footer из наших политик, то страница загружается без ошибок

Answer 1

У вас должен быть общий модуль, объявляющий ваш компонент app-footer, чтобы все модули приложения могли импортировать и использовать ваш компонент app-footer, используя его.

DEMO воспроизведение ваша проблема.

DEMO исправление проблемы.

Выполните следующие действия:

1. Создайте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 { }

Answer 2

Вам необходимо добавить компонент app-footer в массив объявлений app.module.ts

  declarations: [AppFooterComponent],