Angular
Angular 是一个流行的跨平台应用构建框架。 GoLand 提供对 Angular 的支持，助您完成开发流程的每一步——从创建新 Angular 应用与组件开发，到调试和测试。
开始之前
下载并安装 Node.js。
请确保设置中启用了 JavaScript 和 TypeScript 插件。 按下 Ctrl+Alt+S 打开设置，然后选择 。 点击 已安装 选项卡。 在搜索字段中输入 JavaScript 和 TypeScript。 如需了解更多插件信息，请参阅 插件管理。
按照 从 JetBrains Marketplace 安装插件 中的说明，在 设置 | 插件 页签的 Marketplace 选项卡中安装并启用 Angular 和 AngularJS 插件。
创建新的 Angular 应用程序
推荐的方式是使用 Angular CLI 构建新的 Angular 应用，GoLand 将通过 npx 为您下载并运行。 最终，您的应用将使用已配置好的 TypeScript 与 Webpack 启动。
当然，您也可以自行下载 Angular CLI，或创建一个空的 GoLand 项目并安装 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 选项。 该字段支持代码补全：当您开始输入某个选项的名称或按下 Ctrl+Space 时，GoLand 将显示可用选项及说明。
如果您使用的是 Angular 版本 16 或更高版本，您还可以勾选 使用独立组件创建新项目 复选框。 详情请参见 Angular 官方网站。
点击 创建 后，GoLand 将生成一个包含所有必需配置文件的 Angular 项目，并下载所需依赖项。
在空项目中安装 Angular
打开您将使用 Angular 的空项目。
在嵌入式 终端 （Alt+F12 ）中输入：
npm install @angular/core这将安装核心 Angular 包，其中包含框架的重要运行时部分。
您可能还需要安装其他属于 Angular 的包，请参阅 包列表。
从现有 Angular 应用程序开始
若要继续开发现有的 Angular 应用，请在 GoLand 中打开它并下载所需依赖项。
打开已在本机上的应用源代码
在 欢迎 屏幕上点击 打开 ，或从主菜单中选择 。 在打开的对话框中，选择存储源代码的文件夹。
从版本控制中检出应用源代码
在 欢迎 屏幕上点击 克隆。
或者，从主菜单中选择 或 。
在主菜单中， Git 可能会被与项目相关联的其他版本控制系统替代。 例如， Mercurial 或 Perforce。
下载依赖项
在弹出窗口中点击 运行 'npm install' 或 运行 'yarn install'：
您可以使用 npm、 Yarn 1 或 Yarn 2 ，请参阅 npm 和 Yarn 了解详细信息。
或者，在编辑器中或 项目 工具窗口 Alt+1 中的 package.json 右键菜单中选择 运行 'npm install' 或 运行 'yarn install'。
项目安全性
当您打开一个在 GoLand 之外创建并导入到此处的项目时，GoLand 会显示一个对话框，您可以在其中决定如何处理该包含未知源代码的项目。
请选择以下选项之一：
安全模式下预览 ：在此情况下，GoLand 以预览模式打开项目。 这意味着您可以浏览项目的源代码，但无法运行任务和脚本或运行／调试项目。
GoLand 会在编辑器区域顶部显示通知，您可以随时点击 信任项目… 链接以加载项目。
信任项目 ：在此情况下，GoLand 会打开并加载项目。 这意味着项目已经初始化，插件已解析，依赖项已添加，所有 GoLand 功能均可用。
不打开 ：在此情况下，GoLand 不会打开项目。
详细信息请参阅 项目安全。
编写和编辑代码
本章节提供特定于 Angular 的提示。 一般指南请参阅 编写和编辑源代码 和 TypeScript。
配置 Angular 语言服务
GoLand 提供完整的 Angular 专属编码支持，包括代码补全、错误检测和高亮、提示以及 Angular 模板中的导航功能。 您可以配置从 Angular language service、 TypeScript Language Service 或仅使用 GoLand 内部解析器和代码检查功能为 Angular 项目提供编码支持。
默认情况下，已启用 Angular language service，并在状态栏的 语言服务 工具中列出。
要打开 Angular 设置，请点击状态栏中的
，然后点击 
。
或者，按 Ctrl+Alt+S 打开设置并选择 设置 | 语言与框架 | TypeScript | Angular。
指定用于为 .ts 文件提供编码支持的服务。
默认选中 自动 选项，因此 GoLand 会在任何合适的上下文中自动启用 Angular language service。 因此，类型评估会基于 TypeScript language service 的数据进行，同时 GoLand 的内部检查功能也会生效。
选择 已禁用 选项，仅基于 GoLand 内部解析器和检查功能的数据提供编码支持。
重新启动 Angular 语言服务
点击状态栏中的
，然后点击 
，位于 Angular TypeScript <版本> 旁边。
配置类型评估
点击状态栏中的
，勾选您希望用来进行类型评估的服务旁的复选框。 准备就绪后，重启 GoLand。
或者，按 Ctrl+Alt+S 打开设置，选择 设置 | 语言与框架 | TypeScript | Angular ，然后选择 自动 ，再勾选 启用基于服务的类型引擎 复选框。
默认情况下该复选框处于未选中状态，因此类型评估、解析、代码检查和重构都基于 GoLand 内部 TypeScript 引擎提供的类型信息。
此默认行为可能导致性能问题以及类型解析中的错误，因为 GoLand 内部 TypeScript 引擎所使用的类型评估算法与 Angular language service 的算法不同。 选中该复选框可能有助于避免这些问题。
组件
使用 GoLand，您可以通过多种方式创建 Angular 组件：
使用预定义模板创建组件
GoLand 提供用于创建 Angular 组件的预定义 live template ，例如 a-component、 a-component-inline 和 a-component-root。
如需了解有关 live template 的更多信息，请参阅 live template。
要查看所有预定义模板的完整列表，请打开 设置 对话框（Ctrl+Alt+S ），转到 ，然后展开 Angular 节点。
在编辑器中，按 Ctrl+J ，从列表中选择合适的模板（例如
a-component），然后按 Enter。GoLand 会生成一个组件框架，将光标置于包含 canvas 的字段，并等待您输入组件名称。 当您键入组件名称时，选择器名称和模板 URL 会根据 Angular 样式指南 自动填写。
如有需要，可以使用检查弹窗将新组件设为 standalone。
在 WebStorm 博客的 使用与创建代码片段一文中，了解如何使用变量自定义模板。
创建组件文件夹
在 GoLand 中，您可以通过一个操作为一个 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。
GoLand 可检测 non-standalone 管道、指令或组件的不正确导入，以及在非独立组件中使用 imports 属性的情况：
Signals
使用 GoLand，您可以直接从 signal、 computed 和 effect 模板中轻松创建 Angular 信号。
创建 signal
编写所需的函数。 GoLand 会运行一次检查，并将新函数突出显示为未解析。
将鼠标悬停在高亮显示的函数上，然后点击弹出窗口中的 创建信号 '<function name>' 链接。
或者，将光标置于高亮显示的函数上，按 Alt+Enter ，并选择 。
GoLand 会将您带到组件的 TypeScript 文件中，在那里会生成新信号的代码框架。 根据需要填写占位内容。
GoLand 可识别、突出显示、提供文档和补全功能，并支持 contentChild、 contentChilden、 viewChild 和 viewChildren 信号查询的导航。
配置 Angular signal 的高亮显示
按 Ctrl+Alt+S 打开设置并选择 编辑器 | 颜色方案 | Angular 模板。
在列表中选择 Signal ，然后点击 前景 旁边的颜色指示条。
选择您偏好的颜色，然后点击 应用。
结构型指令
GoLand 可识别 结构型指令 ，并在模板中提供高亮显示。
对于绑定键和模板上下文属性，会在弹出窗口中提供补全建议：
对映射到指令输入的模板绑定键，提供 重命名重构。
参数信息弹窗会在补全属性时自动显示，或者在按下 Ctrl+P 时显示。
宿主监听器与绑定
针对
@HostListener和@HostBinding装饰器提供补全、高亮显示、快速文档。
@HostListener的事件补全
类型检查块（TCB）会为宿主绑定生成。
支持在宿主绑定与 HTML 模板中使用 CSS 类
响应式表单
GoLand 提供对 Angular Reactive Forms 的支持。
通过使用
new FormGroup({.. .})和FormBuilder.group({...})调用，以及在构造函数中使用FormBuilder.group({...})调用对字段进行初始化，可构建嵌套的表单组模型结构。GoLand 能识别表单组对象初始化器中的
control、group和array，新建实例调用（FormGroup、FormControl和FormArray），以及FormBuilder方法。
对于
FormGroup.get()调用，GoLand 提供代码补全、名称验证、未知部分的快速修复以及字符串字面量中的语法高亮。
在 HTML 模板中的
formControlName、formGroupName和formArrayName，提供代码补全、名称验证、创建缺失控件的快速修复、语法高亮以及结构依赖分析。
增量水合
GoLand 支持 Angular 19 @defer hydrate 语法。
代码补全
快速文档查阅
对 Angular 19 之前版本的错误报告。
将 HTML 模板包装为控制流块
在 Angular HTML 模板中，选择代码片段，按下 Ctrl+Alt+T ，然后从列表中选择要包裹的代码。
通过 ng add 添加新功能
您可以使用 Angular 依赖项 操作添加大多数 已发布的 Angular 库。 该操作将运行 ng add 命令 ，它会安装依赖项并更新当前工作目录下的应用程序以使用该依赖项。 请注意，并非所有库都支持通过 ng add 安装。
从主菜单选择 ，或在 项目 工具窗口中按 Alt+Insert （Alt+1 ），然后选择 Angular 依赖项。
从列表中选择要添加的库。 该列表显示了明确可使用
ng add安装的库。 若要安装不在列表中的包，请滚动到列表底部并双击 安装上述未列出的软件包 链接，然后在打开的对话框中指定包名称。按照向导的步骤操作。
下例展示了将 Angular Material 添加到项目的方式。
如果您通过 package.json 手动管理依赖项，GoLand 仍然能识别支持 ng add 的包。 当您将此类包添加到 package.json 时，GoLand 会建议使用 ng add 进行安装。
使用 Angular Schematics 生成代码
GoLand 可使用由诸如 @angular/material 所定义的库或 Angular CLI 自身定义的 schematic 生成代码。
从主菜单选择 ，或在 项目 工具窗口中按下 Alt+Insert ，然后选择 Angular Schematic。
从列表中选择相关 schematic。 开始键入 schematic 的名称，列表会随输入自动缩小。
在打开的对话框中，指定要生成的 schematic 名称及其他选项（如有需要）。 GoLand 会显示 schematic 的描述，并为可选项提供代码补全及说明。
查看参数提示
在 Angular HTML 模板中， 参数提示 会显示方法和函数中参数的名称，从而提升代码的可读性。 在模板中，会在补全时显示块参数的信息。
配置参数提示
打开 设置 对话框（Ctrl+Alt+S ），然后进入 。
在 参数名称 下展开 Angular HTML 模板。
通过选择相应的复选框来指定希望显示参数提示的上下文。
预览会显示您在设置中所做的更改如何影响代码外观。
对于某些方法和函数，GoLand 不会在任何上下文中显示参数提示。 点击 排除列表... 可查看这些方法和函数，并可启用参数提示或将新项添加至列表中。
检查代码
GoLand 提供多项 Angular 特定的检查功能，协助您在编辑代码时发现错误并建议快速修复方案。
重复属性
在以下示例中，同时使用了 template 和 templateUrl 属性。 GoLand 会检测错误，提供警告提示，并建议快速修复。
结构型指令使用不当
GoLand 会提示您 *ngIf 和 *ngFor 结构型指令的不正确用法。
使用独立组件
Angular 特定的检查功能可以帮助您识别对 独立组件 的错误使用。 在以下示例中，GoLand 检测到导入了一个非独立组件并建议快速修复该问题。
未使用的导入
在 standalone 组件中，GoLand 会检测未使用组件、pipe 和指令的导入语句并建议移除。
在重新格式化文件时（Ctrl+Alt+Shift+L ），也可自动移除未使用的导入语句。
快速修复和上下文感知操作
您可能会发现，通过快速修复在 Angular 组件模板中创建 @Input 和 @Output 属性非常便利，即使不带 transform 属性也可使用。 请注意，所需的导入语句也会自动生成。
GoLand 还提供具备上下文感知的 创建字段 和 创建方法 操作，帮助您生成正确声明的字段。
查看并配置特定于 Angular 的检查
在 设置 对话框中（Ctrl+Alt+S ），前往 。
展开 Angular 节点。
配置检查配置文件和严重性，禁用和屏蔽预定义检查，并参照 代码检查 中所述创建自定义检查。
在 Angular 应用中导航
此外，您可以下载 Angular CLI QuickSwitch 插件并 在您的计算机上安装。
使用关联符号弹窗导航
要使用 相关符号 弹出窗口列出相关文件，请执行以下操作之一：
按 Ctrl+Alt+Home。
从主菜单中选择 。
右键点击编辑器中的任何区域，然后选择 。
在 TypeScript 组件文件中，该弹出窗口还会列出导入到该文件的所有符号。
要打开文件，请选择该文件然后按 Enter。 或者，使用与每种文件类型关联的数字：
包含组件类的 TypeScript 文件
模板
测试
样式
使用查找用法功能导航
将插入符号放置在符号的声明处，然后按 Ctrl+B。
如果该符号仅使用了一次，GoLand 会跳转到该用法并将其高亮显示。
如果找到了多个用法，GoLand 会在弹出窗口中显示它们。 选择要导航到的用法并按 Enter ，或在列表中直接点击它。
将插入符号放置在符号的声明处，然后按 Ctrl+Alt+F7。
使用工具栏上的图标显示或隐藏在导入语句（
）、字符串字面量（
）和 HTML 文件（
）中对组件的引用。点击 显示用法提示以跳转到相应用法或从列表中选择相关项。
使用 Angular Material Design 组件
GoLand 能识别 Angular Material 组件与属性，并为其提供代码辅助：
组件的代码补全
属性的代码补全
在组件或属性与其声明之间导航（按 Ctrl+B 或从上下文菜单中选择 ）。
安装 Angular Material
打开嵌入式 终端 （Alt+F12 ），然后输入
ng add @angular/material。在 package.json 文件的
依赖项下添加"@angular/material": "^16.2.11"，然后运行npm install。在主菜单中，进入 ，然后从列表中选择
@angular/material并按照向导步骤操作。
请参阅 Angular Material 官网的入门指南以了解更多信息。
配置语法高亮
在 Angular 项目中，GoLand 能识别并高亮各种符号，如 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 中：