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

我错过了什么?


当前回答

我也遇到了同样的问题,这是因为不同的功能模块错误地包含了这个组件。当把它从其他功能中移除时,它工作了!

其他回答

在我的例子中,问题是模块中缺少组件声明,但即使添加了声明,错误仍然存在。我不得不停止服务器并在VS Code中重新构建整个项目以消除错误。

假设你有一个组件:

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

我有一个类似的问题,但没有一个提到的解决方案工作。最后我意识到我有一个路由问题:

我想如果我在应用程序路由中指定我的组件。模块如下:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MainComponent } from './pages/main/main.component';

const routes: Routes = [
  {
    path: '', 
    component: MainComponent
  },
]

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

我将不必在我的AppModule中导入MainModule,这是错误的,因为这里只有组件被导入。MainModule中声明的任何其他组件将不可见,这将导致您所描述的错误消息。

解决方案1: 导入声明模块 解决方案2: 惰性加载组件,如下所示:

const routes: Routes = [
{
    path: '', loadChildren: () => import('path_to_your_module').then(m => m.MainModule)},
}

这是可行的,因为整个模块都导入到这里。

我意识到你在你的例子中没有使用路由,只是把这个发布给其他可能使用路由的人,并无意中发现了这个问题。

我也遇到了同样的问题,这是因为不同的功能模块错误地包含了这个组件。当把它从其他功能中移除时,它工作了!

在执行Angular的入门教程时,我也在使用stackblitz.com工具使用Angular生成器生成一个名为product-alerts的新组件后收到了这个错误。

'app-product-alerts'不是已知元素:

发现:其他人在2021年8月初也经历过这种情况。目前,它似乎是StackBlitz IDE中的一个bug。 https://github.com/angular/angular/issues/43020