Angular2 RC6: '<thành phần> không phải là yếu tố đã biết'

Tôi gặp lỗi sau trong bảng điều khiển trình duyệt khi thử chạy ứng dụng Angular 2 RC6 của mình:

> 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

Tôi không hiểu tại sao thành phần không được tìm thấy. PlannerModule của tôi trông như thế này:

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

và theo như tôi hiểu khái niệm Mô-đun trong ng2, các phần của mô-đun được khai báo trong 'khai báo'. Để hoàn thiện, đây là PlannerComponent:

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

và HeaderAreaComponent:

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

Các <header-area>-Tag tọa lạc tại planner.component.html:

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

    <div class="row">...

Tôi đã nhận được một cái gì đó sai?

Cập nhật : Hoàn thành mã

kế hoạch.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
}

kế hoạch.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-->

Tôi đã nhận được lỗi này khi tôi nhập Mô-đun A vào Mô-đun B, và sau đó thử sử dụng một thành phần từ Mô-đun A trong Mô-đun B.

Giải pháp là khai báo thành phần đó trong exportsmảng.

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

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

Tôi đã sửa nó với sự giúp đỡ của câu trả lời của Sanket và các ý kiến.

Những gì bạn không thể biết và không rõ ràng trong các thông báo lỗi là: Tôi nhập khẩu các PlannerComponent như một @ NgModule.declaration trong Module App của tôi (= RootModule).

Lỗi đã được khắc phục bằng cách nhập PlannerModule dưới dạng @ NgModule.imports .

Trước:

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

Sau:

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

Cảm ơn bạn đã giúp đỡ :)

Nếu bạn đã sử dụng định nghĩa thành phần được tạo tự động Webclipse, bạn có thể thấy rằng tên bộ chọn có 'ứng dụng-' được đặt trước nó. Rõ ràng đây là một quy ước mới khi khai báo các thành phần phụ của một thành phần ứng dụng chính. Kiểm tra cách bộ chọn của bạn đã được xác định trong thành phần của bạn nếu bạn đã sử dụng 'thành phần mới' - 'thành phần' để tạo nó trong Angular IDE. Vì vậy, thay vì đặt

<header-area></header-area>

bạn có thể cần

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

Tôi tìm nạp cùng một vấn đề <flash-messages></flash-messages>với góc 5.

Bạn chỉ cần thêm dòng dưới đây trong tệp app.module.ts

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


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

NB: Tôi đang sử dụng cái này cho tin nhắn flash

Trong thành phần kế hoạch của bạn , bạn phải thiếu nhập HeaderAreaComponent như thế này-

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

Ngoài ra, hãy chắc chắn - Tất cả các thành phần và đường ống phải được khai báo thông qua NgModule .

Xem nếu điều này giúp.

Tôi đã phải đối mặt với vấn đề này trên Angular 7 và vấn đề là sau khi tạo mô-đun, tôi đã không thực hiện ng build. Vì vậy, tôi đã thực hiện -

• ng build
• ng serve

va no đa hoạt động.

Lỗi trong kiểm tra đơn vị, khi thành phần không có <router-outlet>trong trang ứng dụng chính. vì vậy nên xác định thành phần trong tập tin thử nghiệm như dưới đây.

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

và sau đó cần thêm vào tệp spec.ts như dưới đây.

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

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

Một nguyên nhân có thể khác có cùng thông báo lỗi là sự không khớp giữa tên thẻ và tên bộ chọn. Đối với trường hợp này:

<header-area></header-area>Tên thẻ phải khớp chính xác với 'header-area'khai báo thành phần:

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

Tôi đã gặp vấn đề tương tự với RC.6 góc vì một số lý do nó không cho phép chuyển thành phần này sang thành phần khác bằng cách sử dụng chỉ thị làm trang trí thành phần cho thành phần chính

Nhưng nếu bạn nhập thành phần con qua mô-đun ứng dụng và thêm nó vào mảng khai báo thì lỗi sẽ biến mất. Không có nhiều lời giải thích cho lý do tại sao đây là một vấn đề với RC.6 góc cạnh

Khi tôi gặp vấn đề này, đó là vì tôi đã sử dụng 'templateUrl' thay vì chỉ 'template' trong trình trang trí, vì tôi sử dụng webpack và cần sử dụng yêu cầu trong đó. Chỉ cần cẩn thận với tên trang trí, trong trường hợp của tôi, tôi đã tạo mã soạn sẵn bằng đoạn mã, trang trí được tạo như sau:

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

nhưng đối với gói web, trình trang trí chỉ nên là ' mẫu ' KHÔNG ' templateUrl ', như vậy:

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

thay đổi điều này giải quyết vấn đề cho tôi.

Bạn muốn biết thêm về hai phương pháp? đọc bài trung bình này về templatevstemplateUrl

Tôi đã gặp lỗi này khi tôi có một tên tệp và lớp xuất không khớp:

tên tệp: list.component.ts

lớp đã xuất: ListStudentsComponent

Việc thay đổi từ ListStudentsComponent thành ListComponent đã khắc phục sự cố của tôi.

Tôi đã chạy qua vấn đề chính xác này. Không thể: Lỗi phân tích mẫu: 'đăng nhập ứng dụng' không phải là yếu tố đã biết ... với ng test. Tôi đã thử tất cả các câu trả lời trên: không có gì hiệu quả.

GIẢI PHÁP NG KIỂM TRA:

Angular 2 Karma Test 'tên thành phần' không phải là một yếu tố được biết đến

<= Tôi đã thêm tờ khai cho các thành phần xúc phạm vào beforEach(.. declarations[])để app.component.spec.ts .

VÍ DỤ app.component.spec.ts

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

Tôi đã có cùng một vấn đề và tôi đã khắc phục bằng cách thêm thành phần (MyComponentToUse) vào mảng xuất trong mô-đun nơi thành phần của tôi được khai báo (ModuleLower). Sau đó, tôi nhập ModuleLower trong ModuleHigher, vì vậy bây giờ tôi có thể sử dụng lại thành phần của mình (MyComponentToUse) trong ModuleLower và ModuleHigher

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


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

Tôi gặp vấn đề tương tự với Angular 7 khi tôi sẽ tinh chỉnh mô-đun thử nghiệm bằng cách khai báo thành phần thử nghiệm. Chỉ cần thêm schemas: [ CUSTOM_ELEMENTS_SCHEMA ]như sau và lỗi đã được giải quyết.

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

Đối với các vấn đề trong tương lai. Nếu bạn nghĩ rằng bạn đã làm theo tất cả các câu trả lời hay, thì vấn đề là ở đó.

Hãy thử tắt và bật máy chủ.

Tôi đã có cùng một vấn đề, làm theo tất cả các bước, không thể giải quyết nó. Tắt, bật và nó đã được sửa.

Một lỗi người mới đã tạo ra thông báo lỗi tương tự trong trường hợp của tôi.

Các app-rootthẻ đã không có mặt trong index.html

OnInitđã được tự động triển khai trên lớp của tôi trong khi sử dụng ng new ...cụm từ chính trên CLI góc để tạo thành phần mới. Vì vậy, sau khi tôi loại bỏ việc thực hiện và loại bỏ phương thức trống đã được tạo, vấn đề được giải quyết.

Đối với tôi đường dẫn cho templateUrl không chính xác

tôi đang sử dụng

shopping-list-edit.component.html

Trong khi đó nó nên được

./shopping-list-edit.component.html

Sai lầm ngớ ngẩn nhưng xảy ra khi bắt đầu. Hy vọng rằng sẽ giúp ai đó gặp nạn.

Câu trả lời muộn cho chủ đề, nhưng tôi chắc chắn có nhiều người có thể sử dụng thông tin này được giải thích trong một góc nhìn khác.

Trong Ionic, các thành phần góc tùy chỉnh được tổ chức theo một mô-đun riêng gọi là ComponentsModule. Khi thành phần đầu tiên được tạo bằng cách sử dụng ionic generate component, cùng với thành phần đó, ion sẽ tạo ra ComponentsModule. Bất kỳ thành phần tiếp theo nào được thêm vào cùng một mô-đun, đúng như vậy.

Đây là một mẫu 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 {}

Để sử dụng ComponentsModuletrong ứng dụng, giống như bất kỳ mô-đun góc nào khác, ComponentsModulescần phải được nhập vào AppModule. thành phần tạo ion (v 4.12) không thêm bước này, vì vậy điều này phải được thêm bằng tay.

Trích đoạn 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, hãy để tôi cung cấp các chi tiết về mã, cách sử dụng thành phần của mô-đun khác.

Ví dụ: tôi có mô-đun M2, mô-đun M2 có thành phần comp23 và thành phần comp2, Bây giờ tôi muốn sử dụng comp23 và comp2 trong app.module, đây là cách:

đây là app.module.ts, xem bình luận của tôi,

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

đây là mô-đun 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 { }

Lời khen của tôi trong mã giải thích những gì bạn cần làm ở đây.

bây giờ trong app.component.html, bạn có thể sử dụng

  <app-comp23></app-comp23>

theo modul nhập mẫu tài liệu góc