Я получаю следующую ошибку в консоли браузера при попытке запустить приложение Angular 2 RC6:

> Error: Template parse errors: 'header-area' is not a known element:
> 1. If 'header-area' is an Angular component, then verify that it is part of this module.
> 2. If 'header-area' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component
> to suppress this message.("

    <div class="page-container">
        [ERROR->]<header-area></header-area>
        <div class="container-fluid">

> "): PlannerComponent@1:2

Я не понимаю, почему компонент не найден. Мой PlannerModule выглядит так:

@NgModule({
  declarations: [
    PlannerComponent,
    HeaderAreaComponent,
    NavbarAreaComponent,
    EreignisbarAreaComponent,
    GraphAreaComponent,
    nvD3
    ],
  imports: [
    RouterModule,
    CommonModule,
    ModalModule
    ],
  bootstrap: [PlannerComponent],
})
export class PlannerModule {}

И насколько я понял концепцию модулей в ng2, части модулей объявлены в «декларациях». Для полноты, вот PlannerComponent:

@Component({
  selector: 'planner',
  providers: [CalculationService],
  templateUrl: './planner.component.html',
  styleUrls: ['./planner.component.styl']
})
export default class PlannerComponent {
}

И HeaderAreaComponent:

@Component({
  selector: 'header-area',
  templateUrl: './header-area.component.html',
  styleUrls: ['./header-area.component.styl']
})
export default class HeaderAreaComponent {
}

Тег <header-area> находится в файле planner.component.html:

<div class="page-container">
  <header-area></header-area>
  <div class="container-fluid">

    <div class="row">...

Я что-то не так понял?

Обновление : полный код

Planner.module.ts:

import HeaderAreaComponent from '../header-area/header-area.component';
import NavbarAreaComponent from '../navbar-area/navbar-area.component';
import GraphAreaComponent from '../graph-area/graph-area.component';
import EreignisbarAreaComponent from '../ereignisbar-area/ereignisbar-area.component';
import PlannerComponent from './planner.component';
import {NgModule} from '@angular/core';
import {nvD3} from 'ng2-nvd3';
import {RouterModule} from '@angular/router';
import {CommonModule} from '@angular/common';
import {ModalModule} from 'ng2-bootstrap/ng2-bootstrap';

@NgModule({
  declarations: [
    PlannerComponent,
    HeaderAreaComponent,
    NavbarAreaComponent,
    EreignisbarAreaComponent,
    GraphAreaComponent,
    nvD3
  ],
  imports: [
    RouterModule,
    CommonModule,
    ModalModule
  ],
  bootstrap: [PlannerComponent],
})
export class PlannerModule {
  // TODO: get rid of the "unused class" warning
}

Planner.component.ts

import {Component} from '@angular/core';
import CalculationService from '../_shared/services/calculation.service/calculation.service';
import HeaderAreaComponent from '../header-area/header-area.component';

@Component({
  selector: 'planner',
  providers: [CalculationService],
  templateUrl: './planner.component.html',
  styleUrls: ['./planner.component.styl']
})
export default class PlannerComponent {
}

Planner.component.html

<div class="page-container">
  <header-area></header-area>
  <div class="container-fluid">

    <div class="row">
      <div class="col-xs-2 col-sm-1 sidebar">
        <navbar-area></navbar-area>
      </div>
      <div class="col-xs-10 col-sm-11">
        <graph-area></graph-area>
      </div>
    </div><!--/.row-->

    <div class="row">
      <div class="col-xs-10 col-sm-11 offset-sm-1">
        <ereignisbar-area></ereignisbar-area>
      </div>
    </div><!--/.row-->

  </div><!--/.container-->
</div><!--/.page-container-->
143
Florian Gössele 5 Сен 2016 в 18:29

20 ответов

Лучший ответ

Я исправил это с помощью ответа Санкета и комментариев.

То, что вы не могли знать и не было видно в сообщении об ошибке: я импортировал PlannerComponent как @ NgModule.declaration в свой модуль приложения (= RootModule).

Ошибка была исправлена ​​путем импорта PlannerModule как @ NgModule.imports .

Перед:

@NgModule({
  declarations: [
    AppComponent,
    PlannerComponent,
    ProfilAreaComponent,
    HeaderAreaComponent,
    NavbarAreaComponent,
    GraphAreaComponent,
    EreignisbarAreaComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routeConfig),
    PlannerModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {

После:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routeConfig),
    PlannerModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Спасибо за вашу помощь :)

36
Community 23 Май 2017 в 11:47

Я получил эту ошибку, когда импортировал модуль A в модуль B, а затем попытался использовать компонент из модуля A в модуле B.

Решение состоит в том, чтобы объявить этот компонент в массиве exports.

@NgModule({
  declarations: [
    MyComponent
  ],
  exports: [
    MyComponent
  ]
})
export class ModuleA {}
@NgModule({
  imports: [
    ModuleA
  ]
})
export class ModuleB {}
259
Stephen Paul 18 Окт 2019 в 06:55

Если вы использовали автоматически сгенерированное определение компонента Webclipse, вы можете обнаружить, что к имени селектора добавлено «app-». По-видимому, это новое соглашение при объявлении подкомпонентов основного компонента приложения. Проверьте, как ваш селектор был определен в вашем компоненте, если вы использовали «новый» - «компонент» для его создания в Angular IDE. Поэтому вместо того, чтобы ставить

<header-area></header-area>

Вам может понадобиться

<app-header-area></app-header-area>
24
FayeB 4 Июл 2017 в 09:52

Я получаю ту же проблему для <flash-messages></flash-messages> с угловым 5.

Вам просто нужно добавить строки ниже в файл app.module.ts

import { ---, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FlashMessageModule } from "angular-flash-message";


@NgModule({
  ---------------
  imports: [
    FlashMessageModule,
    ------------------         
  ], 
  -----------------
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
  ------------
})

NB: я использую его для сообщений flash-сообщений

8
reza.cse08 8 Янв 2018 в 10:54

В вашем компоненте планировщика вы должны отсутствовать import HeaderAreaComponent , например:

import { HeaderAreaComponent } from '../header-area.component'; 
//change path according your project

Кроме того, убедитесь: Все компоненты и каналы должны быть объявлены через модуль NgModule .

Посмотрим, поможет ли это.

7
Marc 3 Июл 2018 в 08:11

Я столкнулся с этой проблемой в Angular 7 , и проблема заключалась в том, что после создания модуля я не выполнял ng build. Итак, я выступил -

  • ng build
  • ng serve

И это сработало.

7
Shailesh Pratapwar 22 Фев 2019 в 08:24

Ошибка в модульном тесте, когда компонент находится вне <router-outlet> на главной странице приложения. поэтому следует определить компонент в тестовом файле, как показано ниже.

<app-header></app-header>
<router-outlet></router-outlet>

А затем необходимо добавить в файл spec.ts, как показано ниже.

import { HeaderComponent } from './header/header.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        App`enter code here`Component,
        HeaderComponent <------------------------
      ],
    }).compileComponents();
  }));
});
5
Farzad.Kamali 6 Июн 2019 в 15:18

Другой возможной причиной появления того же сообщения об ошибке является несоответствие между именем тега и именем селектора. В этом случае:

Имя тега <header-area></header-area> должно точно соответствовать 'header-area' из объявления компонента:

@Component({
  selector: 'header-area',
3
Alexei 16 Май 2017 в 15:43

У меня была такая же проблема с angular RC.6, по какой-то причине он не позволяет передавать компонент другому компоненту, используя директивы в качестве декоратора компонента для родительского компонента.

Но если вы импортируете дочерний компонент через модуль приложения и добавите его в массив объявлений, ошибка исчезнет. Нет особого объяснения, почему это проблема с angular rc.6

2
Emmanuel Mariki 5 Сен 2016 в 23:25

Я получил эту ошибку, когда у меня было несоответствие экспортированного имени файла и класса:

Имя файла: list.component.ts

Экспортированный класс: ListStudentsComponent

Изменение с ListStudentsComponent на ListComponent устранило мою проблему.

2
GonnaGetGet 10 Апр 2018 в 20:57

Я столкнулся с этой проблемой. Ошибка: ошибки синтаксического анализа шаблона: 'app-login' - неизвестный элемент ... с ng test. Я попробовал все вышеперечисленные ответы: ничего не помогло.

РЕШЕНИЕ ДЛЯ ТЕСТА NG:

Angular 2 Karma Test 'component-name' не известен как элемент

<= Я добавил объявления о проблемных компонентах в beforEach(.. declarations[]) в app.component.spec.ts .

ПРИМЕР app.component.spec.ts

...
import { LoginComponent } from './login/login.component';
...
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        ...
      ],
      declarations: [
        AppComponent,
        LoginComponent
      ],
    }).compileComponents();
  ...
2
paulsm4 22 Янв 2019 в 20:57

У меня была такая же проблема, и я исправил, добавив компонент (MyComponentToUse) в массив экспорта в модуле, в котором был объявлен мой компонент (ModuleLower). Затем я импортирую ModuleLower в ModuleHigher, поэтому теперь я могу повторно использовать свой компонент (MyComponentToUse) в ModuleLower и ModuleHigher.

            @NgModule({
              declarations: [
                MyComponentToUse
              ],
              exports: [
                MyComponentToUse
              ]
            })
            export class ModuleLower {}


            @NgModule({
              imports: [
                ModuleLower
              ]
            })
            export class ModuleHigher {} 
2
Ilyes CHERIF 12 Мар 2019 в 11:03

В моем случае ошибка новичка генерировала такое же сообщение об ошибке.

Тег app-root отсутствовал в index.html

1
Felipe Andrade 12 Авг 2017 в 11:23

Для меня путь для templateUrl был неправильным

Я использовал

список покупок-edit.component.html

Тогда как это должно было быть

./shopping-list-edit.component.html

Глупая ошибка, но случающаяся при запуске. Надеюсь, что это поможет кому-то в беде.

1
Meena Chaudhary 6 Авг 2018 в 10:14

У меня была такая же проблема с Angular 7, когда я собирался доработать тестовый модуль, объявив тестовый компонент. Просто добавил schemas: [ CUSTOM_ELEMENTS_SCHEMA ] следующим образом, и ошибка была решена.

TestBed.configureTestingModule({
  imports: [ReactiveFormsModule, FormsModule],
  declarations: [AddNewRestaurantComponent],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
});
1
Chamila Maddumage 21 Мар 2019 в 07:51

Для будущих проблем. Если вы думаете, что следовали всем правильным ответам, но проблема в этом.

Попробуйте выключить и снова включить сервер.

У меня была такая же проблема, я выполнил все шаги, но не смог ее решить. Выключили, включили и это было исправлено.

1
Lena Tevar 13 Авг 2019 в 09:17

OnInit был автоматически реализован в моем классе при использовании ключевой фразы ng new ... в angular CLI для создания нового компонента. Итак, после того как я удалил реализацию и удалил пустой метод, который был сгенерирован, проблема решена.

0
Auguste 8 Окт 2017 в 23:13

Хорошо, позвольте мне подробно рассказать о том, как использовать компоненты другого модуля.

Например, у меня есть модуль M2, модуль M2 имеет компонент comp23 и компонент comp2. Теперь я хочу использовать comp23 и comp2 в app.module, вот как:

Это app.module.ts, см. мой комментарий,

 // import this module's ALL component, but not other module's component, only this module
  import { AppComponent } from './app.component';
  import { Comp1Component } from './comp1/comp1.component';

  // import all other module,
 import { SwModule } from './sw/sw.module';
 import { Sw1Module } from './sw1/sw1.module';
 import { M2Module } from './m2/m2.module';

   import { CustomerDashboardModule } from './customer-dashboard/customer-dashboard.module';


 @NgModule({

    // declare only this module's all component, not other module component.  

declarations: [
AppComponent,
Comp1Component,


 ],

 // imports all other module only.
imports: [
BrowserModule,
SwModule,
Sw1Module,
M2Module,
CustomerDashboardModule // add the feature module here
],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

Это модуль m2:

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

   // must import this module's all component file
   import { Comp2Component } from './comp2/comp2.component';
   import { Comp23Component } from './comp23/comp23.component';

   @NgModule({

   // import all other module here.
     imports: [
       CommonModule
     ],

    // declare only this module's child component. 
     declarations: [Comp2Component, Comp23Component],

   // for other module to use these component, must exports
     exports: [Comp2Component, Comp23Component]
   })
   export class M2Module { }

Мой комментарий в коде объясняет, что вам здесь нужно делать.

Теперь в app.component.html вы можете использовать

  <app-comp23></app-comp23>

Следовать угловому документу образец модуля импорта

0
hoogw 25 Янв 2018 в 17:37

Поздний ответ для темы, но я уверен, что есть больше людей, которые могут использовать эту информацию, объясненную в другом ракурсе.

В Ionic пользовательские угловые компоненты организованы в отдельный модуль ComponentsModule. Когда первый компонент генерируется с помощью ionic generate component вместе с компонентом, ionic генерирует ComponentsModule. Любые последующие компоненты добавляются в тот же модуль, и это правильно.

Вот пример ComponentsModule

import { NgModule } from '@angular/core';
import { CustomAngularComponent } from './custom/custom-angular-component';
import { IonicModule } from 'ionic-angular';
@NgModule({
    declarations: [CustomAngularComponent],
    imports: [IonicModule],
    exports: [CustomAngularComponent],
    entryComponents:[

      ]
})
export class ComponentsModule {}

Чтобы использовать ComponentsModule в приложении, как и любые другие угловые модули, ComponentsModules необходимо импортировать в AppModule. Компонент ионного генерирования (v 4.12) не добавляет этот шаг, поэтому его нужно добавить вручную.

Выдержка из AppModule:

@NgModule({
  declarations: [
    //declaration
  ],
  imports: [
    //other modules 
    ComponentsModule,
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    //ionic pages
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    //other providers
  ]
})
export class AppModule {}
0
Aragorn 28 Сен 2018 в 17:42