在Angular独立组件模式下如何全局导入CommonModule？

问题背景 #

我最近启动了一个新应用，了解到Angular团队计划将独立组件模式设为默认并最终移除模块，因此决定重构我的应用。但我无法在main.ts的providers数组中使用CommonModule，希望找到全局导入它的方法，避免在每个组件（或通过路由）中重复导入。

我尝试了以下代码：

main.ts #

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { importProvidersFrom } from '@angular/core';
import { CommonModule } from '@angular/common';

bootstrapApplication(AppComponent, {
  providers: [importProvidersFrom(CommonModule)],
});

app.component.ts #

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  standalone: true,
})
export class AppComponent {}

app.component.html #

<div *ngIf="true">TEST</div>

但运行后收到错误：

src/app/app.component.html:1:7 - warning NG8103: The `*ngIf` directive was used in the template, but neither the `NgIf` directive nor the `CommonModule` was imported. Please make sure that either the `NgIf` directive or the `CommonModule` is included in the `@Component.imports` array of this component.

1 <div *ngIf="true">TEST</div>
        ~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.

我知道可以在@Component({})的imports数组中添加CommonModule，但这样每个组件都要重复导入，不符合我的需求。

解决方案 #

为什么之前的方法失效 #

importProvidersFrom(CommonModule)仅负责导入模块中注册的服务提供者（比如DatePipe的依赖注入配置），但CommonModule中的核心指令（如NgIf、NgFor）属于声明式模板依赖——这类依赖必须在组件的imports数组中显式声明，无法通过全局providers注册。这是Angular独立组件模式的设计原则，目的是确保组件依赖透明、可维护。

优化方案：减少重复导入的两种方式 #

1. 创建共享导入集合

创建一个统一的共享导入文件，将常用模块/指令打包导出，后续组件只需导入这个集合即可：

// src/app/shared/shared-imports.ts
import { CommonModule } from '@angular/common';
// 可按需添加其他常用模块，比如FormsModule、ReactiveFormsModule等
export const SharedImports = [CommonModule];

然后在组件中导入这个集合：

// app.component.ts
import { Component } from '@angular/core';
import { SharedImports } from './shared/shared-imports';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  standalone: true,
  imports: [...SharedImports]
})
export class AppComponent {}

后续如果需要调整共享依赖，只需修改SharedImports数组，无需逐个组件修改，大幅减少重复代码。

2. 路由组件的批量管理（可选）

如果你的组件都是路由组件，依然需要在组件自身的imports中添加依赖，但可以结合上述共享导入集合统一管理。若想使用NgModule作为过渡方案，可创建包含CommonModule的SharedModule，然后在独立组件中通过imports: [SharedModule]导入，但这只是临时过渡，不符合独立组件模式的最终设计目标。

总结 #

Angular独立组件模式不支持全局注册模板指令，核心是为了保证组件依赖的显式性和可维护性。通过创建共享导入集合，既能遵循设计原则，又能有效减少重复代码，是当前最优的解决方案。

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