PhpStorm 2025.2 Help

Angular

Angular 是一个构建跨平台应用程序的最受欢迎的框架。 PhpStorm 提供对 Angular 的支持，并在开发过程的每个步骤中为您提供帮助——从创建新的 Angular 应用程序、处理组件到调试和测试。

开始之前

  1. 下载并安装 Node.js。

  2. 确保 JavaScript 和 TypeScript 和 Angular 和 AngularJS 必需插件在 设置 | 插件 页面， 已安装 选项卡中已启用。 如需了解更多信息，请参阅 管理插件。

创建一个新的 Angular 应用程序

推荐开始构建新的 Angular 应用程序的方法是 Angular CLI ，PhpStorm 为您下载并使用 npx 运行它。 因此，您的应用程序已使用可直接使用的 TypeScript 和 Webpack 配置进行引导。

当然，您可以自己下载 Angular CLI，或创建一个空的 PhpStorm 项目并在其中安装 Angular。

创建一个新的 Angular 应用程序

  1. 点击 创建新项目 屏幕上的 欢迎 或从主菜单中选择 文件 | 新建 | 项目。 将打开 新建 Project 对话框。

  2. 在左侧窗格中，选择 Angular CLI。

  3. 指定存储与项目相关的文件的文件夹路径。

  4. 在 Node Interpreter 字段中，指定要使用的 Node.js 解释器。 从列表中选择一个已配置的解释器或选择 Add 配置一个新的解释器。

  5. 从 Angular CLI 列表中选择 npx --package @angular/cli ng。

    或者，对于 npm 5.1 及更早版本，通过在 终端 Alt+F12 中运行 npm install -g @angular/cli 来自行安装 @angular/cli 包。 在创建应用程序时，选择存储 @angular/cli 包的文件夹。

  6. 可选：

    • 在 附加参数 字段中，指定要传递给 Angular CLI 的额外 ng new options。 在此字段中可用代码补全：当您开始键入选项名称或按 Ctrl+Space 时，PhpStorm 会显示可用选项及其描述。

    • 如果您使用的是 Angular version 16 或更高版本，您还可以选择 创建带有独立组件的新项目 复选框。 了解更多信息，请访问 Angular 官方网站。

  7. 当您点击 创建 时，PhpStorm 将生成一个特定于 Angular 的项目，并包含所有必需的配置文件并下载所有必要的依赖项。

创建一个空的 PhpStorm 项目

  1. 点击 创建新项目 屏幕上的 欢迎 或从主菜单中选择 文件 | 新建 | 项目。 将打开 新建 Project 对话框。

  2. 在左侧窗格中，选择 空项目。

  3. 指定存储与项目相关的文件的文件夹路径。

  4. 当您点击 创建 ，PhpStorm 会创建并打开一个 空项目。

在空项目中安装 Angular

  1. 打开 您将使用 Angular 的空项目。

  2. 在嵌入的 终端 (Alt+F12 )中，输入：

    npm install @angular/core

    那将安装核心的 Angular 包，其中包含框架的重要运行时部分。

您还可能需要安装其他属于 Angular 的包，请参阅 包列表。

从现有的 Angular 应用程序开始

继续开发现有的 Angular 应用程序，请在 PhpStorm 中打开它并下载所需的依赖项。

打开您机器上已有的应用程序源代码

  • 点击 打开 屏幕上的 欢迎 或从主菜单中选择 文件 | 打开目录。 在打开的对话框中，选择存储源文件的文件夹。

从您的版本控制中检出应用程序源代码

  1. 在 欢迎 屏幕上点击 克隆仓库克隆。

    或者，从主菜单中选择 文件｜新建｜ 来自版本控制的项目…、 Git ｜ 克隆… 或 VCS | 从版本控制获取。

    您可能会看到与您的项目相关联的其他版本控制系统，而不是在主菜单中的 Git。 例如， Mercurial 或 Perforce。

  2. 在打开的对话框中，从列表中选择您的版本控制系统，并指定要从中检出的应用程序源代码的存储库。 如需了解更多信息，请参见 Check out a project (clone)。

下载依赖项

  • 请点击 运行 'npm install' 或 运行 'yarn install' 在弹出窗口中：

    打开应用并下载依赖项

    您可以使用 npm、 Yarn 1 或 Yarn 2 ，详情请参阅 npm 和 Yarn。

  • 或者，从编辑器或 Project 工具窗口 Alt+1 的 package.json 上下文菜单中选择 运行 'npm install' 或 运行 'yarn install'。

项目安全性

当您打开一个在 PhpStorm 之外创建并导入到 PhpStorm 的项目时，PhpStorm 会显示一个对话框，您可以在其中决定如何处理这个具有不熟悉源代码的项目。

请选择以下选项之一：

  • 安全模式下预览 ：在这种情况下，PhpStorm 以预览模式打开项目。 这意味着您可以浏览项目的源代码，但不能运行任务和脚本或运行/调试您的项目。

    PhpStorm 会在编辑器区域顶部显示一条通知，您可以随时点击 信任项目… 链接并加载您的项目。

  • 信任项目 ：在这种情况下，PhpStorm 会打开并加载一个项目。 这意味着项目已经初始化，项目的插件已解析，依赖项已添加，并且所有 PhpStorm 功能都可用。

  • 请勿打开 ：在这种情况下，PhpStorm 不会打开项目。

请从 项目安全性 中了解更多。

编写和编辑代码

本章提供与 Angular 相关的提示。 如需一般指南，请参阅 编写和编辑源代码 和 TypeScript。

配置 Angular 语言服务

PhpStorm 提供完整的 Angular 特定编码支持，包括代码补全、错误检测和高亮、提示以及 Angular 模板内的导航。 您可以配置从 Angular language service、 TypeScript Language Service 或仅从内部 PhpStorm 解析器和代码检查中获取 Angular 项目的代码辅助功能。

默认情况下，Angular 语言服务处于启用状态，并列在状态栏中的 语言服务 向导中。

  1. 要打开 Angular 设置，请点击状态栏上的 当前文件正在运行的语言服务图标 ，然后点击 打开设置图标。

    Angular 语言服务小组件

    或者，按 Ctrl+Alt+S 打开设置并选择 设置 | 语言和框架 | TypeScript | Angular。

  2. 请指定要获取 .ts 文件代码辅助的服务。

    • 默认情况下，会选择 自动 选项，因此 PhpStorm 会在任何合适的上下文中自动启用 Angular language service。 因此，类型评估是基于来自 TypeScript language service 的数据执行的，同时也会应用内部 PhpStorm 的检查。

    • 选择 已禁用 选项以仅基于内部PhpStorm解析器和检查的数据获取编码帮助。

重启 Angular 语言服务

  • 点击状态栏上的 当前文件正在运行的语言服务图标 ，然后点击 重启服务图标 ，位于 Angular TypeScript <version> 旁边。

    Angular 语言服务小组件 - 重启服务

配置类型评估

  • 点击状态栏上的 服务驱动的类型引擎图标 ，并选择您希望从中获取类型评估的服务旁边的复选框。 准备好后，重启 PhpStorm。

    服务驱动的类型引擎小部件

  • 或者，按 Ctrl+Alt+S 打开设置并选择 设置 | 语言和框架 | TypeScript | Angular ，选择 自动 ，然后选择 启用服务驱动的类型引擎 复选框。

    默认情况下，复选框是清除的，因此类型评估、解析、代码检查和重构基于 PhpStorm 内部 TypeScript 引擎的类型信息。

    此默认行为可能导致性能问题以及类型解析中的错误，因为 PhpStorm 的内部 TypeScript 引擎所使用的类型评估算法与 Angular 语言服务的算法不同。选中该复选框有助于避免这些问题。 选择复选框可能有助于避免这些问题。

组件

使用 PhpStorm，您可以通过多种方式创建 Angular 组件：

使用预定义模板创建组件

PhpStorm 提供了用于创建 Angular 组件的预定义 实时模板 ，如 a-component、 a-component-inline 和 a-component-root。

使用预定义的代码片段创建一个 Angular 组件

有关 实时模板 的更多信息，请参阅 实时模板。

要查看预定义模板的完整列表，请打开 设置 对话框（Ctrl+Alt+S ），转到 编辑器 | 实时模板 ，并展开 Angular 节点。

  1. 在编辑器中，按 Ctrl+J ，从列表中选择适当的模板（例如， a-component ），然后按 Enter。

  2. PhpStorm 生成一个组件存根，将文本光标放在带有画布的字段上，等待您在此处指定组件名称。 当您键入组件名称时，选择器名称和模板 URL 会根据 Angular Style Guide自动填充。

  3. 如果需要，可以使用检查弹窗使新组件 独立。

    使组件独立

了解如何从 WebStorm 部落格中的 使用和创建代码片段自定义带有变量的模板。

创建组件文件夹

在 PhpStorm 中，您可以通过一个操作为 Angular 组件创建一堆文件，甚至可以将它们全部放置在一个单独的文件夹中。 要做到这一点，您需要使用具有多个子模板的文件模板。 当您从父模板创建文件时，子模板中的相关文件将自动生成。 如需了解更多信息，请参阅 包含多个文件的模板。

假设您想要创建一个 示例 文件夹，其中包含一堆组件文件，例如， example.component.ts 用于逻辑， 示例.component.html 用于模板， example.component.css 用于样式。 您可以使用两个父模板创建一个文件模板，这样所有三个文件将同时生成并放置在一个单独的文件夹中。

  1. 在 设置 对话框(Ctrl+Alt+S )中，选择 编辑器 ｜ 文件和代码模板。

  2. 首先创建一个 TypeScript 组件文件的模板：

    1. 在 个文件 选项卡中，点击工具栏上的 Add 按钮（创建模板按钮）。

      添加新模板

      新增的 未命名 模板已添加到列表中。

    2. 在右侧窗格中，指定模板名称，令其为 Angular 组件 ，并将 component.ts 作为文件扩展名。

    3. 在 文件名 字段中，输入 $NAME/$NAME。

    4. """ 可选地，添加代码模板，例如： """

      /* * Created by ${USER} on ${DATE} */ import { Component } from '@angular/core';
    创建父模板

    点击 Apply。

  3. 为相关的 HTML 文件创建一个子模板：

    1. 请选择父模板 Angular 组件 并点击工具栏上的 创建子模板文件 按钮 创建子模板文件。

      添加子模板图标

      子模板已添加到 Angular 组件 模板下。

    2. 在右侧窗格中，在 文件名 字段中输入 $NAME/$NAME 并指定 component.html 扩展名。

    创建子模板：component.html

    点击 Apply。

  4. 为相关样式表创建子模板。

    1. 请选择父模板 Angular 组件 并点击工具栏上的 创建子模板文件。 在 Angular 组件 模板下添加了一个子模板。

    2. 在右侧窗格中，在 文件名 字段中输入 $NAME/$NAME 并指定 component.css 扩展名。

  5. 点击 确定 以保存模板。

  6. 创建组件文件。

    从要存储组件文件的文件夹的上下文菜单中，选择 新建 | Angular 组件。 在打开的对话框中，指定将用于文件夹和组件文件的名称（在此示例中为 示例 ）。

    从多个文件模板中在单独文件夹中创建一个 Angular 组件

从模板中提取组件

提取 Angular 组件重构通过运行 ng generate component 来工作，并考虑了 angular.json 文件中的示意偏好。

  1. 在 HTML 模板文件中，选择您想提取到 Angular 组件中的代码片段。

  2. 从所选内容的上下文菜单中选择 重构 | 提取组件。

    或者，按 Ctrl+Alt+Shift+T 并从 重构此内容 弹出窗口中选择 提取组件。

    提取组件：重构此内容

  3. 在打开的对话框中，指定新组件的名称。

独立组件

如果您的项目使用 Angular 19 ，组件、管道和指令默认是 standalone。 对于通过 NgModules 声明的组件，请设置 standalone: false。

PhpStorm 检测到 non-standalone 管道、指令或组件的错误导入，以及在非独立组件中使用 imports 属性：

在非独立组件中错误使用导入指令

信号

借助 PhpStorm，您可以轻松地直接从 signal、 computed 和 effect 模板创建 Angular signals。

Angular signals

创建信号

  1. 编写您需要的函数。 PhpStorm 运行检查并将新函数标记为未解决。

  2. 将光标悬停在突出显示的函数上，然后在弹出窗口中点击 创建信号“<function name>” 链接。

    创建 Angular signal：检测弹出窗口

    或者，将光标放在高亮显示的函数上，按 Alt+Enter ，然后选择 创建信号“<function name>”。

    创建 Angular signal：意图操作

  3. PhpStorm 将您带到组件的 TypeScript 文件，在那里会生成新的 signal 的存根。 请填写必要的占位符。

PhpStorm 识别、高亮、提供文档和补全，并支持 contentChild、 contentChilden、 viewChild 和 viewChildren 信号查询 的导航。

为 Angular 信号配置高亮显示

  1. 按 Ctrl+Alt+S 打开设置并选择 编辑器 | 颜色方案 | Angular 模板。

  2. 在列表中选择 信号 并点击 前景 旁边的颜色指示。

    Angular signal：配置高亮

  3. 请选择您喜欢的颜色，然后点击 Apply。

结构化指令

PhpStorm 识别 结构化指令 ，并在模板中提供高亮显示。

对于绑定键和模板上下文属性，补全会在弹窗中建议：

结构化指令 - 补全

重命名 重构可用于映射到指令输入的模板绑定键。

参数信息弹窗会在完成属性或按下 Ctrl+P 时自动显示。

结构化指令 - 参数信息弹窗

宿主监听器和绑定

PhpStorm 完全支持 宿主监听器 和 绑定。

  • 为 @HostListener 和 @HostBinding 装饰器提供补全、高亮和快速文档。

    支持 @HostListener 和 HostBinding 装饰器

  • 为 @HostListener 提供事件补全。

    HostListeners 的事件补全

  • 类型检查块 (TCB) 是为宿主绑定生成的。

  • 支持跨宿主绑定和 HTML 模板的 CSS 类。

    在宿主绑定中使用 CSS 类

响应式表单

PhpStorm 提供对 Angular 响应式表单 的支持。

  • 通过 new FormGroup({.. .}) 和 FormBuilder.group({...}) 调用从字段初始化器构建嵌套表单组模型结构，以及通过 FormBuilder.group({...}) 调用在构造函数中初始化字段。

    PhpStorm 识别表单组对象初始化器中的 control、 group 和 array ，新实例调用（FormGroup、 FormControl 和 FormArray ），以及 FormBuilder 方法。

    响应式表单中的补全和快速文档

  • 对于 FormGroup.get() 调用，PhpStorm 提供代码补全、名称验证、未知段的快速修复以及字符串文字中的语法高亮。

    FormGroup.get() 中的补全和快速文档

  • 对于 HTML 模板中的 formControlName、 formGroupName 和 formArrayName ，提供代码补全、名称验证、创建缺失控件的快速修复、语法高亮和结构化依赖。

    响应式表单中的结构化依赖

增量水合

PhpStorm 支持 Angular 19 @defer 水合语法。

  • 代码补全

    @defer 语法的代码补全

  • 快速文档查找

    @defer 语法的快速文档

  • 针对早于 Angular 19 的版本提供错误报告。

    Angular 19 之前版本中 @defer 语法的错误消息

将 HTML 模板包装在控制流块中

  • 在 Angular HTML 模板中，选择一个代码片段，按 Ctrl+Alt+T ，然后从列表中选择封闭代码。

    包装 HTML 块

使用 ng add 添加新特性

您可以使用 已发布的 Angular 库 中的大多数库，使用 Angular 依赖 操作。 此操作运行 ng add 命令 ，安装依赖项并更新当前工作目录中的应用以使用该依赖项。 请注意，并非所有库都支持使用 ng add 进行安装。

  1. 从主菜单中选择 文件｜新建 ，或在 Project 工具窗口 Alt+1 中按 Alt+Insert ，然后选择 Angular 依赖。

  2. 从列表中选择要添加的库。 列表中显示了可以与 ng add 一起安装的库。 若要安装列表中没有的包，请滚动到列表末尾并双击 安装未列出的软件包 链接，然后在打开的对话框中指定包名。

  3. 请按照向导的步骤操作。

    下面的示例说明了如何将 Angular Material 添加到项目中。

    将 Angular Material 添加到一个项目中使用 ng add

如果您通过 package.json 手动管理依赖项，PhpStorm仍然识别支持 ng add 的软件包。 当您将此类包添加到 package.json 时，PhpStorm建议使用 ng add 安装它。

PhpStorm 建议使用 ng add 添加依赖项

使用 Angular Schematics 生成代码

PhpStorm 可以使用像 @angular/material 这样的库中定义的原理图以及 Angular CLI 本身定义的原理图来生成代码。

  1. 从主菜单中选择 文件｜新建 或在 Project 工具窗口中按 Alt+Insert ，然后选择 Angular 原理图。

  2. 从列表中选择相关的示意图。 开始输入示意图的名称，列表会随着您输入的内容而缩小。

    选择 Angular Schematic

  3. 在打开的对话框中，指定要生成的图示名称和必要的附加选项。 PhpStorm 显示原理图的描述，并提供代码完成和可用选项的描述。

    正在生成 Angular CLI 概要图：提供代码补全和描述

查看参数提示

在 Angular HTML 模板中， 参数提示会显示方法和函数中参数的名称，以便于阅读代码。 在模板中，关于块参数的信息会在完成时显示。

配置参数提示

  1. 打开 设置 对话框（Ctrl+Alt+S ），然后转到 编辑器 | 内联提示。

  2. 展开 Angular HTML 模板 下的 参数名称。

  3. 通过选择相应的复选框指定您希望显示参数提示的上下文。

    预览显示了您在设置中所做的更改如何影响代码外观。

  4. 对于某些方法和函数，PhpStorm 在任何情况下都不会显示参数提示。 请点击 排除列表... 查看这些方法和函数，可能启用参数提示，或者向列表中添加新项目。

  5. 要隐藏任意上下文中任意值类型的参数提示，请取消选中 Angular HTML 模板 复选框下的 参数名称。

在 Angular 模板中配置参数提示

检查您的代码

PhpStorm 带来了一系列特定于 Angular 的检查，帮助您在编辑代码时发现错误，并为其建议快速修复。

重复的属性

在下面的示例中，同时使用了 template 和 templateUrl 属性。 PhpStorm 检测到错误，警告您，并建议快速修复。

Angular 检查：重复属性

结构化指令的错误使用

PhpStorm 警告您关于 *ngIf 和 *ngFor 结构化指令的错误使用。

角度检查：结构指令使用不当

使用独立组件

Angular 特定的检查可帮助您识别 独立组件的不当使用。 在下面的示例中，PhpStorm 检测到一个非独立组件的导入语句，并建议快速修复该问题。

一个非独立模块被直接导入

未使用的导入

在 standalone 组件中，PhpStorm 检测到未使用的组件、管道和指令的导入语句，并建议将其移除。

Angular 检查 - 未使用的导入

未使用的导入语句也可以在重新格式化文件时自动移除（Ctrl+Alt+Shift+L）。

快速修复和上下文感知操作

您可能会发现使用快速修复来从 Angular 组件模板创建 @Input 和 @Output 属性非常方便，无论是否有 transform 属性。 请注意，所需的 import 声明也会自动生成。

生成 @Input 和 @Output 属性的快速修复

PhpStorm 还提供了上下文感知的 创建字段 和 创建方法 操作，帮助您生成正确声明的字段。

查看和配置 Angular 特定的检查

  1. 在 设置 对话框 (Ctrl+Alt+S) 中，前往 编辑器｜检查。

  2. 展开 Angular 节点。

  3. 配置检查配置文件和严重性，禁用和抑制预定义检查，并按照 代码检查 中的描述创建自定义检查。

在 Angular 应用中导航

在处理 Angular 项目时，您需要在不同的组件文件之间切换，例如 TypeScript、模板和样式文件。 要浏览您的代码，您可以使用以下选项：

此外，您可以下载 Angular CLI QuickSwitch 插件 并 将其安装在您的计算机上。

使用相关符号弹窗导航

  1. 要调用显示相关文件列表的 相关符号 弹出窗口，请执行以下操作之一：

    • 按下 Ctrl+Alt+Home。

    • 请选择 导航 | 相关符号(R)… 从主菜单。

    • 右键点击编辑器中的任意区域，然后选择 转到 | 相关符号(R)…。

    在 TypeScript 组件文件中，弹出窗口还会列出导入到此文件中的所有符号。

    使用相关符号弹出窗口浏览 Angular 应用

  2. 要打开一个文件，选择它并按 Enter。 或者，使用与每种文件类型相关联的数字：

    1. 带有组件类的 TypeScript 文件

    2. 模板

    3. 测试

    4. 样式

使用用法导航

  • 将光标放在符号的声明处并按 Ctrl+B。

    如果符号仅被使用一次，PhpStorm 会将您带到该用法并高亮显示。

    如果找到多个用法，PhpStorm 会在弹窗中显示它们。 选择要导航到的用法并按 Enter ，或者直接在列表中点击它。

  • 将光标放在符号的声明处并按 Ctrl+Alt+F7。

    使用工具栏上的图标显示或隐藏导入语句（显示导入语句按钮 ）、字符串文字（显示动态用法按钮 ）和 HTML 文件（显示组件用法图标 ）中对组件的引用。

  • 点击 显示用法提示 以跳转到用法或从列表中选择相关的用法。

使用 Angular Material Design 组件

PhpStorm 能识别 Angular Material 组件和属性，并提供编码帮助：

  • 组件的代码补全

    Angular 组件的建议完成变量列表

  • 属性的自动完成

    Angular 属性的建议完成变体列表

  • 在组件或属性与其声明之间导航（按 Ctrl+B 或从上下文菜单中选择 转到 | 声明）。

安装 Angular Material

  • 打开嵌入式 终端 （Alt+F12 ），然后输入 ng add @angular/material。

  • 在您的 package.json 中的 dependencies 下添加 "@angular/material": "^16.2.11" 并运行 npm install。

  • 在主菜单中，进入 文件 | 新建 | Angular 依赖 ，然后从列表中选择 @angular/material 并按照启动的向导步骤操作。

    安装 Angular Material

请从 Angular Material 官方网站上的入门指南中了解更多信息。

配置语法高亮

在 Angular 项目中，PhpStorm 识别并高亮显示各种符号，例如 CSS 类和属性、HTML 属性和标签，以及 Angular 输入和输出绑定。 这些符号的出现会在各种上下文中高亮显示，例如 HTML 属性或 JavaScript 字符串文字。

在各种上下文中高亮显示符号

您可以根据您的偏好和习惯配置 Angular 感知语法高亮显示。

  1. 在 设置 对话框 (Ctrl+Alt+S) 中，前往 编辑器 | 颜色方案 | Angular 模板。

  2. 选择颜色方案，接受从默认设置继承的高亮设置，或按照 颜色和字体 中的描述自定义它们。

在一个项目中使用多个框架

有时，您可能需要在一个 Angular 项目中使用其他框架。

要在每个文件中获得上下文感知的编码辅助，请创建一个配置文件 .ws-context ，并指定每个特定文件或文件夹应使用的框架。 此文件中的设置将覆盖默认配置。

  1. 在项目根目录中，从上下文菜单中选择 新建 | 文件 并将文件名指定为 .ws-context。

  2. 在 .ws-context 中，使用两种属性：

    • <context-name> 带有上下文值字符串

    • 具有上下文详情对象的 GLOB 模式

  3. 使用以下上下文值：

    • framework： vue、 angular、 react、 svelte、 astro

    • angular-template-syntax： V_2、 V_17

    • nextjs-project： nextjs

    • astro-project： astro

    • vue-store： vuex、 pinia

    • vue-class-component-library： vue-class-component、 vue -property-decorator、 vue-facing-decorator

    • jsdoc-dialect： jsdoc-typescript、 jsdoc-closure

  4. 使用路径嵌套以简化操作。

    • GLOB 路径的最后一段是文件名模式，它仅支持 * 通配符。

    • 如果最后一个段是一个 ** ，它匹配所有嵌套的目录和文件。

    • 顶层上下文属性应具有 /** 模式。

  5. 当多个模式匹配相同文件名时，将使用以下规则进行消歧：

    • 选择路径段数最多的模式，排除 ** 段。

    • 选择纯文件名模式，这意味着它不会以 ** 或 / 结尾。

    • 选择最先定义的模式。

示例

假设您有一个项目，其中在各个文件夹中使用了多个框架。

具有不同框架的项目

要为项目中的每个文件获得上下文相关的帮助，请将以下代码添加到 .ws-context:

{ "framework": "vue", "angular-template-syntax": "V_2", "src/**/app/**": { "framework": null, "app.component.html" : { "framework": "angular", "angular-template-syntax": "V_17" } }, "src/**/p*-editor/*.html" : { "framework" : "angular" } }
最后修改日期： 2025年 9月 26日
测试 TypeScript运行和调试 Angular 应用程序