我试图在其他模块中使用我在AppModule中创建的组件。我得到以下错误:
Uncaught (in promise):错误:模板解析错误
'contacts-box'不是已知元素:
如果'contacts-box'是一个Angular组件，那么验证它是否是这个模块的一部分。
如果'contacts-box'是一个Web组件，那么在'@NgModule '中添加'CUSTOM_ELEMENTS_SCHEMA'。模式来抑制此消息。
我的项目结构很简单:
我将页面保存在pages目录中，其中每个页面保存在不同的模块中(例如customers-module)，每个模块都有多个组件(例如customers-list-component, customers-add-component等)。我想在这些组件中使用我的ContactBoxComponent(例如在customers-add-component内部)。
As you can see I created the contacts-box component inside the widgets directory so it's basically inside the AppModule. I added the ContactBoxComponent import to app.module.ts and put it in declarations list of AppModule. It didin't work so I googled my problem and added ContactBoxComponent to export list as well. Didn't help. I also tried putting ContactBoxComponent in CustomersAddComponent and then in another one (from different module) but I got an error saying there are multiple declarations.
我错过了什么?
假设你有一个组件:
product-list.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'pm-products',
templateUrl: './product-list.component.html'
})
export class ProductListComponent {
pageTitle: string = 'product list';
}
你会得到这个错误:
在src/app/app.com ponponts:6:3 -错误NG8001: 'pm-products'
不是已知元素:
如果'pm-products'是一个Angular组件，那么验证它是这个模块的一部分。
app.component.ts:
import { Component } from "@angular/core";
@Component({
selector: 'pm-root', // 'pm-root'
template: `
<div><h1>{{pageTitle}}</h1>
<pm-products></pm-products> // not a known element ?
</div>
`
})
export class AppComponent {
pageTitle: string = 'Acme Product Management';
}
确保你导入了组件:
app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// --> add this import (you can click on the light bulb in the squiggly line in VS Code)
import { ProductListComponent } from './products/product-list.component';
@NgModule({
declarations: [
AppComponent,
ProductListComponent // --> Add this line here
],
imports: [
BrowserModule
],
bootstrap: [AppComponent],
})
export class AppModule { }
我也遇到过类似的问题。事实证明，ng generate component(使用CLI 7.1.4版)为AppModule添加了子组件的声明，但没有添加到模拟它的TestBed模块。
“英雄之旅”示例应用程序包含一个HeroesComponent，它带有选择器app- Heroes。应用程序运行正常时，但ng test产生这个错误消息:'app-heroes'不是一个已知元素。手动将HeroesComponent添加到configureTestingModule(在app.component.spec.ts中)的声明中可以消除这个错误。
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent,
HeroesComponent
],
}).compileComponents();
}));
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
});
}
