typescript 如果 '<x>' 是一个 Angular 组件，那么验证它是否是这个模块的一部分
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48489533/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
If '<x>' is an Angular component, then verify that it is part of this module
提问by nat1312
I am having trouble with Angular's components. My app is using only one module (app.module). I have created a component called 'BooksComponent' with a selector 'app-books' for html. When I use it in app.component I get this error:
我在使用 Angular 的组件时遇到了问题。我的应用程序仅使用一个模块 (app.module)。我创建了一个名为“BooksComponent”的组件，其中包含一个用于 html 的选择器“app-books”。当我在 app.component 中使用它时，出现此错误：
'app-books' is not a known element: 1. If 'app-books' is an Angular component, then verify that it is part of this module. 2. If 'app-books' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
'app-books' 不是一个已知元素： 1. 如果 'app-books' 是一个 Angular 组件，那么验证它是否是这个模块的一部分。2. 如果'app-books' 是一个Web 组件，则将'CUSTOM_ELEMENTS_SCHEMA' 添加到该组件的'@NgModule.schemas' 以抑制此消息。
my code is like this:
我的代码是这样的：
books.component.ts
book.component.ts
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() {
}
}app.component.ts
app.component.ts
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';
}and finally: app.module.ts
最后： app.module.ts
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 { }I have declared and import BooksComponent in app module so i can't understand what i am missing! please help!
我已经在 app 模块中声明并导入了 BooksComponent，所以我无法理解我错过了什么！请帮忙！
回答by Yalcin Cayir
If you get the error when running the tests, that could mean that the spec needs to know about the new component BooksComponent.
如果在运行测试时出现错误，则可能意味着规范需要了解新组件BooksComponent。
In order to fix this issue, add the following to your app.component.spec.tsfile.
为了解决此问题，请将以下内容添加到您的app.component.spec.ts文件中。
import { BooksComponent } from './books/books.component';
And in the declarations of the beforeEach() method, add the new component like the following:
并在beforeEach() 方法的声明中，添加如下所示的新组件：
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent, BooksComponent
],
}).compileComponents();
}));
回答by Gilbert Gotora
For me the issue seemed to be VSCode extension Angular snippets for Angular 8 by John Papa.(That is if you have declared you component in the app-module and error persists). Disabling the extension made issue go away for me
对我来说，问题似乎是 John Papa 为 Angular 8 编写的 VSCode 扩展 Angular 片段。（也就是说，如果你已经在应用程序模块中声明了你的组件并且错误仍然存在）。禁用扩展使我的问题消失了
