PyCharm 2025.3 Help

Angular

Angular 是一款用于构建跨平台应用的流行框架。 PyCharm 提供对 Angular 的支持，并在开发过程的每个步骤为您提供帮助——从创建新的 Angular 应用并开发组件，到对其进行调试和测试。

开始之前

  1. 请确保您的计算机上已安装 Node.js。

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

创建新的 Angular 应用程序

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

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

创建新的 Angular 应用

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

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

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

  4. 在 Node 运行时 字段中，指定要使用的 Node.js 运行时。 从列表中选择已配置的运行时，或选择 添加 来配置新的运行时。

  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 选项。 此字段支持代码补全：当您开始键入选项名称或按下 Ctrl+Space 时，PyCharm 会显示可用选项及其描述。

    • 如果您使用的是 Angular 版本 16 或更高版本，您还可以选择 使用独立组件创建新项目 复选框。 您可以在 Angular 官方网站 了解详情。

  7. 点击 创建 后，PyCharm 会生成一个特定于 Angular 的项目，其中包含所有必需的配置文件，并下载所有必要的依赖项。

创建一个空的 PyCharm 项目

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

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

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

  4. 点击 创建 后，PyCharm 会创建并打开一个 空项目。

在空项目中安装 Angular

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

  2. 在嵌入式 终端 （Alt+F12 ）中，输入：

    npm install @angular/core

    这将安装核心 Angular 包，其中包含该框架的关键运行时部分。

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

从现有的 Angular 应用程序开始

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

打开您计算机上已有的应用源代码

  • 在 欢迎 屏幕左侧窗格中点击 打开 ，或在主菜单中选择 文件 | 打开。 在打开的对话框中，选择您的源代码所在的文件夹。

从您的版本控制系统检出应用源代码

  1. 在 欢迎 屏幕左侧窗格中点击 克隆。

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

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

  2. 在打开的对话框中，从列表中选择您的版本控制系统，并指定要检出应用源代码的存储库。 更多信息，请参阅 检出项目（克隆）。

下载依赖项

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

    打开应用并下载依赖项

    您可以使用 npm、 Yarn 1 或 Yarn 2 ，有关详细信息，请参阅 npm 和 Yarn。

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

项目安全性

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

不受信任的项目警告

选择以下选项之一：

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

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

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

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

了解详情，请参阅 项目安全性。

编写并编辑代码

本章提供特定于 Angular 的提示。 有关通用指南，请参阅 处理源代码 和 TypeScript。

配置 Angular 语言服务

PyCharm 提供全面的 Angular 专用编码辅助，包括代码补全、错误检测和高亮显示、提示以及在 Angular 模板中的导航。 您可以配置为针对 Angular 项目从 Angular 语言服务、 TypeScript 语言服务 获取编码辅助，或仅从内部 PyCharm 解析器和代码检查获取。

默认情况下，Angular 语言服务已启用，并显示在状态栏的 语言服务 小部件中。

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

    Angular 语言服务小部件

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

  2. 指定用于为 .ts 文件提供编码辅助的服务。

    • 默认情况下，会选择 自动 选项，因此 PyCharm 会在任何适当的上下文中自动启用 Angular 语言服务。 因此，类型评估基于 TypeScript 语言服务的数据执行，同时也会应用内部 PyCharm 代码检查。

    • 选择 禁用 选项，以仅基于内部 PyCharm 解析器和代码检查的数据获取编码辅助。

重新启动 Angular 语言服务

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

    Angular 语言服务小部件 - 重新启动服务

配置类型评估

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

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

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

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

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

配置内存处理

尽管 PyCharm 努力提供与语言服务的流畅集成，但仍可能出现由语言服务引发而非由 PyCharm 本身导致的 out-of-memory 错误。

要防止 out-of-memory 错误或无缝解决此类错误，从而确保语言服务稳定运行，您可以配置内存处理。 了解详情，请参阅 语言服务。

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

为 TypeScript 语言服务配置内存处理

  1. 按 Ctrl+Alt+S 打开设置，并转到 设置 | 语言与框架 | 语言服务 | TypeScript。

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

    • 选择 可用时自动增加内存 以静默方式增加内存并重新启动语言服务。

    • 或者，选择 设置内存限制 ，并指定语言服务可使用的最大内存。

      如果指定的内存大小超过可用 RAM，PyCharm 会在工具提示中建议一个合适的值。

组件

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

使用预定义模板创建组件

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

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

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

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

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

  2. PyCharm 会生成一个组件存根，将插入符号置于带有 canvas 的字段中，并等待您在那里指定组件名称。 当您键入组件名称时，选择器名称和模板 URL 会根据 Angular 风格指南 自动填充。

  3. 如有必要，请使用检查弹出窗口将新组件设为 独立。

    将组件设为独立

请参阅 WebStorm 博客中的 使用和创建代码片段 ，了解如何使用变量自定义模板。

创建组件文件夹

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

假设您想要创建一个 example 文件夹，包含一组组件文件，例如，用于逻辑的 example.component.ts 、用于模板的 example.component.html ，以及用于样式的 example.component.css 。 您可以创建一个包含两个父模板的文件模板，以便一次性生成全部三个文件，并将它们放在一个单独的文件夹中。

  1. 在 设置 对话框（Ctrl+Alt+S ），选择 编辑器 | 文件和代码模板。

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

    1. 在 文件 选项卡上，点击工具栏上的 添加 按钮（Create Template 按钮）。

      添加新模板

      一个名为 未命名 的新模板已添加到列表中。

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

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

    4. 可选：添加一个代码模板，例如：

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

    点击 应用。

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

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

      添加子模板图标

      一个子模板会添加在 Angular 组件 模板下方。

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

    创建子模板：component.html

    点击 应用。

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

    1. 选择父模板 Angular 组件 ，并点击工具栏上的 Create Child Template File。 一个子模板会添加在 Angular 组件 模板下方。

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

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

  6. 创建组件文件。

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

    在单独的文件夹中基于多文件模板创建 Angular 组件

从模板中提取组件

Extract Angular component 重构通过运行 ng generate component ，并考虑 angular.json 文件中的原理图首选项来工作。

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

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

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

    提取组件：重构此项

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

独立组件

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

PyCharm 会检测对 non-standalone 管道、指令或组件的不正确导入，以及在非独立组件中使用 imports 属性的情况：

错误用法：在非独立组件中使用 imports 属性导入指令

信号

使用 PyCharm，您可以轻松地创建 Angular 信号 ，直接从 signal、 computed 和 effect 模板。

Angular 信号

创建信号

  1. 编写您需要的函数。 PyCharm 会运行检查，并将新函数高亮显示为未解析。

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

    创建 Angular 信号：检查弹出窗口

    或者，将光标置于高亮显示的函数处，按 Alt+Enter ，然后选择 创建信号 '<function name>'。

    创建 Angular 信号：意图操作

  3. PyCharm 会将您带到组件的 TypeScript 文件，在其中会生成新的信号存根。 根据需要填写占位符。

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

为 Angular 信号配置高亮显示

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

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

    Angular 信号：配置高亮显示

  3. 选择您偏好的颜色，并点击 应用。

结构型指令

PyCharm 能够识别 结构型指令 ，并在模板中提供高亮显示。

对于绑定键和模板上下文属性，会在弹出窗口中提供补全：

结构型指令 - 补全

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

在完成属性补全时或按 Ctrl+P 时，参数信息弹出窗口会自动显示。

结构型指令 - 参数信息弹出窗口

宿主监听器和绑定

PyCharm 提供对 宿主监听器 和 绑定 的全面支持。

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

    支持 @HostListener 和 HostBinding 装饰器

  • 为 @HostListener 提供事件补全

    为 HostListeners 提供事件补全

  • 类型检查块（TCB） 会在宿主绑定中生成。

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

    宿主绑定中的 CSS 类用法

响应式表单

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

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

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

    在响应式表单中提供补全和快速文档

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

    在 FormGroup.get() 中提供补全和快速文档

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

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

增量水合

PyCharm 支持 Angular 19 @defer hydrate syntax。

  • 代码补全

    为 @defer 语法提供代码补全

  • 快速文档查找

    为 @defer 语法提供快速文档

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

    在早于 19 的 Angular 中针对 @defer 语法的错误消息

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

  • 在 Angular HTML 模板中，选择一个代码片段，按 Ctrl+Alt+T ，然后从列表中选择用于包裹的代码。

    包裹 HTML 块

使用 ng add 添加新功能

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

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

  2. 从列表中选择要添加的库。 该列表显示可确定能使用 ng add 安装的库。 要安装不在列表中的包，请滚动到列表末尾并双击 安装上方未列出的包 链接，然后在打开的对话框中指定包名称。

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

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

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

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

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

使用 Angular 原理图 生成代码

PyCharm 既可以使用由诸如 @angular/material 等库定义的原理图，也可以使用 Angular CLI 本身定义的原理图生成代码。

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

  2. 从列表中选择相关的原理图。 开始键入原理图名称，列表会随着您的输入而缩小。

    选择 Angular 原理图

  3. 在打开的对话框中，指定要生成的原理图的名称和其他选项（如有必要）。 PyCharm 会显示原理图的描述，并为可用选项提供代码补全和描述。

    生成 Angular CLI 原理图：提供代码补全和描述

查看参数提示

在 Angular HTML 模板中， Parameter hints 显示方法和函数中的参数名称，使您的代码更易于阅读。 在模板中，块参数信息会在补全时显示。

配置参数提示

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

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

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

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

  4. 对于某些方法和函数，PyCharm 在任何上下文中都不显示参数提示。 点击 排除列表... 查看这些方法和函数，必要时为它们启用参数提示，或向列表添加新条目。

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

在 Angular 模板中配置参数提示

检查您的代码

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

重复的属性

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

Angular 检查：重复的属性

错误使用结构型指令

PyCharm 会警告您 *ngIf 和 *ngFor 结构型指令的错误用法。

Angular 检查：结构型指令的错误用法

独立组件的使用

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

非独立项被直接导入

未使用的导入

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

Angular 检查 - 未使用的导入

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

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

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

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

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

查看并配置 Angular 专用检查

  1. 在 设置 对话框（Ctrl+Alt+S ），转到 编辑器 | 检查。

  2. 展开 Angular 节点。

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

在 Angular 应用程序中导航

当在 Angular 项目上工作时，您必须在不同的组件文件之间跳转，例如 TypeScript、模板和样式文件。 要在代码中导航，您可以使用以下选项：

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

使用 Related Symbol 弹出窗口导航

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

    • 在导航弹出窗口中点击 Goto Related。

    • 按 Ctrl+Alt+Home。

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

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

    • 在 导航弹出窗口 中点击 Goto Related。

      从导航弹出窗口打开 Go To Related Symbol 弹出窗口

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

    使用 Related Symbol 弹出窗口在 Angular 应用中导航

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

    1. 包含组件类的 TypeScript 文件

    2. 模板

    3. 测试

    4. 样式

通过用法导航

  • 将插入符号置于符号的声明处，并按 Ctrl+B。

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

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

  • 将插入符号置于符号的声明处，并按 Ctrl+Alt+F7。

    使用工具栏上的图标来显示或隐藏在导入语句（Show import statements 按钮 ）、字符串字面量（Show Dynamic Usages 按钮 ）以及 HTML 文件（Show Component Usages 图标 ）中的组件引用。

  • 点击 Show usages hint 以跳转到该用法，或从列表中选择相关项。

使用导航弹出窗口

  • 要启用导航弹出窗口，按 Ctrl+Alt+S ，转到 高级设置 ，然后在 Angular 区域中选择 在编辑器中显示导航弹出窗口 复选框。 使用搜索字段可更轻松地定位该复选框。

    禁用 Angular 导航弹出窗口

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

  • 要在组件内的文件之间跳转，点击相应的图标，例如，要跳转到 .component.html 文件，请点击 HTML 文件。

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

  • 点击 Goto Related 以打开包含相关文件列表的弹出窗口。

使用 Angular Material Design 组件

PyCharm 能够识别 Angular Material 组件和属性，并为其提供编码辅助：

  • 组件补全

    Angular 组件的补全建议列表

  • 属性补全

    Angular 属性的补全建议列表

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

安装 Angular Material

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

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

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

    A 安装 Angualar Material

了解更多，请参阅 Angular Material 官方网站上的入门。

配置语法高亮显示

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

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

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

  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年 12月 2日
测试 TypeScript运行和调试 Angular 应用程序