Angular2 RC6: "<компонент> не відомий елемент"

Під час спроби запуску програми 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

Я не розумію, чому компонент не знайдено. Мій Модуль планування виглядає так:

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

і наскільки я зрозумів поняття Модулі в ng2, частини модулів оголошуються в «деклараціях». Для повноти, ось PlanerComponent:

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

The <header-area>-Tag розташований в 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-->

Я отримав цю помилку, коли імпортував модуль A в модуль B, а потім спробував використати компонент з модуля A в модулі B.

Рішення полягає в оголошенні цього компонента в exportsмасиві.

@NgModule({
  declarations: [
    MyComponent
  ],
  exports: [
    MyComponent
  ]
})
export class ModuleA {}

@NgModule({
  imports: [
    ModuleA
  ]
})
export class ModuleB {}

Я зафіксував це за допомогою відповіді Санкета та коментарів.

Те, що ви не могли знати і не було очевидним у Повідомленні про помилку, це: я імпортував 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 {
}

Спасибі за вашу допомогу :)

Якщо ви використовували визначення автоматично створеного компонента Webclipse, ви можете виявити, що ім'я селектора перед ним було "додаток". Мабуть, це нова умова при оголошенні підкомпонентів основного компонента програми. Перевірте, як ваш селектор визначений у вашому компоненті, якщо ви використовували "new" - "компонент" для його створення у Angular IDE. Тож замість того, щоб ставити

<header-area></header-area>

вам може знадобитися

<app-header-area></app-header-area>

Я підбираю ту саму проблему <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 ]
  ------------
})

Примітка: я використовую цей для флеш-повідомлень

У вашому компоненті планування вам не вистачає імпорту HeaderAreaComponent, наприклад,

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

Також переконайтесь, що всі компоненти та труби повинні бути оголошені через NgModule .

Подивіться, чи це допомагає.

Я стикався з цим питанням на Angular 7, і проблема після створення модуля я не виконував ng build. Тому я виконав -

• ng build
• ng serve

і це спрацювало.

Помилка під час тестування одиниць, коли компонент відсутній <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();
  }));
});

Ще одна можлива причина появи одного і того ж повідомлення про помилку - це невідповідність між назвою тегу та іменем селектора. Для цього випадку:

<header-area></header-area> Назва тегу має точно відповідати 'header-area' декларації компонента:

@Component({
  selector: 'header-area',

У мене була така ж проблема з кутовим RC.6, чомусь він не дозволяє передавати компонент іншому компоненту, використовуючи директиви як декоратор компонента до батьківського компонента

Але якщо ви імпортуєте дочірній компонент через модуль програми та додаєте його в масив декларацій, помилка усувається. Немає великого пояснення, чому це проблема з кутовим rc.6

Коли у мене була ця проблема, це тому , що я використовував «templateUrl» замість того , щоб просто «шаблон» в декоратор, так як я використовую Webpack і необхідність використання вимагають в ньому. Будьте обережні з іменем декоратора, у моєму випадку я створив код котла за допомогою фрагмента, декоратор був створений як:

@Component({
  selector: '',
  templateUrl: 'PATH_TO_TEMPLATE'
})

але для веб-упаковки декоратором має бути просто " шаблон " НЕ " templateUrl ", наприклад:

@Component({
  selector: '',
  template: require('PATH_TO_TEMPLATE')
})

зміни цього вирішили проблему для мене.

хочете дізнатися більше про два методи? читайте цей середній пост про templatevstemplateUrl

Я отримав цю помилку, коли у мене було імпорт файлу та клас, експортований невідповідність:

ім'я файлу: list.component.ts

Експорт класу: ListStudentsComponent

Перехід від ListStudentsComponent до ListComponent вирішив мою проблему.

Я зіткнувся з цією точною проблемою. Помилка: Помилки розбору шаблонів: "додаток-вхід" не є відомим елементом ... зng test . Я спробував усі вищезазначені відповіді: нічого не вийшло.

Тест-рішення NG:

Кутовий тест карми 2 "Ім'я компонента" не є відомим елементом

<= Я додав декларації для компонентів, 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();
  ...

У мене була та сама проблема, і я її виправив, додавши компонент (MyComponentToUse) в масив експорту в модуль, де був оголошений мій компонент (ModuleLower). Тоді я імпортую ModuleLower в ModuleHigher, тож я можу повторно використовувати свій компонент (MyComponentToUse) у ModuleLower та ModuleHigher

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


            @NgModule({
              imports: [
                ModuleLower
              ]
            })
            export class ModuleHigher {} 

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

TestBed.configureTestingModule({
  imports: [ReactiveFormsModule, FormsModule],
  declarations: [AddNewRestaurantComponent],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
});

Для майбутніх проблем. Якщо ви думаєте, що ви дотримувались всіх хороших відповідей, і все-таки проблема є.

Спробуйте вимкнути та увімкнути сервер.

У мене була така ж проблема, я дотримувався всіх кроків, не міг її вирішити. Вимкніть, увімкніть і це було виправлено.

Новачка помилка генерувала те саме повідомлення про помилку в моєму випадку.

app-rootТег не був присутній в index.html

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

Для мене шлях для templateUrl був невірним

Я використовував

shopping-list-edit.component.html

Тоді як це мало бути

./shopping-list-edit.component.html

Дурна помилка, але трапляється, коли починається. Сподіваюсь, що допоможе комусь у біді.

Пізня відповідь за нитку, але я впевнений, що є більше людей, які можуть використовувати цю інформацію, пояснену в іншій перспективі.

В Ionic користувацькі кутові компоненти організовані під окремим модулем, який називається ComponentsModule. Коли перший компонент генерується за допомогою ionic generate componentпоряд з компонентом, іонний генерує 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 {}

Гаразд, дозвольте мені дати детальну інформацію про код, як використовувати компонент іншого модуля.

Наприклад, у мене є модуль 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 { }

це модуль м2:

   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>

дотримуйтесь кутовий модуль імпорту зразка doc