Nếu '<selector>' là thành phần Angular, thì hãy xác minh rằng nó là một phần của mô-đun này

Tôi là người mới trong Angular2. Tôi đã cố gắng tạo một thành phần nhưng hiển thị một lỗi.

Đây là app.component.tstập tin.

import { Component } from '@angular/core';
import { MyComponentComponent } from './my-component.component';

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello {{name}}</h1>
    <h4>Something</h4>
    <my-component></my-component>
  `,
  directives: [MyComponentComponent]
})
export class AppComponent { name = 'Sam' }

Đây là thành phần mà tôi muốn tạo.

import { Component } from '@angular/core';

@Component({
selector: 'my-component',
template: `
    <p>This is my article</p>
`
})

export class MyComponentComponent {

}

Hiển thị hai lỗi:

1. Nếu my-componentlà một thành phần Angular, thì xác minh rằng nó là một phần của mô-đun này.
2. Nếu my-componentlà Thành phần Web thì thêm CUSTOM_ELEMENTS_SCHEMAvào @NgModule.schemasthành phần này để chặn thông báo này.

Xin vui lòng giúp đỡ.

Bạn MyComponentComponentnên ở trong MyComponentModule.

Và trong MyComponentModule, bạn nên đặt MyComponentComponentbên trong "xuất khẩu".

Một cái gì đó như thế này, xem mã dưới đây.

@NgModule({
   imports: [],
   exports: [MyComponentComponent],
   declarations: [MyComponentComponent],
   providers: [],
})

export class MyComponentModule {
}

và đặt cái MyComponentModulevào importstrong app.module.tsnhư thế này (xem mã bên dưới).

import { MyComponentModule } from 'your/file/path';

@NgModule({
   imports: [MyComponentModule]
   declarations: [AppComponent],
   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule {}

Sau khi làm như vậy, bộ chọn thành phần của bạn bây giờ có thể được ứng dụng nhận ra.

Bạn có thể tìm hiểu thêm về nó ở đây: https://angular-2-training-book.rangle.io/handout/modules/feature-modules.html

Chúc mừng!

Có lẽ đây là tên của htmlthành phần thẻ

Bạn sử dụng trong htmlmột cái gì đó như thế này<mycomponent></mycomponent>

Bạn phải sử dụng cái này <app-mycomponent></app-mycomponent>

bạn có đang nhập nó theo cách của bạn không app.module.tsvà xóa bit chỉ thị: -

@NgModule({
    bootstrap: [AppComponent],
    imports: [MyComponentModule],// or whatever the name of the module is that declares your component.

    declarations: [AppComponent],
    providers: []
})
export class AppModule {}

Bạn MyComponentModulenên như thế này: -

@NgModule({
    imports: [],
    exports: [MyComponentComponent],
    declarations: [MyComponentComponent],
    providers: [],
})
export class MyComponentModule {
}

Kiểm tra bộ chọn của bạn trong filename.component.ts

Sử dụng thẻ trong các tệp html khác nhau tôi sẽ nói

<my-first-component></my-first-component>

Nên là

<app-my-first-component></app-my-first-component>

Thí dụ

@Component({
  selector: 'app-my-first-component',
  templateUrl: './my-first-component.component.html',
  styleUrls: ['./my-first-component.component.scss']
})

Trong trường hợp của tôi, tôi đã viết các bài kiểm tra đơn vị cho một thành phần sử dụng các thành phần phụ và tôi đã viết các bài kiểm tra để đảm bảo các thành phần phụ đó có trong mẫu:

it('should include the interview selection subview', () => {
    expect(fixture.debugElement.query(By.css('app-interview')))
    .toBeTruthy()  
  }); 

Tôi đã không nhận được một lỗi, nhưng một cảnh báo:

WARN: '' phỏng vấn ứng dụng 'không phải là yếu tố được biết đến:

1. Nếu 'phỏng vấn ứng dụng' là một thành phần Angular, thì hãy xác minh rằng nó là một phần của mô-đun này. WARN: '' phỏng vấn ứng dụng 'không phải là yếu tố được biết đến:
2. Nếu 'phỏng vấn ứng dụng' là một thành phần Angular, thì hãy xác minh rằng nó là một phần của mô-đun này.
3. Nếu 'phỏng vấn ứng dụng' là Thành phần Web thì hãy thêm 'CUSTOM_ELEMENTS_SCHema' vào '@ NgModule.schemas' của thành phần này để chặn thông báo này. '

Ngoài ra, thành phần con không hiển thị bên trong trình duyệt trong quá trình thử nghiệm.

Tôi đã sử dụng ng g c newcomponentđể tạo tất cả các thành phần, vì vậy chúng đã được khai báo trong appmodule, nhưng không phải là mô-đun thử nghiệm cho thành phần mà tôi đang chỉ định.

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ EditorComponent,
        InterviewComponent]
    })
    .compileComponents();
  }));

Bạn phải khai báo MyComponentComponent trong cùng một mô-đun của AppComponent của bạn.

import { AppComponent } from '...';
import { MyComponentComponent } from '...';

@NgModule({
   declarations: [ AppComponent, MyComponentComponent ],
   bootstrap: [ AppComponent ]
})
export class AppModule {}

1. Khai báo của bạn MyComponentComponenttrongMyComponentModule
2. Thêm thuộc tính của bạn MyComponentComponentvàoexportsMyComponentModule

mycomponentModule.ts

@NgModule({
   imports: [],
   exports: [MyComponentComponent],
   declarations: [MyComponentComponent],
   providers: [],
})

export class MyComponentModule {
}

3. Thêm thuộc tính MyComponentModuleAppModule của bạnimports

app.module.ts

    @NgModule({
       imports: [MyComponentModule]
       declarations: [AppComponent],
       providers: [],
       bootstrap: [AppComponent]
    })
    export class AppModule {} 

Quan trọng Nếu bạn vẫn gặp lỗi đó, hãy dừng máy chủ của bạn ctrl+ckhỏi thiết bị đầu cuối và chạy lạing serve -o

Trong trường hợp của tôi, tôi đã có một thành phần trong mô-đun chia sẻ.

Thành phần này đang tải và hoạt động tốt nhưng bản thảo đã làm nổi bật thẻ html bằng dòng màu đỏ và hiển thị thông báo lỗi này.

Trong thành phần này, tôi nhận thấy tôi đã không nhập toán tử rxjs.

import {map} from 'rxjs/operators';

Khi tôi thêm nhập này, thông báo lỗi biến mất.

Kiểm tra tất cả hàng nhập khẩu bên trong linh kiện .

Hy vọng nó sẽ giúp được ai đó.

Kiểm tra mô-đun mà thành phần cha mẹ đang được khai báo trong ...

Nếu thành phần cha mẹ của bạn được xác định trong mô-đun chia sẻ, thì mô-đun con của bạn cũng phải như vậy.

Thành phần cha mẹ có thể được khai báo trong một mô-đun chia sẻ chứ không phải mô-đun hợp lý dựa trên cấu trúc / đặt tên thư mục tệp, ngay cả Angular CLI đã thêm nó vào mô-đun sai trong trường hợp của tôi.

Hy vọng bạn đang có app.module.ts. Trong app.module.tsdòng thêm bên dưới của bạn-

 exports: [myComponentComponent],

Như thế này:

import { NgModule, Renderer } from '@angular/core';
import { HeaderComponent } from './headerComponent/header.component';
import { HeaderMainComponent } from './component';
import { RouterModule } from '@angular/router';

@NgModule({
    declarations: [
        HeaderMainComponent,
        HeaderComponent
    ],
    imports: [
        RouterModule,
    ],
    providers: [],
    bootstrap: [HeaderMainComponent],
    exports: [HeaderComponent],
})
export class HeaderModule { }

Trong các thành phần của bạn.module.ts, bạn nên nhập IonicModule như thế này:

import { IonicModule } from '@ionic/angular';

Sau đó nhập IonicModule như thế này:

  imports: [
    CommonModule,
    IonicModule
  ],

vì vậy các thành phần của bạn.module.ts sẽ như thế này:

import { CommonModule } from '@angular/common';
import {PostComponent} from './post/post.component'
import { IonicModule } from '@ionic/angular';

@NgModule({
  declarations: [PostComponent],
  imports: [
    CommonModule,
    IonicModule
  ],
  exports: [PostComponent]
})
export class ComponentsModule { }```

Đừng export **default** class MyComponentComponent !

Vấn đề liên quan có thể thuộc tiêu đề, nếu không phải là câu hỏi cụ thể:

Tôi vô tình làm một ...

export default class MyComponentComponent {

... Và điều đó cũng làm mọi thứ trở nên tồi tệ.

Tại sao? Mã VS đã thêm nhập vào mô-đun của tôi khi tôi đặt nó vào declarations, nhưng thay vì ...

import { MyComponentComponent } from '...';

nó đã có

import MyComponentComponent from '...';

Và điều đó đã không được ánh xạ xuống phía dưới, giả sử vì nó không "thực sự" được đặt tên ở bất cứ đâu với nhập mặc định.

export class MyComponentComponent {

Không default. Lợi nhuận.