# Angular

> For the complete documentation index, see [llms.txt](https://www.jetbrains.com/zh-cn/help/idea/llms.txt).

> **TL;DR**
> 仅在 IntelliJ IDEA Ultimate 订阅中提供： [下载](https://www.jetbrains.com/zh-cn/idea/download/)试用或 [探索功能](https://www.jetbrains.com/zh-cn/products/compare/?product=idea&product=idea-ult)。
>
>
>
> 所需插件  :
>
>
>
> `JavaScript 和 TypeScript`  -  插件与 IntelliJ IDEA 捆绑在一起，并默认启用。
>
>
>
> `Angular 和 AngularJS`  -  在   设置 | 插件   页面上安装插件。 该插件仅在拥有 Ultimate 订阅的 IntelliJ IDEA 中可用。

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

## 开始之前

Procedure:

1. 下载并安装 [Node.js](http://nodejs.org/#download)。

2. 请确保已在设置中启用  JavaScript 和 TypeScript  插件。 按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))打开设置，然后选择  `插件` 。 在搜索字段中，键入  JavaScript 和 TypeScript 。 有关插件的更多信息，请参阅 [管理插件](managing-plugins.html)。

3. 按照 [从 JetBrains Marketplace 安装插件](managing-plugins.html#install_plugin_from_repo) 中的说明，在   设置 | 插件   页面上安装并启用  Angular 和 AngularJS  插件。 该插件仅在拥有 Ultimate 订阅的 IntelliJ IDEA 中可用。

## 创建一个新的 Angular 应用程序

推荐开始构建新的 Angular 应用程序的方法是 [Angular CLI](https://cli.angular.io/)，IntelliJ IDEA 为您下载并使用 [npx](https://www.npmjs.com/package/npx) 运行它。 因此，您的应用程序已使用可直接使用的 TypeScript 和 Webpack 配置进行引导。

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

![创建一个新的 Angular 应用程序](https://resources.jetbrains.com/help/img/idea/2026.3/ws_angular_create_project.png)

Procedure:

1. 从主菜单中选择  `文件 | 新建 | 项目` ，或在   欢迎   屏幕上点击   新建项目   按钮。

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

3. 指定项目名称及其创建文件夹。 在   Node.js 运行时   字段中，指定要使用的 Node.js 运行时。 从列表中选择一个已配置的运行时，或选择   添加   以配置新的运行时。

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

或者，对于 npm 版本 5.1 及更早版本，请在   终端   `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS)) 中运行  `npm install -g @angular/cli` ，自行安装  `@angular/cli`  包。 创建应用程序时，选择存储  `@angular/cli`  包的文件夹。

4. 可选：

* 在 附加参数 字段中，指定要传递给 Angular CLI 的额外 [ng new options](https://github.com/angular/angular-cli/wiki/new)。 在此字段中可用代码补全：当您开始键入选项名称或按 `Ctrl+Space` (Windows), `⌃ Space` (macOS), `⌃ Space` (IntelliJ IDEA Classic (macOS)), `⌃ Space` (macOS System Shortcuts), `Ctrl+Space` (XWin), `Ctrl+Space` (GNOME), `Ctrl+Space` (KDE), `Alt+/` (Emacs), `Ctrl+Space` (Sublime Text), `⌃ Space` (Sublime Text (macOS)), `Ctrl+Space` (Visual Studio), `⌃ Space` (Visual Studio (macOS)), `Ctrl+Space` (NetBeans), `Ctrl+Space` (Eclipse), `⌃ Space` (Eclipse (macOS)) 时，IntelliJ IDEA 会显示可用选项及其描述。

* 如果您使用的是 [Angular version 16](https://angular.io/guide/update-to-version-16) 或更高版本，您还可以选择 创建带有独立组件的新项目 复选框。 了解更多信息，请访问 [Angular 官方网站](https://angular.io/guide/standalone-components)。

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

Procedure: 创建一个空的 IntelliJ IDEA 项目

1. 从主菜单中选择  `文件 | 新建 | 项目` ，或在   欢迎   屏幕上点击   新建项目   按钮。

2. 在   新建项目   对话框的左侧窗格中，选择   新建项目  。

3. 在右侧窗格中，选择   JavaScript   在   语言   区域。

4. 为新项目设置名称，并在必要时更改其位置，然后点击   创建  。

5. 当您点击   创建  ，IntelliJ IDEA 会创建并打开一个  空 项目。

Procedure: 在空项目中安装 Angular

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

2. 在命令行 shell 或嵌入式   终端  （ `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))）中输入：

`npm install @angular/core`

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

您还可能需要安装其他属于  Angular  的包，请参阅 [包列表](https://angular.io/docs/ts/latest/guide/npm-packages.html#!#feature-packages)。

## 从现有的 Angular 应用程序开始

> **Note:**
> 推荐的启动新 Angular 应用程序的方式是 [Angular CLI](https://cli.angular.io/)。 只有在这种情况下，您的应用程序才会使用可以直接使用的 TypeScript 和 Webpack 配置进行引导。

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

Procedure: 打开本机上已有的应用程序源代码

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

Procedure: 从版本控制系统检出应用程序源代码

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

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

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

2. 在打开的对话框中，从列表中选择版本控制系统，并指定要从中检出应用程序源代码的仓库。 有关更多信息，请参阅 [检出项目（克隆）](manage-projects-hosted-on-github.html#clone-from-GitHub)。

Procedure: 下载依赖项

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

![打开应用程序并下载依赖项](https://resources.jetbrains.com/help/img/idea/2026.3/ws_npm_yarn_package_run_npm_install.png)

您可以使用 [npm](https://docs.npmjs.com/)、 [Yarn 1](https://classic.yarnpkg.com/lang/en/) 或 [Yarn 2](https://yarnpkg.com/)，详情请参阅 [npm 和 Yarn](installing-and-removing-external-software-using-node-package-manager.html)。

* 或者，在编辑器中或在   项目   工具窗口（ `Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))）中，从  `package.json`  的上下文菜单中选择   运行 'npm install'   或   运行 'yarn install'  。

### 项目安全

打开在 IntelliJ IDEA 外部创建并导入其中的项目时，IntelliJ IDEA 会显示一个对话框，可在其中决定如何处理此包含不熟悉源代码的项目。

请选择以下选项之一：

* 在安全模式中预览 ：在这种情况下，IntelliJ IDEA 以预览模式打开项目。 这意味着可以浏览项目的源代码，但无法运行任务和脚本，也无法运行/调试项目。 IntelliJ IDEA 会在编辑器区域顶部显示一条通知，可以点击 信任项目… 链接随时加载项目。

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

* 不打开 ：在这种情况下，IntelliJ IDEA 不会打开项目。

有关更多信息，请参阅 [项目安全](project-security.html)。

> **Tip:**
> 从欢迎屏幕或通过  `文件 | 新建 | 项目`  创建的项目会被自动视为受信任。

## 编写和编辑代码

本章提供与 Angular 相关的提示。 如需一般指南，请参阅 [编写和编辑源代码](working-with-source-code.html)和 [TypeScript](typescript-support.html)。

### 配置 Angular 语言服务

IntelliJ IDEA 提供完整的 Angular 专属编码辅助，包括代码补全、错误检测和高亮显示、提示，以及 Angular 模板内的导航。 可以配置从 [Angular 语言服务](https://angular.dev/tools/language-service) 或从内部 IntelliJ IDEA 解析器和代码检查获取 Angular 项目的编码辅助。

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

Procedure:

1. 要打开 Angular 设置，请点击状态栏上的 ![当前文件上运行的语言服务图标](https://resources.jetbrains.com/help/img/idea/2026.3/angular_language_service_status_bar.png)，然后点击 ![打开设置图标](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.general.settings.svg)。

![Angular 语言服务微件](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ls_widget_angular.png)

或者，按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) 打开设置并选择   设置 | 语言与框架 | TypeScript | Angular  。

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

* 默认情况下， 自动 选项处于选中状态，因此 IntelliJ IDEA 会在任何适当的上下文中自动启用 [Angular 语言服务](https://angular.dev/tools/language-service)。 因此，类型评估基于 TypeScript 语言服务的数据执行，同时也会应用内部 IntelliJ IDEA 检查。

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

Procedure: 重新启动 Angular 语言服务

* 点击状态栏上的 ![当前文件上运行的语言服务图标](https://resources.jetbrains.com/help/img/idea/2026.3/angular_language_service_status_bar.png)，然后点击 ![重新启动服务图标](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.run.restartFailedTests.svg)，其位于   Angular TypeScript <版本>   旁边。

![Angular 语言服务微件 - 重新启动服务](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ls_widget_angular_restart.png)

Procedure: 配置类型评估

* 点击状态栏上的 ![服务驱动的类型引擎图标](https://resources.jetbrains.com/help/img/idea/2026.3/service_powered_type_engine_status_bar.png)，然后选中要从中获取类型评估的服务旁边的复选框。 准备就绪后，重新启动 IntelliJ IDEA。

![服务驱动的类型引擎微件](https://resources.jetbrains.com/help/img/idea/2026.3/service_powered_type_engine_widget.png)

* 或者，按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) 打开设置并选择   设置 | 语言与框架 | TypeScript | Angular  ，选择   自动  ，然后选中   启用服务驱动的类型引擎   复选框。

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

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

> **Note:**
> 如果   TypeScript 语言服务   复选框在 [TypeScript 页面](settings-languages-typescript.html)上已选中，并且 Angular 语言服务处于   自动   状态，则部分代码高亮显示和补全始终会从相应的语言服务检索，无论   启用服务驱动的类型引擎   复选框是选中还是清除。

#### 配置内存处理

尽管 IntelliJ IDEA 致力于提供与语言服务的顺畅集成，但仍可能出现由语言服务而非 IntelliJ IDEA 本身引发的  内存不足  错误。

为防止出现  内存不足 错误或使其得到无缝解决，从而确保语言服务稳定运行，您可以配置内存处理。 通过 [语言服务](language-services.html) 了解详情。

Angular 语言服务的内存处理设置始终从 TypeScript 语言服务继承。

Procedure: 配置 TypeScript 语言服务的内存处理

1. 按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) 打开设置，然后转到  `设置 | 语言 & 框架 | TypeScript` 。

2. 在   语言服务内存   区域中，选择内存处理模式:

* 在 语言服务内存 区域中，选择 如果可用，自动增加内存 以增加内存并静默重启语言服务。

* 或者，选择 设置内存限制 并指定语言服务可使用的最大内存。 如果指定的内存大小超过可用 RAM，IntelliJ IDEA 会在工具提示中建议适当的值。 > **Note:** > 确保计算机有足够的可用 RAM。 如果分配量已经很高，例如 8GB+，请考虑 [升级/降级](language-services.html#ls_upgrade_downgrade)或 [限制项目作用域](language-services.html#ls_limit_project_scope)。

### Angular 应用程序中的 TypeScript 7 (Kolar)

IntelliJ IDEA 提供对 Kolar 的支持，可在 TypeScript 7 上下文中确保代码补全、导航、代码检查、快速修复、查找用法、嵌入提示、类型信息和快速文档。

Procedure:

1. 按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) 打开设置，然后转到  `设置 | 语言 & 框架 | TypeScript` 。

2. 从   TypeScript   列表中选择   TypeScript 7 (原生)  。

![启用 TypeScript 7 (原生)](https://resources.jetbrains.com/help/img/idea/2026.3/ws_vue_typescript_kolar.png)

### 组件

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

* [使用预定义或自定义的 实时模板](#ws_angular_create_component_predefined_template)。

* [创建组件文件夹](#ws_angular_create_component_folder)及一组相关的 `.ts` 、 `.html` 和 `.css` 文件。

* 通过专门的重构 [从模板中提取组件](#ws_angular_component_extract)。

Procedure: 使用预定义模板创建组件

IntelliJ IDEA 提供了用于创建 Angular 组件的预定义 [实时模板](using-live-templates.html)，如  `a-component` 、  `a-component-inline` 和  `a-component-root` 。

![使用预定义的代码片段创建一个 Angular 组件](https://resources.jetbrains.com/help/img/idea/2026.3/ws_create_angular_component_predefined_template.animated.gif)

有关 实时模板 的更多信息，请参阅 [实时模板](using-live-templates.html)。

要查看预定义模板的完整列表，请打开   设置  对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到  `编辑器 | 实时代码模板` ，并展开   Angular  节点。

1. 在编辑器中，按 `Ctrl+J` (Windows), `⌘ J` (macOS), `⌘ J` (IntelliJ IDEA Classic (macOS)), `⌘ J` (macOS System Shortcuts), `Ctrl+J` (XWin), `Ctrl+J` (GNOME), `Ctrl+J` (KDE), `Ctrl+J` (Emacs), `Ctrl+J` (Sublime Text), `Ctrl+J` (Sublime Text (macOS)), `Ctrl+K, X` (Visual Studio), `⌘ E, L` (Visual Studio (macOS)), `Ctrl+J` (NetBeans), `Ctrl+Alt+Shift+J` (Eclipse), `Ctrl+J` (Eclipse (macOS))，从列表中选择适当的模板（例如，  `a-component` ），然后按 `Enter` (Windows), `⏎` (macOS), `⏎` (IntelliJ IDEA Classic (macOS)), `⏎` (macOS System Shortcuts), `Enter` (XWin), `Enter` (GNOME), `Enter` (KDE), `Enter` (Emacs), `Enter` (Sublime Text), `⏎` (Sublime Text (macOS)), `Enter` (Visual Studio), `⏎` (Visual Studio (macOS)), `Enter` (NetBeans), `Enter` (Eclipse), `⏎` (Eclipse (macOS))。

2. IntelliJ IDEA 生成一个组件存根，将文本光标放在带有画布的字段上，等待您在此处指定组件名称。 当您键入组件名称时，选择器名称和模板 URL 会根据 [Angular Style Guide](https://angular.io/guide/styleguide#component-selectors)自动填充。

3. 如有必要，可以使用检查弹出窗口使新组件 [独立](https://angular.io/guide/standalone-components)。

![使组件独立](https://resources.jetbrains.com/help/img/idea/2026.3/ws_create_angular_component_make_standalone.png)

了解如何从 WebStorm 部落格中的 [使用和创建代码片段](https://blog.jetbrains.com/webstorm/2018/01/using-and-creating-code-snippets/)自定义带有变量的模板。

Procedure: 创建组件文件夹

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

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

1. 在   设置  对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))）中，选择  `编辑器 | 文件和代码模板` 。

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

1.

在   文件  选项卡中，点击工具栏上的   添加  按钮（ ![创建模板按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg)）。

![添加新模板](https://resources.jetbrains.com/help/img/idea/2026.3/ws_angular_component_create_folder_add_icon.png)

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

2.

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

3.

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

4.

可选：添加代码模板，例如：

```CONSOLE
 /*
 * Created by ${USER} on ${DATE}
*/

import { Component } from '@angular/core';                           
```

![创建父模板](https://resources.jetbrains.com/help/img/idea/2026.3/ws_angular_component_create_folder_parent_template.png)

点击   应用  。

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

1.

请选择父模板   Angular 组件  并点击工具栏上的   创建子模板文件​  按钮 ![创建子模板文件](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.actions.addFile.svg)。

![添加子模板图标](https://resources.jetbrains.com/help/img/idea/2026.3/ws_angular_component_create_child_file_add_icon.png)

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

2.

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

![创建子模板：component.html](https://resources.jetbrains.com/help/img/idea/2026.3/ws_angular_component_create_folder_child_template.png)

点击   应用  。

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

1.

请选择父模板   Angular 组件   并点击工具栏上的 ![创建子模板文件](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.actions.addFile.svg)。 在   Angular 组件   模板下添加了一个子模板。

2.

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

5. 点击   OK   以保存模板。

6. 创建组件文件。

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

![从多个文件模板中在单独文件夹中创建一个 Angular 组件](https://resources.jetbrains.com/help/img/idea/2026.3/ws_angular_component_create_folder.animated.gif)

Procedure: 从模板中提取组件

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

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

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

或者，按 `Ctrl+Alt+Shift+T` (Windows), `⌃ T` (macOS), `⌘ ⌥ ⇧ T` (IntelliJ IDEA Classic (macOS)), `⌃ S` (macOS System Shortcuts), `Ctrl+Alt+Shift+T` (XWin), `Ctrl+Alt+Shift+T` (GNOME), `Ctrl+Alt+Shift+T` (KDE), `Ctrl+Alt+Shift+T` (Emacs), `Ctrl+Alt+Shift+T` (Sublime Text), `⌃ T` (Sublime Text (macOS)), `Ctrl+Shift+R` (Visual Studio), `⌘ ⇧ R` (Visual Studio (macOS)), `Ctrl+Alt+Shift+T` (NetBeans), `Ctrl+Alt+Shift+T` (Eclipse), `⌃ T` (Eclipse (macOS)) 并从   对此进行重构   弹出窗口中选择  `提取组件` 。

![提取组件：重构此内容](https://resources.jetbrains.com/help/img/idea/2026.3/ws_extract_angular_component_refactor_this.png)

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

### 独立组件

如果您的项目使用 [Angular 19](https://blog.angular.dev/meet-angular-v19-7b29dfd05b84)，组件、管道和指令默认是  `单机` 。 对于通过  `NgModules`  声明的组件，请设置  `standalone: false` 。

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

![在非独立组件中错误使用导入指令](https://resources.jetbrains.com/help/img/idea/2026.3/angular_imports_property_in_non_standalone_components.png)

### 信号

借助 IntelliJ IDEA，您可以轻松地直接从 [signal](https://angular.io/guide/signals)、 [computed](https://angular.io/guide/signals#writable-signals) 和 [effect](https://angular.io/guide/signals#computed-signals) 模板创建 [Angular signals](https://angular.io/guide/signals#effects)。

![Angular 信号](https://resources.jetbrains.com/help/img/idea/2026.3/angular_signals.animated.gif)

Procedure: 创建信号

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

2. 将鼠标悬停在高亮显示的函数／方法上，然后点击弹出窗口中的   创建信号"<function name>"   链接。

![创建 Angular signal：检测弹出窗口](https://resources.jetbrains.com/help/img/idea/2026.3/angular_signal_create_popup.png)

或者，将光标放在高亮显示的函数上，按 `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Alt+Enter` (NetBeans), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS))，然后选择  `创建信号"<function name>"` 。

![创建 Angular signal：意图操作](https://resources.jetbrains.com/help/img/idea/2026.3/angular_signal_create_intention_action.png)

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

> **Note:**
> 当您手动创建信号时，IntelliJ IDEA 会在您键入时建议完成变体。
>
>
>
> ![创建 Angular 信号：代码补全](https://resources.jetbrains.com/help/img/idea/2026.3/angular_signal_create_completion.png)

IntelliJ IDEA 识别、高亮显示、提供文档和补全，并支持  `contentChild` 、  `contentChilden` 、  `viewChild`  和  `viewChildren`  [信号查询](https://angular.dev/guide/components/queries) 的导航。

[Video](https://resources.jetbrains.com/help/img/idea/2026.3/angular_signal_based_queries.mp4)

Procedure: 为 Angular 信号配置高亮显示

1. 按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) 打开设置并选择   编辑器 | 配色方案 | Angular 模板  。

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

![Angular signal：配置高亮](https://resources.jetbrains.com/help/img/idea/2026.3/angular_signal_highlighting.png)

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

### 结构化指令

IntelliJ IDEA 识别 [结构化指令](https://angular.dev/guide/directives/structural-directives)，并在模板中提供高亮显示。

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

![结构化指令 - 补全](https://resources.jetbrains.com/help/img/idea/2026.3/angular_structural_directives_completion.png)

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

参数信息弹窗会在完成属性或按下 `Ctrl+P` (Windows), `⌘ P` (macOS), `⌘ P` (IntelliJ IDEA Classic (macOS)), `⌘ P` (macOS System Shortcuts), `Ctrl+P` (XWin), `Ctrl+P` (GNOME), `Ctrl+P` (KDE), `Alt+Shift+P` (Emacs), `Ctrl+P` (Sublime Text), `Ctrl+P` (Sublime Text (macOS)), `Ctrl+Shift+Space` (Visual Studio), `⌘ P` (Visual Studio (macOS)), `Ctrl+P` (NetBeans), `Ctrl+P` (Eclipse), `⌃ ⇧ Space` (Eclipse (macOS)) 时自动显示。

![结构化指令 - 参数信息弹窗](https://resources.jetbrains.com/help/img/idea/2026.3/angular_structural_directives_parameter_info_popup.png)

### 宿主监听器和绑定

IntelliJ IDEA 为 [宿主监听器](https://angular.dev/api/core/HostListener) 和 [绑定](https://angular.dev/api/core/HostBinding) 提供全面支持。

* 为 `@HostListener` 和 `@HostBinding` 装饰器提供补全、高亮和快速文档。 ![支持 @HostListener 和 HostBinding 装饰器](https://resources.jetbrains.com/help/img/idea/2026.3/host_decorators_support.png)

* 为 `@HostListener` 提供事件补全 ![为 HostListeners 提供事件补全](https://resources.jetbrains.com/help/img/idea/2026.3/host_listeners_event_completion.png)

* [类型检查块 (TCB)](https://blog.angular.dev/how-the-angular-compiler-works-42111f9d2549) 是为宿主绑定生成的。

* 支持跨宿主绑定和 HTML 模板的 CSS 类 ![在宿主绑定中使用 CSS 类](https://resources.jetbrains.com/help/img/idea/2026.3/css_classes_in_host_listeners_and_bindings.png)

### 响应式表单

IntelliJ IDEA 提供对 [Angular 响应式表单](https://angular.dev/guide/forms/reactive-forms) 的支持。

* 从字段初始化器构建嵌套表单组模型结构，使用 `new FormGroup({.. .})` 和 `FormBuilder.group({...})` 调用，以及在构造函数中使用 `FormBuilder.group({...})` 调用进行字段初始化。 IntelliJ IDEA 识别表单组对象初始化器中的 `control` 、 `组` 和 `数组` ，新实例调用（ `FormGroup` 、 `FormControl` 和 `FormArray` ），以及 `FormBuilder` 方法。 ![在响应式表单中提供补全和快速文档](https://resources.jetbrains.com/help/img/idea/2026.3/angular_reactive_forms_completion_and_quick_doc.png)

* 对于 `FormGroup.get()` 调用，IntelliJ IDEA 提供代码补全、名称验证、未知段的快速修复以及字符串字面量中的语法高亮。 ![在 FormGroup.get() 中提供补全和快速文档](https://resources.jetbrains.com/help/img/idea/2026.3/angular_reactive_forms_form_group_get_completion_and_quick_doc.png)

* 对于 HTML 模板中的 `formControlName` 、 `formGroupName` 和 `formArrayName` ，提供代码补全、名称验证、创建缺失控件的快速修复、语法高亮和结构依赖。 ![响应式表单中的结构依赖](https://resources.jetbrains.com/help/img/idea/2026.3/angular_reactive_forms_structural_dependency.png)

### 增量式水合

IntelliJ IDEA 支持 [Angular 19

@defer

水合语法](https://github.com/angular/angular/discussions/57664)。

* 代码补全 ![为 @defer 语法提供代码补全](https://resources.jetbrains.com/help/img/idea/2026.3/incremental_hydration_code_completion.png)

* 快速文档查询 ![为 @defer 语法提供快速文档](https://resources.jetbrains.com/help/img/idea/2026.3/incremental_hydration_quick_doc.png)

* 为早于 Angular 19 的版本提供错误报告。 ![在 Angular 19 之前版本中为 @defer 语法提供错误消息](https://resources.jetbrains.com/help/img/idea/2026.3/incremental_hydration_angular_version_17_error.png)

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

Procedure:

* 在 Angular HTML 模板中，选择代码片段，按下 `Ctrl+Alt+T` (Windows), `⌘ ⌥ T` (macOS), `⌘ ⌥ T` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ T` (macOS System Shortcuts), `Ctrl+Alt+Shift+B` (XWin), `Ctrl+Alt+Shift+B` (GNOME), `Ctrl+Alt+Shift+B` (KDE), `Ctrl+Alt+T` (Emacs), `Ctrl+Alt+T` (Sublime Text), `⌘ ⌥ T` (Sublime Text (macOS)), `Ctrl+Alt+T` (Visual Studio), `Ctrl+Alt+T` (Visual Studio (macOS)), `Ctrl+Alt+T` (NetBeans), `Alt+Shift+Z` (Eclipse), `⌘ ⌥ Z` (Eclipse (macOS))，然后从列表中选择封闭代码。

![包装 HTML 块](https://resources.jetbrains.com/help/img/idea/2026.3/angular_wrap_html_in_control_flow_blocks.png)

### 使用 ng add 添加新特性

您可以使用   Angular 依赖   操作添加大多数 [已发布的 Angular 库](https://angular.dev/tools/libraries/using-libraries)。 此操作运行 [ng add

命令](https://angular.dev/cli/add)，安装依赖项并更新当前工作目录中的应用以使用该依赖项。 请注意，并非所有库都支持使用  `ng add`  进行安装。

Procedure:

1. 从主菜单中选择  `文件｜新建` ，或在   项目   工具窗口 ( `Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))) 中按 `Alt+Insert` (Windows), `⌘ N` (macOS), `⌃ N` (IntelliJ IDEA Classic (macOS)), `⌘ N` (macOS System Shortcuts), `Alt+Insert` (XWin), `Alt+Insert` (GNOME), `Alt+Insert` (KDE), `Alt+Insert` (Emacs), `Ctrl+N` (Sublime Text), `⌘ N` (Sublime Text (macOS)), `Ctrl+N` (Visual Studio), `⌘ N` (Visual Studio (macOS)), `Alt+Insert` (NetBeans), `Alt+Insert` (Eclipse), `⌘ N` (Eclipse (macOS))，然后选择   Angular 依赖  。

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

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

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

![将 Angular Material 添加到一个项目中使用 ng add](https://resources.jetbrains.com/help/img/idea/2026.3/ws_angular_ng_add.animated.gif)

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

![IntelliJ IDEA 建议使用 ng add 添加依赖](https://resources.jetbrains.com/help/img/idea/2026.3/ws_install_with_ng_add_inspection.png)

### 使用 Angular 原理图生成代码

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

Procedure:

1. 从主菜单中选择  `文件｜新建` ，或在   项目   工具窗口中按 `Alt+Insert` (Windows), `⌘ N` (macOS), `⌃ N` (IntelliJ IDEA Classic (macOS)), `⌘ N` (macOS System Shortcuts), `Alt+Insert` (XWin), `Alt+Insert` (GNOME), `Alt+Insert` (KDE), `Alt+Insert` (Emacs), `Ctrl+N` (Sublime Text), `⌘ N` (Sublime Text (macOS)), `Ctrl+N` (Visual Studio), `⌘ N` (Visual Studio (macOS)), `Alt+Insert` (NetBeans), `Alt+Insert` (Eclipse), `⌘ N` (Eclipse (macOS))，然后选择   Angular 原理图  。

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

![选择 Angular Schematic](https://resources.jetbrains.com/help/img/idea/2026.3/ws_generate_angular_cli_schematic.png)

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

![正在生成 Angular CLI 概要图：提供代码补全和描述](https://resources.jetbrains.com/help/img/idea/2026.3/ws_generate_angular_schematic_options_completion.png)

### 查看参数提示

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

Procedure: 配置参数提示

1. 打开   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），然后转到  `编辑器 | 内嵌提示` 。

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

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

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

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

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

![在 Angular 模板中配置参数提示](https://resources.jetbrains.com/help/img/idea/2026.3/ws_angular_view_parameter_hints.png)

## 检查您的代码

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

### 重复属性

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

![Angular 检查：重复属性](https://resources.jetbrains.com/help/img/idea/2026.3/ws_angular_inspection_duplicate_template.png)

### 错误使用结构化指令

IntelliJ IDEA 会警告您错误使用  `*ngIf`  和  `*ngFor`  结构化指令。

![角度检查：结构指令使用不当](https://resources.jetbrains.com/help/img/idea/2026.3/ws_angular_inspection_structural_template.png)

### 使用独立组件

Angular 特定的检查可帮助您识别 [独立组件](https://angular.io/guide/standalone-components)的不当使用。 在下面的示例中，IntelliJ IDEA 检测到一个非独立组件的导入语句，并建议对此问题进行快速修复。

![一个非独立模块被直接导入](https://resources.jetbrains.com/help/img/idea/2026.3/angular_inspections_import_non_standalone.animated.gif)

### 未使用的导入

在  `单机`  组件中，IntelliJ IDEA 会检测未使用组件、管道和指令的 import 语句，并建议将其移除。

![Angular 检查 - 未使用的导入](https://resources.jetbrains.com/help/img/idea/2026.3/ws_angular_inspection_unused_imports.png)

未使用的导入语句也可以在重新格式化文件时自动移除（ `Ctrl+Alt+Shift+L` (Windows), `⌘ ⌥ ⇧ L` (macOS), `⌘ ⌥ ⇧ L` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ ⇧ L` (macOS System Shortcuts), `Ctrl+Alt+Shift+L` (XWin), `Ctrl+Alt+Shift+L` (GNOME), `Ctrl+Alt+Shift+L` (KDE), `Ctrl+Alt+Shift+L` (Emacs), `Ctrl+Alt+Shift+L` (Sublime Text), `⌘ ⌥ ⇧ L` (Sublime Text (macOS)), `Ctrl+Alt+Shift+L` (Visual Studio), `⌘ ⌥ ⇧ L` (Visual Studio (macOS)), `Ctrl+Alt+Shift+L` (NetBeans), `Ctrl+Alt+Shift+L` (Eclipse), `⌘ ⌥ ⇧ L` (Eclipse (macOS))）。

[Video](https://resources.jetbrains.com/help/img/idea/2026.3/angular_inspect_remove_unused_import_on_reformat_file.mp4)

> **Note:**
> 此检查仅适用于  `单机`  组件，而不适用于导入的  `NgModules` 。

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

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

![生成 @Input 和 @Output 属性的快速修复](https://resources.jetbrains.com/help/img/idea/2026.3/angular_inspection_input_output.animated.gif)

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

Procedure: 查看和配置 Angular 特定的检查

1. 在   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到  `编辑器 | 检查` 。

2. 展开   Angular  节点。

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

## 在 Angular 应用中导航

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

* [导航栏](file-navigation.html#navigate-with-navigation-bar)

* [项目工具窗口](project-tool-window.html#views)

* [“转到文件”操作](searching-everywhere.html#search_all)

* [相关符号弹出窗口](#ws_angular_navigation_procedure)

* [用法](#ws_angular_navigation_with_find_usages)

* [导航弹出窗口](#ws_angular_navigation_popup)

此外，您可以下载 [Angular CLI QuickSwitch 插件](https://plugins.jetbrains.com/plugin/10587-angular-cli-quickswitch) 并 [将其安装在您的计算机上](managing-plugins.html#install_plugin_from_disk)。

Procedure: 使用相关符号弹窗导航

1. 要调用包含相关文件列表的弹出窗口，请执行以下任一操作：

* 在导航弹出窗口中点击 ![Goto Related](https://resources.jetbrains.com/help/img/idea/2026.3/ws_angular_navigation_popup_gotorelated.png)。

* 按下 `Ctrl+Alt+Home` (Windows), `⌘ ⌃ ↑` (macOS), `⌘ ⌥ Home` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ ↓` (macOS System Shortcuts), `Ctrl+Alt+Home` (XWin), `Ctrl+Alt+Home` (GNOME), `Ctrl+Alt+Home` (KDE), `Ctrl+Alt+Home` (Emacs), `Ctrl+Alt+Home` (Sublime Text), `Ctrl+Alt+Home` (Sublime Text (macOS)), `Ctrl+Alt+F7` (Visual Studio), `⌘ ⇧ F7` (Visual Studio (macOS)), `Ctrl+Alt+Home` (NetBeans), `Ctrl+Alt+Home` (Eclipse), `⌘ ⌃ ↑` (Eclipse (macOS))。

* 从主菜单中选择 `导航 | 相关符号…` 。

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

* 在 [导航弹出窗口](#ws_angular_navigation_popup)中点击 ![Goto Related](https://resources.jetbrains.com/help/img/idea/2026.3/ws_angular_navigation_popup_gotorelated.png)。 ![从导航弹出窗口中打开转到相关符号弹出窗口。](https://resources.jetbrains.com/help/img/idea/2026.3/ws_angular_navigation_popup_same_file.png)

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

![使用相关符号弹出窗口浏览 Angular 应用](https://resources.jetbrains.com/help/img/idea/2026.3/ws_angular_navigate_between_components.png)

2. 要打开一个文件，选择它并按 `Enter` (Windows), `⏎` (macOS), `⏎` (IntelliJ IDEA Classic (macOS)), `⏎` (macOS System Shortcuts), `Enter` (XWin), `Enter` (GNOME), `Enter` (KDE), `Enter` (Emacs), `Enter` (Sublime Text), `⏎` (Sublime Text (macOS)), `Enter` (Visual Studio), `⏎` (Visual Studio (macOS)), `Enter` (NetBeans), `Enter` (Eclipse), `⏎` (Eclipse (macOS))。 或者，使用与每种文件类型相关联的数字：

1.  包含组件类的 TypeScript 文件

2.  模板

3.  测试

4.  样式

Procedure: 使用用法导航

* 将光标放在符号的声明处并按下 `Ctrl+B` (Windows), `⌘ B` (macOS), `⌘ B` (IntelliJ IDEA Classic (macOS)), `⌘ B` (macOS System Shortcuts), `Ctrl+B` (XWin), `Ctrl+B` (GNOME), `Ctrl+B` (KDE), `Ctrl+Alt+G` (Emacs), `F12` (Sublime Text), `F12` (Sublime Text (macOS)), `F12` (Visual Studio), `F12` (Visual Studio (macOS)), `Ctrl+B` (NetBeans), `F3` (Eclipse), `F3` (Eclipse (macOS))。

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

如果找到多个用法，IntelliJ IDEA 会在弹窗中显示它们。 选择用法以导航到该位置并按下 `Enter` (Windows), `⏎` (macOS), `⏎` (IntelliJ IDEA Classic (macOS)), `⏎` (macOS System Shortcuts), `Enter` (XWin), `Enter` (GNOME), `Enter` (KDE), `Enter` (Emacs), `Enter` (Sublime Text), `⏎` (Sublime Text (macOS)), `Enter` (Visual Studio), `⏎` (Visual Studio (macOS)), `Enter` (NetBeans), `Enter` (Eclipse), `⏎` (Eclipse (macOS))，或者直接在列表中点击它。

* 将光标放在符号的声明处并按下 `Ctrl+Alt+F7` (Windows), `⌘ ⌥ F7` (macOS), `⌘ ⌥ F7` (IntelliJ IDEA Classic (macOS)), `⌃ ⌥ U` (macOS System Shortcuts), `Ctrl+Alt+7` (XWin), `Ctrl+Alt+7` (GNOME), `Ctrl+Alt+7` (KDE), `Ctrl+Alt+F7` (Emacs), `Shift+F12` (Sublime Text), `⇧ F12` (Sublime Text (macOS)), `Alt+Shift+F12` (Visual Studio), `⌥ ⇧ F12` (Visual Studio (macOS)), `Ctrl+Alt+F7` (NetBeans), `Ctrl+Alt+F7` (Eclipse), `⌘ ⌥ F7` (Eclipse (macOS))。

使用工具栏上的图标显示或隐藏导入语句（ ![显示导入语句按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.actions.showImportStatements.svg)）、字符串字面量（ ![显示动态用法按钮](https://resources.jetbrains.com/help/img/idea/2026.3/ws_find_usages_show_dynamic_usages.png)）和 HTML 文件（ ![显示组件用法图标](https://resources.jetbrains.com/help/img/idea/2026.3/markdown.icons.editor_actions.Code_span.svg)）中的组件引用。

[Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_angular_navigation_with_find_usages.mp4)

* 点击 [显示用法提示](inlay-hints.html) 以跳转到用法或从列表中选择相关用法。

Procedure: 使用导航弹出窗口

* 要启用导航弹出窗口，请按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))，转到  `高级设置` ，然后在   Angular   区域中选中   在编辑器中显示导航弹出窗口   复选框。 使用搜索字段可更轻松地找到该复选框。

![禁用 Angular 导航弹出窗口。](https://resources.jetbrains.com/help/img/idea/2026.3/ws_angular_navigation_popup_disable.png)

* 要访问导航弹出窗口，请将鼠标悬停在编辑器中的任意位置。 弹出窗口中的图标集取决于当前编辑器选项卡中文件的类型以及组件所包含的文件。

* 要在组件内的文件之间跳转，请点击相应的图标，例如，要跳转到  `.component.html`  文件，请点击 ![HTML 文件](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.fileTypes.html.svg)。

[Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_angular_navigation_popup.mp4)

* 使用弹出窗口在文件内导航到样式和模板。

[Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_angular_navigation_popup_same_file.mp4)

* 点击 ![Goto Related](https://resources.jetbrains.com/help/img/idea/2026.3/ws_angular_navigation_popup_gotorelated.png) 可打开包含相关文件列表的弹出窗口。

## 使用 Angular Material Design 组件

IntelliJ IDEA 能识别 [Angular Material](https://material.angular.io/) 组件和属性，并提供编码帮助：

* 组件的代码补全 ![Angular 组件的建议完成变量列表](https://resources.jetbrains.com/help/img/idea/2026.3/ws_angular_material_component.png)

* 属性的自动完成 ![Angular 属性的建议完成变体列表](https://resources.jetbrains.com/help/img/idea/2026.3/ws_material_attribute.png)

* 在组件或属性与其声明之间导航（按 `Ctrl+B` (Windows), `⌘ B` (macOS), `⌘ B` (IntelliJ IDEA Classic (macOS)), `⌘ B` (macOS System Shortcuts), `Ctrl+B` (XWin), `Ctrl+B` (GNOME), `Ctrl+B` (KDE), `Ctrl+Alt+G` (Emacs), `F12` (Sublime Text), `F12` (Sublime Text (macOS)), `F12` (Visual Studio), `F12` (Visual Studio (macOS)), `Ctrl+B` (NetBeans), `F3` (Eclipse), `F3` (Eclipse (macOS)) 或从上下文菜单中选择 `转到 | 声明` ）。

Procedure: 安装 Angular Material

* 打开命令行 shell 或嵌入式   终端  （ `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))），然后输入  `ng add @angular/material` 。

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

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

![安装 Angular Material](https://resources.jetbrains.com/help/img/idea/2026.3/ws_angular_install_ang_material.png)

请从 [Angular Material 官方网站上的入门指南](https://material.angular.io/guide/getting-started)中了解更多信息。

## 配置语法高亮

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

![在各种上下文中高亮符号](https://resources.jetbrains.com/help/img/idea/2026.3/ws_angular_syntax_highlighting.png)

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

Procedure:

1. 在   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到  `编辑器 | 配色方案 | Angular 模板` 。

2. 选择配色方案，接受从默认设置继承的高亮设置，或按照 [颜色与字体](configuring-colors-and-fonts.html) 中的说明进行自定义。

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

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

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

Procedure:

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. 当多个模式匹配相同文件名时，将使用以下规则进行消歧：

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

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

* 选择最先定义的模式。

### 示例

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

![具有不同框架的项目](https://resources.jetbrains.com/help/img/idea/2026.3/several_frameworks_context_project_structure.png)

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

```JSON
{
  "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"
  }
}
        
```

## See also

### 过程

[AngularJS](angularjs.html) [实时模板](using-live-templates.html) [样式表](style-sheets.html) [运行和调试 TypeScript](running-and-debugging-typescript.html)

### Web 资源

[Angular Workflow in IntelliJ IDEA](https://blog.jetbrains.com/webstorm/2016/04/angular-2-workflow-in-webstorm/) [Debugging Angular](https://blog.jetbrains.com/webstorm/2017/01/debugging-angular-apps/)

### 外部链接

[Angular CLI Reference](https://cli.angular.io/reference.pdf)