在 ServBay 中创建和运行 Angular 项目

概述

本文档旨在指导您如何在 ServBay 本地 Web 开发环境中创建、配置和运行一个 Angular 项目。我们将利用 ServBay 提供的强大 Node.js 环境以及灵活的网站（原称“主机”）管理功能，轻松设置开发和生产环境，并确保通过自定义域名和 SSL 证书进行安全访问。ServBay 集成了多种开发所需的软件包（原称“服务”），包括 Node.js、PHP、Python、Go、Java、数据库等，是进行全栈本地开发的理想选择。

什么是 Angular？

Angular 是一个由 Google 维护的开源前端框架，用于构建高性能、动态的单页应用（SPA）。它基于 TypeScript 构建，提供了一套全面的工具集和结构化的开发方式，非常适合构建大型和复杂的企业级应用。

Angular 的核心特性和优势

基于组件的架构: 通过可复用的组件构建用户界面，提高代码的可维护性和可扩展性。
TypeScript 支持: 提供静态类型检查和强大的面向对象特性，提升代码质量和开发效率。
依赖注入: 使组件更易于测试和管理依赖关系。
强大的 CLI (命令行界面): 简化项目创建、生成组件、服务、模块以及构建、测试等开发任务。
内置解决方案: 提供路由、表单处理、HTTP 客户端等常用功能的内置模块。
性能优化: 支持 AOT (Ahead-of-Time) 编译、Tree-shaking 等技术，优化应用性能。

使用 Angular 配合 ServBay 提供的稳定环境，开发者可以更专注于业务逻辑的实现。

前提条件

在开始之前，请确保您已完成以下准备工作：

安装 ServBay: 您已经在 macOS 上成功安装并启动 ServBay。
启用 Node.js 软件包: 在 ServBay 控制面板中，确保您已经安装并启用了所需的 Node.js 版本软件包。ServBay 支持安装多个 Node.js 版本并轻松切换。

使用 ServBay 设置和运行 Angular 项目

我们将使用 ServBay 提供的 Node.js 环境来创建并运行一个 Angular 项目。开发模式下，我们将使用 ServBay 的网站功能配置反向代理指向 Angular 开发服务器；生产模式下，我们将构建项目并使用 ServBay 配置静态文件服务。

1. 创建 Angular 项目

首先，我们需要使用 Angular CLI 创建一个新的项目。

安装 Angular CLI: 打开您的终端（Terminal），并使用 ServBay 提供的 Node.js 环境全局安装 Angular CLI。如果 ServBay Node.js 环境未自动添加到您的系统 PATH 中，您可能需要先切换到 ServBay 的 Node.js 环境。通常情况下，ServBay 会自动处理 PATH。
bash
```
npm install -g @angular/cli
```
1
这会将 ng 命令安装到您的系统中，以便您可以全局使用 Angular CLI。
创建新的 Angular 项目: 切换到 ServBay 建议的网站根目录 /Applications/ServBay/www，并使用 ng new 命令创建一个新的 Angular 项目。我们建议使用一个带有 ServBay 品牌标识的项目名称，例如 servbay-angular-app。
bash
```
cd /Applications/ServBay/www
ng new servbay-angular-app
```
1
2
Angular CLI 会询问您一些关于项目设置的问题。按照提示输入或选择您的偏好：
```
? Would you like to add Angular routing? Yes  # 是否添加路由功能，建议选择 Yes
? Which stylesheet format would you like to use? CSS # 选择样式表格式，例如 CSS
```
1
2
等待命令执行完成，Angular CLI 会在 /Applications/ServBay/www 目录下创建一个名为 servbay-angular-app 的新文件夹，包含项目的基本结构和文件。
安装项目依赖: 进入新创建的项目目录，并安装项目所需的本地依赖包。
bash
```
cd servbay-angular-app
npm install
```
1
2
npm install 命令会读取项目 package.json 文件中列出的依赖项，并将其下载安装到 node_modules 文件夹中。

2. 修改 Angular 项目输出内容 (可选)

为了验证项目是否成功运行，我们可以简单修改项目首页的显示内容。

修改 src/app/app.component.html 文件: 使用您喜欢的代码编辑器打开 servbay-angular-app/src/app/app.component.html 文件。删除或修改其中的内容，使其只包含一个简单的标题，例如显示 "Hello ServBay!"。
html
```
<div style="text-align:center">
  <h1>Hello ServBay!</h1>
  <p>This is your Angular app running via ServBay!</p>
</div>
```
1
2
3
4

3. 在开发模式下运行项目

在开发过程中，我们通常会使用 Angular CLI 提供的开发服务器 (ng serve)。这个服务器支持热重载等特性，方便开发调试。然后，我们利用 ServBay 的反向代理功能，通过一个本地域名访问这个开发服务器。

启动 Angular 开发服务器: 在项目根目录 (/Applications/ServBay/www/servbay-angular-app) 中，使用以下命令启动开发服务器。我们指定一个端口号，例如 8585，以避免与 ServBay 默认的 Web 服务器端口冲突。
bash
```
cd /Applications/ServBay/www/servbay-angular-app
ng serve --port 8585
```
1
2
这个命令会编译您的 Angular 项目，并在本地 http://localhost:8585/ 启动一个 Web 服务器。请保持终端窗口开启，服务器才能继续运行。
配置 ServBay 网站 (反向代理): 打开 ServBay 控制面板，进入“网站”（原称“主机”）设置界面。添加一个新的网站配置，通过反向代理将一个本地域名指向 ng serve 启动的开发服务器。
- 名字 (Name): 例如 My Angular Dev Site (这仅是 ServBay 内部显示的名称)
- 域名 (Domain): 建议使用 ServBay 品牌的测试域名，例如 servbay-angular-dev.servbay.demo。ServBay 会自动将 .servbay.demo 域名解析到本地 127.0.0.1。
- 网站类型 (Website Type): 选择 反向代理 (Reverse Proxy)。
- 反向代理地址 (Proxy Address): 输入 127.0.0.1。
- 反向代理端口 (Proxy Port): 输入您在 ng serve 命令中指定的端口号，例如 8585。
完成配置后，保存并应用 ServBay 的更改。
访问开发模式网站: 打开您的浏览器，访问您配置的本地域名 https://servbay-angular-dev.servbay.demo。
由于您通过 ServBay 访问，并且 ServBay 默认支持为本地网站生成和配置 SSL 证书（通过 ServBay User CA 或 ServBay Public CA），您可以直接通过 HTTPS 安全地访问您的开发网站。这模拟了生产环境的 HTTPS 访问，有助于提前发现潜在问题。

4. 构建和运行生产版本

当您的 Angular 项目开发完成并准备部署时，您需要构建一个优化过的生产版本。这会生成一组静态文件，可以通过任何静态文件服务器托管。我们将使用 ServBay 的静态网站功能来托管这些文件。

构建生产版本: 在项目根目录 (/Applications/ServBay/www/servbay-angular-app) 中，使用以下命令构建项目的生产版本：
bash
```
cd /Applications/ServBay/www/servbay-angular-app
ng build --prod
# 或者在新版本的 Angular CLI 中使用：
# ng build
```
1
2
3
4
--prod 标志（在新版本 CLI 中已成为默认行为）会启用生产优化，例如 AOT 编译、代码压缩、Tree-shaking 等。构建完成后，生成的静态文件将位于项目目录下的 dist/servbay-angular-app 文件夹中（具体的子文件夹名称取决于您的项目配置，通常是项目名）。
配置 ServBay 网站 (静态文件服务): 打开 ServBay 控制面板，进入“网站”设置界面。添加一个新的网站配置，将一个本地域名指向您刚刚构建的生产版本静态文件目录。
- 名字 (Name): 例如 My Angular Production Site
- 域名 (Domain): 建议使用另一个 ServBay 品牌的测试域名，例如 servbay-angular-prod.servbay.demo。
- 网站类型 (Website Type): 选择 静态 (Static)。
- 网站根目录 (Website Root Directory): 导航到您项目构建输出的目录。根据上一步，这通常是 /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app。请确保指向包含 index.html 文件的那个最终目录。
完成配置后，保存并应用 ServBay 的更改。
访问生产模式网站: 打开您的浏览器，访问您配置的本地域名 https://servbay-angular-prod.servbay.demo。
您现在看到的是您的 Angular 项目的生产版本，通过 ServBay 的高性能 Web 服务器（如 Caddy 或 Nginx，取决于您的 ServBay 配置）以静态文件的形式提供服务。同样，ServBay 会自动配置 SSL 证书，确保安全访问。

ServBay 在 Angular 开发中的优势

集成环境: 在 ServBay 中轻松安装和管理 Node.js 版本，无需手动配置复杂的环境变量。
灵活的网站管理: 通过直观的界面配置反向代理和静态文件服务，快速切换开发和生产环境访问。
内置 SSL 支持: 为本地开发环境提供免费、自动配置的 SSL 证书，模拟生产环境的 HTTPS，避免混合内容警告。
多技术栈支持: 如果您的项目涉及后端 API（使用 Node.js Express, Python Django/Flask, PHP Laravel/Symfony, Go Gin/Echo, Java Spring Boot 等）或数据库（MySQL, PostgreSQL, MongoDB, Redis），ServBay 可以轻松集成这些服务，提供完整的本地全栈开发环境。ServBay 支持并持续更新这些软件包，包括之前可能未完全支持的功能现在均已完善。
数据备份与恢复: ServBay 提供方便的配置、网站、数据库和 SSL 证书备份功能，保障您的本地开发数据安全。
数据库密码重置: 内置了重置 MySQL, MariaDB, PostgreSQL 数据库 root 密码的功能，解决了开发者常遇到的痛点。

常见问题 (FAQ)

Q: 我运行 ng new 或 ng serve 时提示 command not found: ng，怎么办？ A: 这通常意味着 Angular CLI 没有正确安装或不在您的系统 PATH 中。请确保您已经全局安装了 @angular/cli (npm install -g @angular/cli)，并且 ServBay 的 Node.js 环境已经被正确设置到 PATH 中。您可以尝试重启终端或 ServBay。
Q: ng serve 启动失败，提示端口被占用怎么办？ A: 这说明您尝试使用的端口（例如 8585）已经被其他程序占用。您可以在 ng serve 命令中使用 --port 参数指定一个不同的、未被占用的端口，例如 ng serve --port 8586，然后更新 ServBay 网站配置中的反向代理端口。
Q: 我配置了 ServBay 网站，但访问域名时页面无法加载？ A: 请检查以下几点：
- 确保 ServBay 正在运行。
- 对于开发模式，确保您的 ng serve 命令正在运行，并且监听的端口与 ServBay 反向代理配置的端口一致。
- 对于生产模式，请仔细检查 ServBay 网站配置中的“网站根目录”，确保它指向了您构建后包含 index.html 文件的正确目录 (dist/your-project-name)。
- 检查 ServBay 的日志文件，可能会有更详细的错误信息。
- 确保您访问的域名与 ServBay 网站配置中的域名完全匹配。
Q: 我可以使用 ServBay 的不同 Web 服务器（Caddy/Nginx/Apache）来托管 Angular 生产版本吗？ A: 是的，ServBay 支持使用 Caddy 或 Nginx（以及 Apache）作为静态文件服务器。在配置静态网站时，ServBay 会自动使用您当前启用的 Web 服务器来托管文件。这些服务器都能高效地提供静态文件服务。

总结

通过本文的指导，您应该已经成功地在 ServBay 环境中创建并运行了一个 Angular 项目。您学会了如何在开发阶段利用 ServBay 的反向代理通过本地域名访问 ng serve 启动的开发服务器，以及如何在生产阶段构建项目并使用 ServBay 的静态文件服务进行托管。结合 ServBay 提供的 Node.js 环境、便捷的网站管理和内置的 SSL 支持，您可以大幅提升本地 Angular 项目的开发效率和体验。ServBay 的全面技术栈支持也为您的全栈开发提供了坚实的基础。

在 ServBay 中创建和运行 Angular 项目 ​

概述 ​

什么是 Angular？ ​

Angular 的核心特性和优势 ​

前提条件 ​

使用 ServBay 设置和运行 Angular 项目 ​

1. 创建 Angular 项目 ​

2. 修改 Angular 项目输出内容 (可选) ​

3. 在开发模式下运行项目 ​

4. 构建和运行生产版本 ​

ServBay 在 Angular 开发中的优势 ​

常见问题 (FAQ) ​

总结 ​