使用两个共享模块的Angular 6: Component不是已知元素：

在Angular 6中，如果你遇到错误信息“Component不是已知元素”，这通常意味着Angular编译器在尝试编译包含该组件的模板时找不到该组件的定义。这种情况可能发生在以下几种情况：

基础概念

在Angular中，组件是构建用户界面的基本单元。每个组件都有一个对应的模块，这个模块负责声明和导出组件，以便其他模块可以使用它。

类型

根模块：应用的入口点，通常命名为AppModule。
特性模块：包含特定功能的模块，例如用户管理、产品列表等。

应用场景

共享模块：用于存放可以在多个特性模块之间共享的组件、指令和管道。
核心模块：用于存放单例服务和核心组件，这些通常只在应用的根注入器中提供一次。

问题原因

出现“Component不是已知元素”的错误可能有以下原因：

未在模块中声明组件：组件没有在其所属模块的declarations数组中声明。
未导出组件：如果其他模块需要使用该组件，它必须在所属模块的exports数组中导出。
导入错误：尝试使用组件的模块没有正确导入包含该组件的模块。

解决方法

假设我们有两个共享模块SharedModuleA和SharedModuleB，以及一个组件MyComponent，我们希望在两个模块之间共享这个组件。

在共享模块中声明和导出组件：

// shared-module-a.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyComponent } from './my-component/my-component.component';

@NgModule({
  declarations: [
    MyComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    MyComponent
  ]
})
export class SharedModuleA {}

// shared-module-b.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModuleA } from '../shared-module-a/shared-module-a.module';

@NgModule({
  imports: [
    CommonModule,
    SharedModuleA // 导入包含MyComponent的模块
  ]
})
export class SharedModuleB {}

在使用组件的模块中导入共享模块：

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { SharedModuleB } from './shared-module-b/shared-module-b.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    SharedModuleB // 导入共享模块
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在模板中使用组件：

<!-- app.component.html -->
<app-my-component></app-my-component>

通过以上步骤，MyComponent就可以在AppModule中使用了，因为它已经被SharedModuleA声明并导出，然后被SharedModuleB导入，最后被AppModule导入。

确保所有相关的模块都正确地声明、导入了组件，并且在模板中正确地使用了组件标签。这样就可以解决“Component不是已知元素”的问题。

基础概念

相关优势

类型

应用场景

问题原因

解决方法

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐