Angular中的自举是什么？

封面图 • 2025-09-23 • Angular

在 Angular 中，**自举（Bootstrapping）** 是指启动 Angular 应用程序的过程。简单来说，就是将 Angular 应用程序的根模块（通常是 `AppModule`）挂载到 HTML 页面中的某个 DOM 元素上，从而让 Angular 开始运行。

---

## 🧩 什么是 Angular 自举？

Angular 应用程序在浏览器中运行时，需要一个入口点来初始化整个应用。这个过程就叫做 **自举**。

Angular 使用 `platformBrowserDynamic().bootstrapModule()` 方法来进行自举。

---

## 📦 自举的步骤

1. **定义 AppModule**  
   这是 Angular 应用的主模块，通常位于 `src/app/app.module.ts` 文件中。

```ts
   @NgModule({
     declarations: [AppComponent],
     imports: [BrowserModule, AppRoutingModule],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   ```

2. **在 main.ts 中进行自举**

在 `src/main.ts` 文件中，Angular 会调用 `platformBrowserDynamic().bootstrapModule(AppModule)` 来启动应用：

```ts
   import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
   import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
     .catch(err => console.error(err));
   ```

---

## ⚙️ 自举的作用

- 初始化 Angular 的依赖注入系统
- 创建根组件（`AppComponent`）
- 将根组件渲染到指定的 DOM 元素（如 `<app-root></app-root>`）
- 启动 Angular 应用的生命周期

---

## 🧠 为什么需要自举？

Angular 是一个框架，不是直接运行在 HTML 中的代码。它需要通过模块化的方式组织代码，并且需要一个明确的入口点来开始执行。自举就是这个入口点。

---

## ✅ 总结

| 项目 | 内容 |
|------|------|
| 定义 | 启动 Angular 应用的过程 |
| 方法 | `platformBrowserDynamic().bootstrapModule(AppModule)` |
| 目的 | 初始化 Angular 框架并渲染根组件 |
| 核心文件 | `main.ts` 和 `app.module.ts` |

---

如果你对 **懒加载模块（Lazy Loading）** 或 **多模块应用（Multi-Module App）** 的自举方式也感兴趣，我也可以为你详细讲解。