抠丁客 抠丁客
项目
编辑 (2025/12/26)

ABP Angular 快速入门

当前版本ABP使用Angular 20.0.x 版本。您无需全局安装Angular CLI

如何准备开发环境

请按照以下步骤为Angular准备开发环境：

  1. 安装Node.js： 请访问 Node.js下载页面 并下载适用于您操作系统的Node.js v20.19+安装程序。另一种选择是安装NVM并使用它在操作系统中管理多个Node.js版本。
  2. [可选]安装Yarn： 您可以按照安装页面的说明安装Yarn v1.22+（非v2版本）。相比npm v10及以下版本，Yarn v1能提供更好的开发体验。您也可以跳过此步骤，直接使用Node.js内置的npm。
  3. [可选]安装VS Code： VS Code是一款免费开源IDE，与TypeScript无缝协作。虽然您可以使用任何IDE（包括Visual Studio或Rider），但在Angular项目中VS Code很可能提供最佳开发体验。ABP项目模板甚至包含针对VS Code用户的插件推荐，当您打开Angular项目文件夹时，VS Code会提示您安装这些插件。以下是推荐扩展列表：

如何创建新的Angular项目

您有多种方式创建与ABP配合使用的Angular项目：

1. 使用ABP CLI

ABP CLI可能是启动带有Angular前端的ABP解决方案最便捷灵活的方式。只需 安装 ABP CLI 并在终端中运行以下命令：

abp new MyCompanyName.MyProjectName -csf -u angular

要查看CLI的更多选项，请访问 CLI手册。

此命令将准备一个包含Angular和.NET Core项目的解决方案。请访问 入门部分 获取有关如何设置解决方案后端的进一步说明。

如不查看其他方法，请直接跳转至 Angular 项目结构部分。

2. 从入门页面生成CLI命令

您可以在abp.io网站的入门页面生成CLI命令。然后在终端中使用该命令创建新的 启动模板。

Angular项目结构

创建解决方案后，在IDE中打开其"angular"目录。根文件夹内容结构如下：

这些文件夹和文件的用途如下：

  • .vscode 包含扩展推荐配置
  • e2e 用于端到端测试的独立应用
  • src 放置应用程序源文件的主要目录
  • .browserlistrc 用于配置Angular应用的浏览器兼容性
  • .editorconfig 帮助在不同编辑器和IDE间保持统一的编码风格
  • .gitignore 定义git不应跟踪的文件和文件夹
  • .prettierrc 包含Prettier的简单编码风格选择
  • angular.json 定义Angular工作区配置
  • karma.conf.js 包含Karma测试运行器配置
  • package.json 列出包依赖关系和有用的开发脚本
  • README.md 包含Angular CLI命令示例
  • start.ps1 简单的PowerShell脚本，用于安装依赖并启动开发服务器
  • tsconfig.json 包含TypeScript和Angular编译选项
  • yarn.lock 确保在不同设备上安装一致的包版本

现在让我们查看源文件夹的内容：

  • app 放置应用程序文件的主目录
  • home 预定义的欢迎页面组件
  • app.routes.ts 顶级路由定义文件
  • app.component.ts 顶层组件，持有动态应用布局
  • app.config.ts 根配置文件
  • route.provider.ts 用于修改菜单
  • assets 存放静态文件
  • environments 包含环境配置文件
  • index.html 提供给访问者的HTML页面
  • main.ts 引导和配置Angular应用在浏览器中运行
  • polyfill.ts 添加polyfill以支持旧版浏览器
  • style.scss 应用样式的默认入口点
  • test.ts 帮助单元测试运行器发现和引导测试文件

接下来我们将查看用于准备、构建和运行应用程序的命令。

如何运行Angular应用

了解文件和文件夹后，我们可以启动并运行应用程序：

  1. 确保数据库迁移已完成 且 API正在运行
  2. 运行 yarn 或 npm install 安装依赖
  3. 运行 yarn start 或 npm start 启动 实时开发服务器
  4. 访问编译后打开的浏览器页面 1

Angular实时开发服务器

Angular的开发服务器基于Webpack DevServer。它跟踪源文件的更改，并在每次增量重新编译后同步浏览器窗口。

1 如果运行Angular应用时看到上述错误，您的浏览器可能因自签名证书而阻止访问API。请访问该地址并允许访问（仅需一次）。当您看到Swagger界面时，即可继续操作。 ↩

如何构建Angular应用

Angular应用可以有多个构建目标，即angular.json中的配置。通常每个构建配置都有单独的环境变量文件。当前项目有两个：一个用于开发，一个用于生产。

执行生产构建：

  1. 打开终端并导航到Angular根文件夹
  2. 运行yarn或npm install安装依赖
  3. 运行yarn build:prod或npm run build:prod

编译完成后，编译输出将放置在_/dist_文件夹中。

如何部署Angular应用

Angular Web应用在浏览器中运行，除了静态Web服务器外不需要其他服务器。部署步骤：

  1. 创建新的静态Web服务器实例
  2. 将dist/MyProjectName1中的文件复制到服务器的公共目录
  3. 配置服务器将所有请求重定向到_index.html_文件

您还可以使用Angular CLI将应用部署到特定目标。

1 编译输出将放置在/dist目录下以项目名称命名的文件夹中。 ↩

在本文档中