Angular2 RC6: „<komponent> nie jest znanym elementem”

Podczas próby uruchomienia aplikacji Angular 2 RC6 pojawia się następujący błąd w konsoli przeglądarki:

> 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

Nie rozumiem, dlaczego składnik nie został znaleziony. Mój moduł PlannerModule wygląda następująco:

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

i o ile zrozumiałem pojęcie modułów w ng2, części modułów są zadeklarowane w „deklaracjach”. Aby uzyskać kompletność, oto element PlannerComponent:

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

i składnik HeaderAreaComponent:

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

<header-area>-Tag znajduje się w planner.component.html:

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

    <div class="row">...

Coś nie tak?

Aktualizacja : pełny kod

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

Otrzymałem ten błąd, kiedy zaimportowałem moduł A do modułu B, a następnie próbowałem użyć komponentu z modułu A w module B.

Rozwiązaniem jest zadeklarowanie tego komponentu w exportstablicy.

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

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

Naprawiłem to za pomocą odpowiedzi Sanketa i komentarzy.

To, czego nie mogłeś wiedzieć i nie było widoczne w komunikacie o błędzie, to: Zaimportowałem element PlannerComponent jako @ NgModule.declaration w moim module aplikacji (= RootModule).

Błąd został naprawiony poprzez zaimportowanie modułu PlannerModule jako @ NgModule.imports .

Przed:

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

Po:

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

Dzięki za pomoc :)

Jeśli użyłeś automatycznie wygenerowanej definicji komponentu Webclipse, może się okazać, że nazwa selektora ma przedrostek „app-”. Najwyraźniej jest to nowa konwencja deklarowania podskładników głównego składnika aplikacji. Sprawdź, jak twój selektor został zdefiniowany w twoim komponencie, jeśli użyłeś 'nowego' - 'komponentu' do utworzenia go w Angular IDE. Więc zamiast wkładać

<header-area></header-area>

możesz potrzebować

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

Pobieram ten sam problem <flash-messages></flash-messages>z Angular 5.

Wystarczy dodać poniższe linie w pliku app.module.ts

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


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

NB: Używam tego do wiadomości flash

W swojej planisty komponentu, musisz być brakuje import HeaderAreaComponent jak to-

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

Upewnij się również, że - wszystkie komponenty i rury muszą być zadeklarowane za pośrednictwem NgModule .

Zobacz, czy to pomaga.

Miałem do czynienia z tym problemem na Angular 7 i problem polegał na tym, że po utworzeniu modułu nie wykonałem ng build. Więc wykonałem -

• ng build
• ng serve

i zadziałało.

Błąd pojawiający się w teście jednostkowym, gdy komponent jest poza <router-outlet>główną stroną aplikacji. więc należy zdefiniować komponent w pliku testowym, jak poniżej.

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

a następnie musi dodać plik spec.ts, jak poniżej.

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

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

Inną możliwą przyczyną tego samego komunikatu o błędzie jest niezgodność między nazwą znacznika a nazwą selektora. W tym przypadku:

<header-area></header-area>nazwa tagu musi dokładnie pasować 'header-area'do deklaracji komponentu:

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

Miałem ten sam problem z kątowym RC.6 z jakiegoś powodu nie pozwala na przekazywanie komponentu do innego komponentu przy użyciu dyrektyw jako dekoratora komponentu do komponentu nadrzędnego

Ale jeśli zaimportujesz komponent podrzędny za pośrednictwem modułu aplikacji i dodasz go do tablicy deklaracji, błąd zniknie. Nie ma zbytniego wyjaśnienia, dlaczego jest to problem z kątowym rc.6

Kiedy miałem ten problem, to dlatego, że użyłem „templateUrl” zamiast po prostu „template” w dekoratorze, ponieważ używam webpacka i muszę w nim użyć require . Tylko uważaj na nazwę dekoratora, w moim przypadku wygenerowałem kod standardowy za pomocą fragmentu, dekorator został utworzony jako:

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

ale w przypadku pakietu internetowego dekorator powinien mieć postać „ template ” NOT „ templateUrl ”, jak na przykład:

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

zmiana tego rozwiązała problem dla mnie.

chcesz dowiedzieć się więcej o tych dwóch metodach? przeczytaj ten średni post o templatevstemplateUrl

Wystąpił ten błąd, gdy miałem niezgodność wyeksportowanej nazwy pliku i klasy:

nazwa pliku: list.component.ts

wyeksportowana klasa: ListStudentsComponent

Zmiana z ListStudentsComponent na ListComponent rozwiązała mój problem.

Natknąłem się dokładnie na ten problem. Niepowodzenie: błędy analizy szablonu: „logowanie do aplikacji” nie jest znanym elementem ... z ng test. Wypróbowałem wszystkie powyższe odpowiedzi: nic nie działało.

ROZWIĄZANIE TESTOWE NG:

Nazwa komponentu w Angular 2 Karma Test nie jest znanym elementem

<= Dodałem deklaracje szkodliwych komponentów beforEach(.. declarations[])do app.component.spec.ts .

PRZYKŁAD app.component.spec.ts

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

Miałem ten sam problem i naprawiłem go dodając komponent (MyComponentToUse) do tablicy export w module, w którym zadeklarowano mój komponent (ModuleLower). Następnie importuję ModuleLower do ModuleHigher, dzięki czemu mogę ponownie użyć teraz mojego komponentu (MyComponentToUse) w ModuleLower i ModuleHigher

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


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

Błąd początkującego generował ten sam komunikat o błędzie w moim przypadku.

app-rootZnacznik nie był obecny w index.html

Dla mnie ścieżka do templateUrl była nieprawidłowa

Używałem

shopping-list-edit.component.html

Podczas gdy tak powinno być

./shopping-list-edit.component.html

Głupi błąd, ale zdarza się, gdy zaczynasz. Mam nadzieję, że pomoże to komuś w potrzebie.

Miałem ten sam problem z Angular 7, kiedy zamierzam udoskonalić moduł testowy, deklarując komponent testowy. Po prostu dodano schemas: [ CUSTOM_ELEMENTS_SCHEMA ]w następujący sposób i błąd został rozwiązany.

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

Na przyszłe problemy. Jeśli myślisz, że zastosowałeś się do wszystkich dobrych odpowiedzi, a jednak problem jest.

Spróbuj wyłączyć i włączyć serwer.

Miałem ten sam problem, wykonałem wszystkie kroki, nie mogłem go rozwiązać. Wyłącz, włącz i zostało to naprawione.

OnInitzostał automatycznie zaimplementowany w mojej klasie podczas używania ng new ...frazy kluczowej w kątowym interfejsie wiersza polecenia do generowania nowego komponentu. Po usunięciu implementacji i usunięciu wygenerowanej metody pustej problem został rozwiązany.

Ok, podaję szczegóły kodu, jak korzystać z komponentu innego modułu.

Na przykład mam moduł M2, moduł M2 ma komponent comp23 i komponent comp2, teraz chcę użyć comp23 i comp2 w app.module, oto jak:

to jest app.module.ts, zobacz mój komentarz,

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

to jest moduł 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 { }

Moje wyróżnienie w kodzie wyjaśnia, co musisz tutaj zrobić.

teraz w app.component.html, możesz użyć

  <app-comp23></app-comp23>

postępuj zgodnie z angular doc sample import modul

Spóźniona odpowiedź na wątek, ale jestem pewien, że jest więcej osób, które mogą wykorzystać te informacje wyjaśnione z innej perspektywy.

W Ionic niestandardowe komponenty kątowe są zorganizowane w oddzielnym module o nazwie ComponentsModule. Gdy pierwszy składnik jest generowany przy użyciu ionic generate component, wraz ze składnikiem, joniczny generujeComponentsModule . Wszelkie kolejne komponenty są dodawane do tego samego modułu, słusznie.

Oto próbka 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 {}

Aby korzystać z ComponentsModuleaplikacji w aplikacji, podobnie jak innych modułów kątowych, ComponentsModulesnależy zaimportować do AppModule. komponent generujący jony (wersja 4.12) nie dodaje tego kroku, więc należy go dodać ręcznie.

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