Angular中如何批量导入组件并作为HTML标签使用？

Hey there! Let's sort out this error you're hitting while trying to batch import your UI components.

What's Causing the Error? #

That error message is pretty straightforward: you've added ComponentExportModule (a module) to the declarations array in your AppModule—but Angular only allows components (@Component), directives (@Directive), or pipes (@Pipe) in declarations. Modules have their own dedicated spot in the imports array, not declarations.

Since you're trying to modularize your UI into header, side nav, and main content, the right approach is to bundle those components into a shared module (your ComponentExportModule) and then import that module into AppModule—not declare it.

Step-by-Step Fix #

1. Correctly Configure Your ComponentExportModule

First, make sure your shared module properly declares and exports all your UI components. This lets other modules (like AppModule) access them:

// ../UI-Components/component-export.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// Import all your UI components here
import { AppHeaderComponent } from './app-header/app-header.component';
import { SideNavComponent } from './side-nav/side-nav.component';
import { MainContentComponent } from './main-content/main-content.component';

@NgModule({
  declarations: [
    // Declare all your UI components here
    AppHeaderComponent,
    SideNavComponent,
    MainContentComponent
  ],
  imports: [
    CommonModule // Required if your components use Angular directives like *ngIf or *ngFor
  ],
  exports: [
    // Export the components you want to use in other modules
    AppHeaderComponent,
    SideNavComponent,
    MainContentComponent
  ]
})
export class ComponentExportModule { }

2. Update AppModule to Import the Shared Module

Now, modify your AppModule to remove ComponentExportModule from declarations and add it to imports:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
// Import your shared module
import { ComponentExportModule } from '../UI-Components/component-export.module';

@NgModule({
  declarations: [
    AppComponent
    // ❌ Remove ComponentExportModule from here!
  ],
  imports: [
    BrowserModule,
    ComponentExportModule // ✅ Add it here to make its components available
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. Use Your Components in the Template

You can now freely use your modular UI components in app.component.html like this:

<app-header></app-header>
<div class="app-layout">
  <side-nav></side-nav>
  <main-content></main-content>
</div>

Why Single Component Imports Worked #

When you imported individual components, you were adding them directly to declarations—which is allowed because they're @Component classes. The problem arose when you tried to treat a module like a component and put it in the wrong array.

内容的提问来源于stack exchange，提问作者physicsboy