Angular2 RC6: '<componente> não é um elemento conhecido'

Estou recebendo o seguinte erro no console do navegador ao tentar executar meu aplicativo 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

Não entendo por que o componente não foi encontrado. Meu PlannerModule é assim:

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

e até onde eu entendi o conceito de Módulos em ng2, as partes dos módulos são declaradas em 'declarações'. Para completar, eis o PlannerComponent:

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

e o HeaderAreaComponent:

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

A <header-area>-Tag está localizada em planner.component.html:

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

    <div class="row">...

Eu entendi algo errado?

Atualização : código completo

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

Eu recebi esse erro quando importei o Módulo A para o Módulo B e tentei usar um componente do Módulo A no Módulo B.

A solução é declarar esse componente na exportsmatriz.

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

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

Corrigi -o com a ajuda da resposta de Sanket e dos comentários.

O que você não sabia e não aparecia na mensagem de erro é: Importei o PlannerComponent como uma @ NgModule.declaration no meu App Module (= RootModule).

O erro foi corrigido importando o PlannerModule como @ NgModule.imports .

Antes:

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

Depois de:

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

Obrigado pela ajuda :)

Se você usou a definição de componente gerada automaticamente pelo Webclipse, pode achar que o nome do seletor foi 'app-' anexado a ela. Aparentemente, essa é uma nova convenção ao declarar subcomponentes de um componente principal do aplicativo. Verifique como o seu seletor foi definido no seu componente, se você usou 'novo' - 'componente' para criá-lo no IDE Angular. Então, ao invés de colocar

<header-area></header-area>

você pode precisar

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

Eu busco o mesmo problema para <flash-messages></flash-messages>com angular 5.

Você só precisa adicionar as linhas abaixo no arquivo app.module.ts

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


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

NB: Estou usando este aqui para mensagens flash-messages

No componente do planejador , você deve estar importando HeaderAreaComponent como este-

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

Além disso, verifique - Todos os componentes e tubulações devem ser declarados por meio de um NgModule .

Veja se isso ajuda.

Eu estava enfrentando esse problema no Angular 7 e o problema ocorreu após a criação do módulo, não executei ng build. Então eu executei -

• ng build
• ng serve

e funcionou.

O erro ocorre no teste de unidade, quando o componente está fora da <router-outlet>página principal do aplicativo. então deve definir o componente no arquivo de teste como abaixo.

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

e, em seguida, precisa adicionar o arquivo spec.ts como abaixo.

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

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        App`enter code here`Component,
        HeaderComponent <------------------------
      ],
    }).compileComponents();
  }));
});

Outra causa possível de ter a mesma mensagem de erro é uma incompatibilidade entre o nome da marca e o nome do seletor. Para este caso:

<header-area></header-area>O nome da tag deve corresponder exatamente 'header-area'à declaração do componente:

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

Eu tive o mesmo problema com o angular RC.6 por algum motivo, ele não permite a passagem de componente para outro componente usando diretivas como decorador de componente para o componente pai

Mas se você importar o componente filho via módulo de aplicativo e adicioná-lo na matriz de declaração, o erro desaparece. Não há muita explicação para por que esse é um problema com o angular rc.6

Quando tive esse problema, foi porque eu usei 'templateUrl' em vez de apenas 'template' no decorador, já que eu uso o webpack e preciso usar requerer nele. Apenas tome cuidado com o nome do decorador; no meu caso, gerei o código padrão usando um trecho, o decorador foi criado como:

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

mas para o webpack, o decorador deve ser apenas ' template ' NOT ' templateUrl ', assim:

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

mudar isso resolveu o problema para mim.

quer saber mais sobre os dois métodos? leia este post médio sobre templatevstemplateUrl

Eu recebi esse erro quando eu tinha um nome de arquivo e classe incompatível exportada:

nome do arquivo: list.component.ts

classe exportada: ListStudentsComponent

A alteração de ListStudentsComponent para ListComponent corrigiu meu problema.

Encontrei exatamente esse problema. Falha: Erros de análise do modelo: 'app-login' não é um elemento conhecido ... com ng test. Tentei todas as respostas acima: nada funcionou.

SOLUÇÃO DE ENSAIO DE NG:

Teste de Karma Angular 2 'component-name' não é um elemento conhecido

<= Adicionei declarações para os componentes incorretosbeforEach(.. declarations[]) em app.component.spec.ts .

EXEMPLO app.component.spec.ts

...
import { LoginComponent } from './login/login.component';
...
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        ...
      ],
      declarations: [
        AppComponent,
        LoginComponent
      ],
    }).compileComponents();
  ...

Eu tive o mesmo problema e corrigi adicionando o componente (MyComponentToUse) na matriz de exportações no módulo em que meu componente foi declarado (ModuleLower). Em seguida, importo o ModuleLower no ModuleHigher, para que eu possa reutilizar agora meu componente (MyComponentToUse) no ModuleLower e no ModuleHigher

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


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

Eu tive o mesmo problema com o Angular 7 quando refino o módulo de teste declarando o componente de teste. Apenas adicionado da schemas: [ CUSTOM_ELEMENTS_SCHEMA ]seguinte forma e o erro foi resolvido.

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

Para problemas futuros. Se você acha que seguiu todas as boas respostas e ainda assim, o problema está aí.

Tente desligar e ligar o servidor.

Eu tive o mesmo problema, segui todas as etapas, não consegui resolvê-lo. Desligue, ligue e foi consertado.

Um erro de novato estava gerando a mesma mensagem de erro no meu caso.

A app-roottag não estava presente no index.html

OnInitfoi implementado automaticamente na minha classe enquanto usava a ng new ...frase-chave na CLI angular para gerar o novo componente. Então, depois que eu removi a implementação e o método vazio que foi gerado, o problema foi resolvido.

Para mim, o caminho para templateUrl não estava correto

Eu estava usando

shopping-list-edit.component.html

Considerando que deveria ter sido

./shopping-list-edit.component.html

Erro bobo, mas acontece quando se inicia. Espero que ajude alguém em perigo.

Resposta tardia para o segmento, mas tenho certeza de que há mais pessoas que podem usar essas informações explicadas em outra perspectiva.

No Ionic, os componentes angulares personalizados são organizados em um módulo separado chamado ComponentsModule. Quando o primeiro componente é gerado usando ionic generate component, junto com o componente, iônico gera o ComponentsModule. Quaisquer componentes subseqüentes são adicionados ao mesmo módulo, com razão.

Aqui está uma amostra 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 {}

Para usar o ComponentsModuleaplicativo, como qualquer outro módulo angular, é ComponentsModulesnecessário importar o arquivo AppModule. O componente ionic generate (v 4.12) não inclui esta etapa, portanto, isso deve ser adicionado manualmente.

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

Ok, deixe-me dar os detalhes do código, como usar o componente de outro módulo.

Por exemplo, eu tenho o módulo M2, o módulo M2 tem o componente comp23 e o componente comp2, agora eu quero usar o comp23 e o comp2 no app.module, aqui está como:

este é app.module.ts, veja meu comentário,

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

este é o módulo 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 { }

Meu elogio no código explica o que você precisa fazer aqui.

agora em app.component.html, você pode usar

  <app-comp23></app-comp23>

siga o módulo de importação de amostra de documento angular