在 package.json 里看到 @angular/platform-browser 和 @angular/platform-browser-dynamic,本质上是在同一件事的两个阶段里看到了两套能力:让 Angular 在浏览器里跑起来,以及用哪种方式把 Angular 应用变成浏览器可执行的东西。把这两点拆开,你就能很稳定地判断它们各自的作用与差异。
观察线索与推理起点
当 package.json 同时出现这两个依赖时,意味着项目至少满足下面两条中的一条:
- 代码在浏览器端需要完整的浏览器运行时支持,这部分由
@angular/platform-browser提供(几乎所有浏览器端 Angular 应用都会需要)。它的定位就是library for using Angular in a web browser。 - 项目在某些场景会使用或保留 JIT 编译路径(在浏览器运行时编译),或测试体系依赖 JIT 平台能力,这就会引入
@angular/platform-browser-dynamic。它的定位明确写了with JIT compilation。
接下来把 platform 这个词讲清楚,区别自然就出来了。
Angular 里的 platform 到底是什么
在 Angular 语境里,platform 可以理解为:一组与运行环境绑定的底层服务提供者集合。同样的框架核心(DI、组件模型、变更检测等)要跑在不同环境里,需要不同的'底盘':
- 浏览器环境:DOM 渲染、事件系统、安全净化、title 与 meta 管理、浏览器特有的调试能力、以及现代 SSR 体系下的 hydration 相关能力等
- 服务端环境:SSR 渲染与请求级别的隔离等
- 测试环境:TestBed、模拟渲染与编译策略等
所以 @angular/platform-browser 更像是浏览器底盘,@angular/platform-browser-dynamic 则是在这个底盘之上额外加了一套运行时编译发动机。
@angular/platform-browser 的作用
它提供浏览器端必需的基础设施
Angular 官方 API 对 BrowserModule 的描述非常直白:Exports required infrastructure for all Angular apps,并且在 CLI 创建的应用里默认包含。
这句话背后对应的能力,落到开发者日常能感知到的点包括:
- DOM 渲染与事件体系的接入:让组件模板最终变成真实 DOM,并绑定事件
- 安全相关的净化与类型封装:例如
DomSanitizer的存在就是为了降低 XSS 风险,避免把危险内容直接注入 DOM 上下文。 - 应用启动与平台创建相关 API:
bootstrapApplication、createApplication、platformBrowser等都在这个包里。比如bootstrapApplication用于启动一个以 standalone component 为根的应用。
再抓一个很'底层'的点:platformBrowser 本身在 API 里被定义为返回与浏览器服务提供者关联的 PlatformRef。这说明它解决的是'我在浏览器里要用哪些系统级 provider'这类问题,而不是'我要不要把编译器带到浏览器里'。
一个更贴近现代 Angular 的启动例子
在较新的 Angular 风格里,你可能在 main.ts 看到类似写法(standalone):


