Angular2 RC6: '<component> не является известным элементом'

Ответ 1

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

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

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

Ответ 2

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

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

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

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

Ответ 3

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

<header-area></header-area>

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

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

Ответ 4

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

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

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

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

Ответ 5

Я получаю ту же проблему для <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-сообщения

Ответ 6

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

• ng build
• ng serve

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

Ответ 7

Ошибка в модульном тесте, когда компонент находится вне <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();
  }));
});

Ответ 8

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

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

Ответ 9

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

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

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

Ответ 10

Когда у меня возникла эта проблема, это было потому, что я использовал шаблон templateUrl вместо "шаблона" в декораторе, так как я использую webpack и вам нужно использовать require. Просто будьте осторожны с именем декоратора, в моем случае я сгенерировал код шаблона с помощью фрагмента, декоратор был создан как:

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

но для webpack декоратор должен быть просто "шаблоном" НЕ 'templateUrl', например:

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

меняя это, я решил проблему.

Хотите узнать больше о двух методах? прочитайте этот средний пост о template vs templateUrl

Ответ 11

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

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

экспортируемый класс: ListStudentsComponent

Переход от ListStudentsComponent к ListComponent устранил мою проблему.

Ответ 12

Я столкнулся с этой точной проблемой. Failed: Ошибки синтаксического анализа шаблона: '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();
  ...

Ответ 13

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

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


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

Ответ 14

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

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

Ответ 15

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

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

Ответ 16

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

Ответ 17

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

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

торгово-список-edit.component.html

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

./shopping-list-edit.component.html

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

Ответ 18

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

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

Ответ 19

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

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

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

Ответ 20

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

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

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

 // import this module ALL component, but not other module 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 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 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 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>

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