Angular 17独立模式下如何导入模块？

在Angular 17的独立模式中，无需在每个组件里重复导入全局模块，主要有两种方式替代原app.module.ts的模块导入逻辑：

1. 应用全局级别导入（替代原app.module.ts的imports） #

对于BrowserModule这类全局依赖，你可以在项目入口文件main.ts的bootstrapApplication配置中，通过importProvidersFrom将模块导入到应用级别的注入器中，这样所有组件都能共享该模块的导出内容，和原来在app.module.ts里导入的效果完全一致。

示例代码：

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

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

2. 单个组件按需导入 #

如果某个模块仅被特定组件需要，直接在该组件的@Component装饰器的imports数组中导入即可，避免全局冗余。

示例代码：

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserFeatureModule } from './features/user/user-feature.module';

@Component({
  selector: 'app-user-profile',
  standalone: true,
  imports: [CommonModule, UserFeatureModule],
  templateUrl: './user-profile.component.html'
})
export class UserProfileComponent { }

关于BrowserModule的特殊说明 #

Angular 17的独立项目在调用bootstrapApplication时，默认已经内置了BrowserModule的核心DOM渲染能力，所以大多数场景下你不需要手动导入它。只有当你需要用到BrowserModule导出的特定指令或服务时，才需要按上述方式导入。

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