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

我错过了什么?


当前回答

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

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

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)},
}

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

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

其他回答

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

我的情况有点不同。我得到了这个错误消息,但这是因为我的页面模块没有我生成的新页面。

我的步骤:

生成新的页面组件 将现有组件导入到新页面的模块中。ts文件 在新页面的HTML文件中使用<myapp-header></myapp-header>组件选择器

得到了错误,被困在这里。对我来说,最后一步是:

导入新的页面模块到pages.module.ts文件中。

现在它按预期工作了。这次错误消息没有太大帮助。

对于我的应用程序模式,一旦我在app.module.ts文件中声明了我的LandingPageComponent,就可以将子模块导入其中。

我刚开始一个新项目,并认为其中一些模式是理所当然的。

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

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

我也遇到过类似的问题。事实证明,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();
  });
}