我试图在其他模块中使用我在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.

我错过了什么?


当前回答

我知道这是一个长期解决的问题,但在我的情况下,我有一个不同的解决方案。 这实际上是我犯的一个错误,也许你也犯了,只是没有完全注意到。我的错误是,我不小心把一个模块,例如MatChipsModule, MatAutoCompleteModule,在声明部分;只由组件组成的部分,例如MainComponent, AboutComponent。这使我其他所有的进口货都认不出来了。

其他回答

在我的例子中,我的应用程序有多层模块,所以我试图导入的模块必须添加到实际使用它的父模块pages.module。Ts,而不是app。module。Ts。

假设你有一个组件:

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

很多答案/注释提到了在其他模块中定义的组件,或者你必须在它/它们的包含模块中导入/声明组件(你想在另一个组件中使用)。

但在简单的情况下,当组件B和组件A都定义在同一个模块中时,你必须在包含组件的模块中声明两个组件,以便B看到A,而不仅仅是A。

例如,在my-module.module.ts中

import { AComponent } from "./A/A.component";
import { BComponent } from "./B/B.component";

@NgModule({
  declarations: [
    AComponent,   // This is the one that we naturally think of adding ..
    BComponent,   // .. but forget this one and you get a "**'AComponent'** 
                  // is not a known element" error.
  ],
})

我花了半天时间来解决这个问题。问题出在进口方面。我的HomeModule有html中包含的homeComponent。ProductComponent是ProductModule的一部分。我在导入中添加了ProductModule到HomeModule,但忘记在导入中添加HomeModule到AppModule。添加后,问题消失了

我在Angular CLI: 10.1.5中也遇到了同样的问题 代码运行正常,但错误显示在VScode v1.50中

通过杀死终端(ng serve)并重新启动VScode来解决。