Question

我在使用Angular的组件时遇到了问题。我的应用程序只使用一个模块（app.module）。我创建了一个名为＆＃39; BooksComponent＆＃39;使用选择器和app-books＆＃39;对于HTML。当我在app.component中使用它时，我收到此错误：

＆＃39; APP-书籍＆＃39;不是一个已知的元素： 1.如果＆＃39; app-books＆＃39;是一个Angular组件，然后验证它是否是此模块的一部分。 2.如果＆＃39; app-books＆＃39;是一个Web组件，然后添加＆＃39; CUSTOM_ELEMENTS_SCHEMA＆＃39;到了＆＃39; @ NgModule.schemas＆＃39;该组件可以禁止此消息。

我的代码是这样的：

books.component.ts

＆＃13;

import { Component, OnInit } from '@angular/core';
import { Book } from '../book';
import { BOOKS } from '../mock-books';


@Component({
  selector: 'app-books',
  templateUrl: './books.component.html',
  styleUrls: ['./books.component.css']
})
export class BooksComponent implements OnInit {

        books = BOOKS;
        selectedBook : Book;

  constructor() { }

  ngOnInit() {
  }

}

＆＃13;

app.component.ts

＆＃13;

import { Component } from '@angular/core';


@Component({
  selector: 'app-root',
  template: `<h1>{{title}}</h1>
            <app-books></app-books>`
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'BookShelf';
}

＆＃13;

最后：的 app.module.ts

＆＃13;

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';


import { AppComponent } from './app.component';
import { BooksComponent } from './books/books.component';
import { BookDetailComponent } from './book-detail/book-detail.component';


@NgModule({
  declarations: [
    AppComponent,
    BooksComponent,
    BookDetailComponent,

  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

＆＃13;

我已在app模块中声明并导入BooksComponent，因此我无法理解我所缺少的内容！请帮忙！

Answer 1

如果在运行测试时遇到错误，则可能意味着规范需要了解新组件 BooksComponent 。

要解决此问题，请将以下内容添加到 app.component.spec.ts 文件中。

import { BooksComponent } from './books/books.component';

在 beforeEach （）方法的声明中，添加如下所示的新组件：

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

Answer 2

对我来说，问题似乎是John Papa编写的Angular 8的VSCode扩展Angular代码片段（即如果您在应用程序模块中声明了组件并且错误仍然存在）。禁用扩展引起的问题对我来说消失了

如果＆＃39; <x>＆＃39;是Angular组件，然后验证它是否是此模块的一部分

2 个答案: