Angular
Angular 是构建跨平台应用的流行框架。 WebStorm 提供对 Angular 的支持，并会在开发过程的每一步为您提供帮助，包括创建新的 Angular 应用、开发组件、调试与测试等。
开始之前
创建新的 Angular 应用
启动构建新 Angular 应用的推荐方式是使用 Angular CLI ，WebStorm 会通过 npx 为您下载并运行。 您的应用将预配置好 TypeScript 和 Webpack，并完成引导。
当然，您也可以自行下载 Angular CLI，或创建一个空的 WebStorm 项目并在其中安装 Angular。
在 欢迎 界面上点击 新建项目 ，或从主菜单中选择 。 将打开 新建 项目 对话框。
在左侧窗格中选择 Angular CLI。
指定用于存储项目相关文件的文件夹路径。
在 Node 解释器 字段中指定要使用的 Node.js 解释器。 从列表中选择已配置的解释器，或选择 添加 以配置新解释器。
从 Angular CLI 列表中选择 npx --package @angular/cli ng。
或者，对于 npm 版本 5.1 或更早版本，请在 终端 Alt+F12 中运行
npm install -g @angular/cli，手动安装@angular/cli包。 创建应用时，请选择存储@angular/cli包的文件夹。可选：
在 附加参数 字段中，指定传递给 Angular CLI 的额外 ng new options。 该字段支持代码补全：输入选项名称或按下 Ctrl+Space 键时，WebStorm 会显示可用选项及其说明。
如果您使用的是 Angular version 16 或更高版本，还可以勾选 使用独立组件创建新项目 复选框。 请参阅 Angular 官方网站 了解更多信息。
点击 创建 后，WebStorm 会生成一个包含全部所需配置文件的 Angular 专用项目，并下载所有必要的依赖项。
创建空的 WebStorm 项目
在 欢迎 界面上点击 新建项目 ，或从主菜单中选择 。 将打开 新建 项目 对话框。
在左侧窗格中选择 空项目。
指定用于存储项目相关文件的文件夹路径。
点击 创建 后，WebStorm 会创建并打开一个 空 项目。
在空项目中安装 Angular
打开将要使用 Angular 的空项目。
在嵌入式 终端 （Alt+F12 ）中输入：
npm install @angular/core这将安装核心 Angular 包，其中包含该框架的重要运行时部分。
您可能还需要安装其他属于 Angular 的包，请参阅 包列表。
使用现有的 Angular 应用开始开发
要继续开发现有的 Angular 应用，请在 WebStorm 中打开并下载所需的依赖项。
打开已在本地的应用源代码
在 欢迎 界面上点击 打开 ，或从主菜单中选择 。 在打开的对话框中，选择存储源代码的文件夹。
从版本控制中检出应用源代码
在 欢迎 界面上点击 克隆版本库克隆。
或者，从主菜单中选择 、 或 。
在主菜单中，您可能会看到与项目关联的其他版本控制系统，而不是 Git。 例如， Mercurial 或 Perforce。
在打开的对话框中，从列表中选择您的版本控制系统，并指定用于检出应用源代码的存储库。 有关更多信息，请参阅 检出项目（克隆）。
下载依赖项
在弹出窗口中点击 运行 'npm install' 或 运行 'yarn install'：
您可以使用 npm、 Yarn 1 或 Yarn 2 ，详细信息请参阅 npm 和 Yarn。
或者，从编辑器或 项目 工具窗口 Alt+1 的 package.json 上下文菜单中选择 运行 'npm install' 或 运行 'yarn install'。
项目安全性
当您打开在 WebStorm 外部创建并导入到其中的项目时，WebStorm 会显示一个对话框，让您决定如何处理该包含不熟悉源代码的项目。
选择以下选项之一：
安全模式预览 ：在此情况下，WebStorm 以预览模式打开项目。 这意味着您可以浏览项目源代码，但无法运行任务和脚本，也无法运行或调试项目。
WebStorm 会在编辑器区域顶部显示通知，您可随时点击 信任项目… 链接加载项目。
信任项目 ：在此情况下，WebStorm 会打开并加载项目。 这意味着项目已初始化、插件已解析、依赖项已添加，所有 WebStorm 功能都可以使用。
不打开 ：在此情况下，WebStorm 不会打开该项目。
详情请参阅 项目安全性。
编写并编辑代码
本章节提供 Angular 专用的提示。 有关通用指南，请参阅 编写和编辑源代码 与 TypeScript。
配置 Angular 语言服务
WebStorm 提供完整的 Angular 专属代码辅助功能，包括代码补全、错误检测和高亮、提示，以及 Angular 模板内的导航。 您可以配置使用 Angular language service、 TypeScript Language Service 或仅使用内部 WebStorm 解析器和代码检查功能，为 Angular 项目提供代码辅助。
默认启用了 Angular language service，并在状态栏的 语言服务 向导中显示。
要打开 Angular 设置，请点击状态栏中的
，并点击 
。
或者，按下 Ctrl+Alt+S 打开设置并选择 设置 | 语言与框架 | TypeScript | Angular。
指定用于获取 .ts 文件代码辅助的服务。
默认情况下，选中了 自动 选项，因此 WebStorm 会在任何适当上下文中自动启用 Angular language service。 因此，类型计算基于 TypeScript language service 的数据，同时也会应用内部 WebStorm 的检查功能。
选择 已禁用 选项，即可仅基于内部 WebStorm 解析器和检查数据获取代码辅助。
重启 Angular 语言服务
点击状态栏中的
，然后点击 
，其旁为 Angular TypeScript <version>。
配置类型评估
点击状态栏中的
，然后勾选要使用进行类型计算的服务对应复选框。 准备就绪后重启 WebStorm。
或者，按下 Ctrl+Alt+S 打开设置，选择 设置 | 语言与框架 | TypeScript | Angular ，然后选择 自动 并勾选 启用服务支持的类型引擎 复选框。
默认情况下未选中该复选框，因此类型计算、解析、代码检查和重构基于 WebStorm 内部 TypeScript 引擎中的类型信息。
此默认行为可能导致性能问题以及类型解析错误，因为 WebStorm 内部 TypeScript 引擎使用的类型计算算法与 Angular language service 的算法不同。 选中该复选框可以避免这些问题。
组件
使用 WebStorm，您可以通过多种方式创建 Angular 组件：
创建组件文件夹 ，其中包含一组相关的 .ts 、 .html 和 .css 文件。
使用预定义模板创建组件
WebStorm 提供用于创建 Angular 组件的预定义 实时模板 ，例如 a-component、 a-component-inline 和 a-component-root。
有关实时模板的更多信息，请参阅 实时模板。
要查看预定义模板的完整列表，请打开 设置 对话框（Ctrl+Alt+S ），转到 并展开 Angular 节点。
在编辑器中，按下 Ctrl+J ，从列表中选择合适的模板（例如，
a-component），然后按下 Enter。WebStorm 会生成组件存根，将插入符号放置在带有 canvas 的字段上，并等待您在此处指定组件名称。 在输入组件名称时，选择器的名称和模板 URL 会根据 Angular 样式指南 自动填写。
如有必要，可以通过检查弹窗将新组件设为 独立 组件。
请参阅 WebStorm 博客中的 使用和创建代码片段 ，了解如何使用变量自定义模板。
创建组件文件夹
在 WebStorm 中，您可以一次性为 Angular 组件创建一组文件，甚至将它们全部放入单独的文件夹中。 为此，您需要使用具有多个子模板的文件模板。 当您从父模板创建文件时，与之相关的子模板文件将自动生成。 有关更多信息，请参阅 包含多个文件的模板。
假设您希望创建一个 example 文件夹，其中包含一组组件文件，例如用于逻辑的 example.component.ts 、用于模板的 example.component.html 和用于样式的 example.component.css 。 您可以创建一个包含两个父模板的文件模板，这样这三个文件就会一次性生成并放入单独的文件夹中。
在 设置 对话框中（Ctrl+Alt+S ），选择 。
首先创建一个 TypeScript 组件文件模板：
在 文件 选项卡中，点击工具栏上的 添加 按钮（
）。
新的 未命名 模板将添加到列表中。
在右侧窗格中，指定模板名称，如 Angular 组件 ，并设置
component.ts作为文件扩展名。在 文件名 字段中键入
$NAME/$NAME。您可以选择添加一个代码模板，例如：
/* * Created by ${USER} on ${DATE} */ import { Component } from '@angular/core';
点击 应用。
为相关 HTML 文件创建一个子模板：
选择父模板 Angular 组件 ，然后在工具栏上点击 创建子模板文件 按钮
。
一个子模板将添加到 Angular 组件 模板下方。
在右侧窗格的 文件名 字段中输入
$NAME/$NAME，并指定component.html扩展名。
点击 应用。
为相关样式表创建一个子模板。
选择父模板 Angular 组件 ，然后在工具栏上点击
。 一个子模板将添加到 Angular 组件 模板下方。在右侧窗格的 文件名 字段中输入
$NAME/$NAME，并指定component.css扩展名。
点击 确定 保存模板。
创建组件文件。
在您希望存储组件文件的文件夹的上下文菜单中，选择 。 在打开的对话框中，指定将用于文件夹及其中组件文件的名称（此示例中为 example ）。
从模板中提取组件
提取 Angular 组件 重构通过运行 ng generate component 来实现，并会考虑您 angular.json 文件中的 schematic 配置。
在 HTML 模板文件中，选择您希望提取为 Angular 组件的代码片段。
在选中区域的上下文菜单中，选择 。
或者，按 Ctrl+Alt+Shift+T ，并在 重构此项 弹窗中选择 。
在打开的对话框中，指定新组件的名称。
独立组件
如果您的项目使用了 Angular 19 ，则组件、管道与指令默认都是 standalone。 对于通过 NgModules 声明的组件，请设置 standalone: false。
WebStorm 会检测非独立组件中 non-standalone 管道、指令或组件的错误导入以及 imports 属性的使用。
信号
使用 WebStorm，您可以直接从 Angular signals 的 signal、 computed 和 effect 模板轻松创建对应信号。
创建信号
编写所需的函数。 WebStorm 会运行检查并将新函数标记为未解析状态。
将鼠标悬停在高亮显示的函数上，然后点击弹出窗口中的 创建信号 '<function name>' 链接。
或者，将光标放置在高亮函数上，按下 Alt+Enter ，然后选择 。
WebStorm 会打开包含组件的 TypeScript 文件，并在其中生成新 signal 的存根。 根据需要填写占位内容。
WebStorm 可识别、高亮显示、提供文档和代码补全，并支持导航至 contentChild、 contentChilden、 viewChild 和 viewChildren 的 signal queries。
配置 Angular 信号的高亮
按下 Ctrl+Alt+S 以打开设置并选择 编辑器 | 颜色方案 | Angular 模板。
在列表中选择 信号 ，然后单击 前景 旁边的颜色指示器。
选择您喜欢的颜色并单击 应用。
结构型指令
WebStorm 能识别 结构型指令 ，并在模板中提供高亮显示。
对于绑定键和模板上下文属性，建议使用弹出窗口完成：
为映射到指令输入的模板绑定键提供 重命名重构。
在完成属性或按下 Ctrl+P 后，参数信息弹窗将自动显示。
宿主监听器与绑定
针对
@HostListener和@HostBinding装饰器提供代码补全、高亮显示与快速文档。
针对
@HostListener的事件补全。
已为宿主绑定生成 类型检查块（TCB）。
支持在宿主绑定和 HTML 模板中使用 CSS 类。
响应式表单
WebStorm 支持 Angular 响应式表单。
通过带有
new FormGroup({.. .})和FormBuilder.group({...})调用的字段初始化器构建嵌套表单组模型结构，或通过构造函数中的FormBuilder.group({...})调用进行字段初始化。WebStorm 能识别表单组对象初始化器中的
control、group和array，新实例调用（FormGroup、FormControl和FormArray），以及FormBuilder方法。
针对
FormGroup.get()调用，WebStorm 提供代码补全、名称验证、未知片段的快速修复以及字符串字面量中的语法高亮显示。
针对 HTML 模板中的
formControlName、formGroupName和formArrayName，提供代码补全、名称验证、缺失控件的创建快速修复、语法高亮显示和结构依赖支持。
增量水合
WebStorm 支持 Angular 19 @defer hydrate 语法。
代码补全
快速文档查询
报告 Angular 19 之前版本的错误。
在控制流块中包裹 HTML 模板
在 Angular HTML 模板中，选择代码片段，按下 Ctrl+Alt+T ，然后从列表中选择封闭代码。
使用 ng add 添加新功能
您可以使用 Angular 依赖项 操作添加大多数 已发布的 Angular 库。 此操作运行 ng add 命令 ，以安装依赖并更新当前工作目录中的应用以使用该依赖。 请注意，并非所有库都支持使用 ng add 安装。
从主菜单中选择 ，或在 项目 工具窗口 Alt+1 中按 Alt+Insert ，然后选择 Angular 依赖项。
从列表中选择要添加的库。 该列表显示可使用
ng add明确安装的库。 若要安装列表中未列出的软件包，请滚动到末尾并双击 安装上方未列出的 package 链接，然后在打开的对话框中指定软件包名称。按照向导步骤操作。
以下示例说明了如何将 Angular Material 添加到项目中。
如果您通过 package.json 手动管理依赖关系，WebStorm 仍能够识别支持 ng add 的软件包。 当您将此类软件包添加到 package.json 后，WebStorm 会建议使用 ng add 进行安装。
使用 Angular Schematics 生成代码
WebStorm 可使用库（如 @angular/material ）中定义的 schematic，以及 Angular CLI 本身定义的 schematic 生成代码。
从主菜单中选择 ，或在 项目 工具窗口中按下 Alt+Insert ，然后选择 Angular 原理图。
从列表中选择相关 schematic。 开始输入 schematic 的名称，列表会随着输入而缩小。
在打开的对话框中指定要生成的 schematic 名称及其他选项（如有必要）。 WebStorm 显示该 schematic 的描述，并为可用选项提供代码补全和说明。
查看参数提示
在 Angular HTML 模板中， 参数提示 显示方法和函数中参数的名称，使您的代码更易于阅读。 在模板中，块参数的信息会在补全天显示。
配置参数提示
打开 设置 对话框（Ctrl+Alt+S ），并转到 。
在 参数名 下展开 Angular HTML 模板。
通过选中相应的复选框，指定希望在哪些上下文中显示参数提示。
预览会显示您在设置中所做的更改如何影响代码外观。
对于某些方法和函数，WebStorm 不会在任何上下文中显示参数提示。 单击 排除列表... 以查看这些方法和函数，可选择为其启用参数提示，或将新项添加到列表中。
若要在任何上下文中隐藏任何值类型的参数提示，请取消选中 Angular HTML 模板 复选框（位于 参数名 下）。
检查代码
WebStorm 提供多项 Angular 特定检查，可在您编写代码时帮助发现错误并提供快速修复建议。
重复属性
在以下示例中，同时使用了 template 和 templateUrl 属性。 WebStorm 会检测该错误，提示您，并建议快速修复。
结构型指令使用错误
WebStorm 会提醒您关于 *ngIf 和 *ngFor 结构指令的不当使用。
使用独立组件
Angular 特定检查可帮助您识别对 独立组件 的不当使用。 在以下示例中，WebStorm 检测到导入的组件不是独立组件，并为该问题提供快速修复建议。
未使用的导入
在 standalone 组件中，WebStorm 会检测未使用的组件、管道和指令导入语句，并建议将其移除。
在重新格式化文件时（Ctrl+Alt+Shift+L ），也可以自动删除未使用的导入语句。
快速修复与上下文感知操作
您可以方便地使用快速修复，从 Angular 组件模板中创建 @Input 和 @Output 属性，无论是否带有 transform 属性。 请注意，所需的导入语句也会自动生成。
WebStorm 还提供可感知上下文的 创建字段 和 创建方法 操作，帮助您生成正确声明的字段。
查看并配置特定于 Angular 的检查
在 设置 对话框（Ctrl+Alt+S ）中，转到 。
展开 Angular 节点。
按照 代码检查 中所述配置检查配置文件和严重性、禁用并抑制预定义检查，以及创建自定义检查项。
浏览 Angular 应用
此外，您还可以下载 Angular CLI QuickSwitch 插件 并 安装到您的计算机上。
使用“相关符号”弹出窗口进行导航
要调用包含相关文件列表的 相关符号 弹窗，请执行以下任一操作：
按下 Ctrl+Alt+Home。
从主菜单中选择 。
右键单击编辑器中的任一区域并选择 。
在 TypeScript 组件文件中，弹窗还会列出导入到该文件中的所有符号。
要打开文件，请选择文件并按下 Enter。 或者，使用与每种文件类型关联的数字：
包含组件类的 TypeScript 文件
模板
测试
样式
使用“查找用法”功能进行导航
将插入符号放在符号的声明处并按下 Ctrl+B。
如果该符号仅被使用一次，WebStorm 会跳转至该用法并高亮显示。
如果找到多个用法，WebStorm 会在弹窗中显示它们。 选择要导航到的用法并按下 Enter ，或者从列表中单击该项。
将插入符号放在符号的声明处并按下 Ctrl+Alt+F7。
使用工具栏上的图标显示或隐藏 import 语句（
）、字符串字面量（
）以及 HTML 文件（
）中的组件引用。单击 显示用法提示以跳转至所用位置，或从列表中选择相应项。
使用 Angular Material Design 组件
WebStorm 能识别 Angular Material 组件和属性，并为其提供编码支持：
组件补全
属性补全
在组件或属性与其声明之间导航（按 Ctrl+B ，或从上下文菜单中选择 ）。
安装 Angular Material
打开嵌入式 终端 （Alt+F12 ），并输入
ng add @angular/material。在 package.json 中的
dependencies下添加"@angular/material": "^16.2.11"，并运行npm install。在主菜单中转到 ，然后从列表中选择
@angular/material并按照向导中的步骤操作。
请访问 Angular Material 官方网站的《入门指南》了解详细信息。
配置语法高亮
在 Angular 项目中，WebStorm 能识别并高亮显示各种符号，例如 CSS 类与属性、HTML 属性与标签，以及 Angular 输入与输出绑定。 这些符号的出现位置会在多种上下文中被高亮显示，例如 HTML 属性或 JavaScript 字符串字面量。
您可以根据自己的习惯和偏好配置支持 Angular 的语法高亮方式。
在 设置 对话框（Ctrl+Alt+S ）中，转到 。
选择配色方案，可接受从默认设置继承的高亮设置，或按照 颜色和字体 中所述自定义。
在项目中使用多个框架
在一个 Angular 项目中，您有时可能需要使用其他框架。
为在每个文件中获得具备上下文感知的编码辅助，请创建一个配置文件 .ws-context ，并指定每个特定文件或文件夹中应使用的框架。 该文件中的设置将覆盖默认配置。
在项目根目录中，从上下文菜单中选择 新建 | 文件 ，并将
.ws-context指定为文件名。在
.ws-context中使用两种类型的属性：<context-name>，其上下文值为字符串包含上下文详细信息对象的 GLOB 模式
使用以下上下文值：
framework：vue、angular、react、svelte、astroangular-template-syntax：V_2、V_17nextjs-project：nextjsastro-project：astrovue-store：vuex、piniavue-class-component-library：vue-class-component、vue -property-decorator、vue-facing-decoratorjsdoc-dialect：jsdoc-typescript、jsdoc-closure
为简化操作，请使用路径嵌套。
GLOB 路径的最后一个段是文件名模式，仅支持
*通配符。如果最后一个段是
**，则匹配所有嵌套目录和文件。顶层上下文属性应具有
/**模式。
当多个模式匹配同一文件名时，将使用以下规则进行消歧：
选择路径段数量最多的模式，但不包括
**段。选择纯文件名模式的项，即模式不能以
**或/结尾。选择最先定义的模式。
示例
假设您的项目在多个文件夹中使用了多个框架。
为了为项目中的每个文件提供上下文感知的辅助功能，请将以下代码添加到 .ws-context：