云信AI部署

Intel Mac平台搭建Angular开发环境的完整教程

云信安装大师
90
AI 质量分
10 5 月, 2025
4 分钟阅读
0 阅读

Intel Mac平台搭建Angular开发环境的完整教程

引言

Angular是一个由Google维护的流行前端框架，用于构建高效、复杂的单页应用程序(SPA)。本教程将指导您在Intel Mac电脑上从零开始搭建完整的Angular开发环境。无论您是刚接触前端开发还是从其他框架转来，这篇教程都会帮助您快速上手。

准备工作

在开始之前，请确保您的Intel Mac满足以下要求：

  • macOS 10.15 (Catalina) 或更高版本
  • 至少8GB RAM（推荐16GB）
  • 至少10GB可用磁盘空间
  • 管理员权限（用于安装软件）

第一步：安装Homebrew（Mac包管理器）

Homebrew是Mac上的包管理器，可以简化后续软件的安装过程。

  1. 打开终端（Terminal）应用
  2. 粘贴以下命令并回车：
代码片段 
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  1. 按照提示完成安装
  2. 安装完成后，将Homebrew添加到PATH环境变量：
代码片段 
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zshrc
source ~/.zshrc

注意事项：
– 如果遇到权限问题，请在命令前加上sudo
– Homebrew安装可能需要较长时间，请耐心等待

第二步：安装Node.js和npm

Angular需要Node.js运行时环境。我们将通过Homebrew安装最新的LTS版本。

  1. 在终端中运行以下命令：
代码片段 
brew install node@16
  1. 验证安装是否成功：
代码片段 
node -v
npm -v

应该会显示类似这样的版本号：

代码片段 
v16.15.0
8.5.5
  1. （可选）如果您需要管理多个Node.js版本，可以安装nvm：
代码片段 
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

原理说明：
– Node.js是JavaScript运行时环境，允许在服务器端运行JavaScript代码
– npm是Node.js的包管理器，用于安装和管理JavaScript库

第三步：安装Angular CLI

Angular CLI是官方提供的命令行工具，可以简化Angular项目的创建和开发。

  1. 使用npm全局安装Angular CLI：
代码片段 
npm install -g @angular/cli@latest
  1. 验证安装是否成功：
代码片段 
ng version

应该会显示类似这样的信息：

代码片段 
Angular CLI: 14.0.0
Node: 16.15.0
Package Manager: npm 8.5.5

...其他信息...

实践经验：
– sudo通常不需要，除非您遇到权限问题。如果必须使用sudo，建议先解决权限问题。
– @latest标签确保我们总是获取最新稳定版本

第四步：创建第一个Angular项目

现在我们可以创建并运行第一个Angular应用了。

  1. 创建一个新项目：
代码片段 
ng new my-first-app

CLI会询问一些配置选项：

代码片段 
? Would you like to add Angular routing? (y/N) y  
? Which stylesheet format would you like to use? CSS
  1. 进入项目目录并启动开发服务器：
代码片段 
cd my-first-app  
ng serve --open
  1. Angular应用将在默认浏览器中自动打开，地址为http://localhost:4200

注意事项：
– ng new命令可能需要几分钟时间完成所有依赖项的下载和配置
– --open参数会自动打开浏览器窗口。如果不希望自动打开，可以省略此参数

第五步：理解项目结构

让我们看一下典型的Angular项目结构：

代码片段 
my-first-app/
├── node_modules/      # 所有第三方依赖项  
├── src/               # 应用源代码  
│   ├── app/           # Angular组件、服务等  
│   │   ├── app.component.css  
│   │   ├── app.component.html  
│   │   ├── app.component.spec.ts  
│   │   ├── app.component.ts  
│   │   └── app.module.ts  
│   ├── assets/        # 静态资源（图片等）  
│   ├── environments/  # 环境配置文件  
│   ├── favicon.ico    # 网站图标  
│   ├── index.html     # 主HTML文件  
│   ├── main.ts        # Angular应用的入口点  
│   └── styles.css     # 全局样式文件  
├── angular.json       # Angular CLI配置文件  
├── package.json       # npm依赖项配置  
└── tsconfig.json      # TypeScript配置

原理说明：
– Angular使用模块化架构设计，每个功能通常有自己的模块和组件
– TypeScript是Angular的默认语言（JavaScript的超集）
– Angular CLI负责项目的构建、测试和打包过程

（可选）第六步：安装常用扩展工具

为了提高开发效率，建议安装以下VS Code扩展：

  1. Angular Language Service – Angular官方提供的智能提示支持
  2. Prettier – JavaScript代码格式化工具
  3. ESLint – JavaScript代码质量检查工具
  4. Debugger for Chrome – Chrome调试支持

可以通过VS Code的扩展市场搜索并安装这些扩展。

（可选）第七步：配置Git版本控制

如果您想使用Git进行版本控制：

  1. 初始化Git仓库：
代码片段 
git init
  1. （推荐）添加.gitignore文件排除不需要跟踪的文件：
代码片段 
# .gitignore内容示例  

# Node.js 
node_modules/
dist/

# IDE 
.vscode/
*.swp 

# macOS 
.DS_Store
  1. （可选）连接到远程仓库（如GitHub）：
代码片段 
git remote add origin <你的仓库URL> 
git push -u origin main

（可选）第八步：生产环境构建

当您准备部署应用时，需要创建生产环境的优化版本：

代码片段 
ng build --prod

构建完成后会在dist/my-first-app目录下生成所有静态文件。

实践经验：
– --prod标志会启用AOT编译、代码压缩等优化措施
– production构建的文件体积通常比开发环境小很多

（可选）第九步：更新Angular CLI和核心库

要更新到最新版本的Angular CLI和相关库：

  1. 更新全局CLI:
代码片段 
npm uninstall -g @angular/cli 
npm install -g @angular/cli@latest
  1. (在项目目录中)更新本地CLI:
代码片段 
ng update @angular/cli @angular/core --force

注意事项：
– --force参数在某些情况下可能需要使用（如存在冲突时）
– Angular团队每6个月发布一个主要版本

（可选）第十步：常见问题解决

Q1: ng命令找不到？

如果终端提示”command not found: ng”，可能是因为npm全局路径没有正确设置。解决方法:

代码片段 
echo 'export PATH="$PATH:/usr/local/share/npm/bin"' >> ~/.zshrc   
source ~/.zshrc

Q2: Node.js版本冲突？

如果您安装了多个Node.js版本导致问题,可以使用nvm切换:

代码片段 
nvm use <version>   
# or   
nvm alias default <version>

Q3: npm install太慢？

可以尝试切换到淘宝镜像源:

代码片段 
npm config set registry https://registry.npmjs.org/
# or    
npm config set registry https://registry.npmjs.org/

Q4: Mac上端口4200被占用？

可以指定其他端口启动应用:

代码片段 
ng serve --port <新端口号>     
# or     
kill $(lsof -t -i:4200)

（可选）第十一步：推荐的IDE设置

虽然可以使用任何文本编辑器开发Angular应用,但VS Code是最受欢迎的选择之一。以下是推荐的VS Code设置:

  1. settings.json:
代码片段 
{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2,
    "typescript.updateImportsOnFileMove.enabled": "always",
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}
  1. 推荐的插件:
    除了前面提到的插件外,还可以考虑:
  • Material Icon Theme (更好的文件图标)
  • Auto Close Tag (自动闭合HTML标签)
  • Auto Rename Tag (自动重命名HTML标签)
  • Bracket Pair Colorizer (彩色括号匹配)

3.调试配置:
在.vscode/launch.json中添加Chrome调试配置:

代码片段 
{
    "version": "0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

（可选）第十二步：性能优化技巧

随着项目增长,您可能会遇到性能问题。以下是几个优化建议:

1.懒加载模块:
将应用拆分为多个模块并按需加载:

代码片段 
const routes: Routes = [
    { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.adminModule) }
];

2.启用生产模式:
在生产环境中禁用开发模式检查:

代码片段 
// main.ts    
import { enableProdMode } from '@angular/core';    
enableProdMode();    
// ...其他代码...    
``

3.使用AOT编译:
提前编译(Ahead-of-Time)可以减少运行时开销:

代码片段 
ng build --aot=true --prod    
``

4.Tree Shaking:
确保启用了Tree Shaking以移除未使用的代码(在production构建中默认启用)

5.服务端渲染(SSR):
考虑使用Angular Universal进行服务端渲染以提高首屏加载速度:

代码片段 
ng add @nguniversal/express-engine    
``

6.CDN部署:
将静态资源部署到CDN以减少服务器负载和提高全球访问速度

7.性能分析工具:
使用Chrome DevTools的Performance和Lighthouse面板定期分析性能瓶颈

8.Bundle分析:
分析打包后的文件大小以识别体积过大的依赖项:

代码片段 
npm install source-map-explorer --save-dev    
npx source-map-explorer dist/my-first-app/main*.js      
``

9.缓存策略:
为静态资源设置适当的缓存头以减少重复下载

10.图片优化:
使用WebP格式图片并考虑懒加载非关键图片

11.避免不必要的变更检测:
使用OnPush变更检测策略减少不必要的视图更新

12.Web Workers:
将CPU密集型任务移到Web Workers中以避免阻塞UI线程

13.PWA支持:
考虑添加PWA支持以提供离线功能和提高用户体验

14.代码分割(Code Splitting):
利用动态导入实现更细粒度的代码分割

15.预加载关键资源:
使用预加载关键CSS和JS资源

16.移除未使用的polyfills:
根据目标浏览器调整polyfills以减少不必要的填充代码

17.服务端压缩(Gzip/Brotli):
确保服务器启用了Gzip或Brotli压缩以减小传输体积

18.HTTP/2或HTTP/3协议支持:
升级到HTTP/2或HTTP/3以提高并行请求效率

19.内存泄漏检测:
定期检查内存泄漏情况,特别是在SPA应用中

（可选）第十三步：测试与持续集成

完善的测试策略对长期维护至关重要。以下是测试相关建议:

单元测试

1.Jasmine + Karma是默认测试框架
2.Run tests with coverage report:

代码片段 
ng test --code-coverage      
``

3.Coverage报告位于coverage目录下

端到端(E2E)测试

1.Angular默认使用Protractor(Cypress也是流行选择)
2.Run E2E tests:

代码片段 
ng e2e      
``

持续集成(CI)

示例GitHub Actions配置(.github/workflows/main.yml):

代码片段 
name: CI      

on:
push:
branches: [ main ]
pull_request:
branches: [ main ]      

jobs:
build:
runs-on: macos-latest      

steps:
uses: actions/checkout@v2      

name: Use Node.js ${{ matrix.node }}
uses: actions/setup-node@v1      
with:
node_version: '16.x'      

name: Install dependencies      
run: npm ci      

name: Run lint      
run: npm run lint      

name: Run unit tests      
run: npm test -- --watch=false --browsers=ChromeHeadlessCI      

name: Run e2e tests      
run: npm run e2e      

name: Build production version      
run: npm run build-prod            
``

SonarQube集成

对于企业级项目,SonarQube可以提供更全面的代码质量分析:

1.Add sonar-scanner to your project:

代码片段 
npm install sonar-scanner --save-dev            
``

2.Create sonar-project.properties file:
“`
sonar.projectKey=my-first-app
sonar.projectName=My First App
sonar.projectVersion=1

sonar.sources=src

sonar.host.url=http://localhost

sonar.login=

sonar.sourceEncoding=UTF

sonar.exclusions=node_modules//.,/spec.ts,/mock.ts,/test.ts,/e

sonar.test.inclusions=src/*/spec.ts

sonar.javascript.lcov.reportPaths=coverage/lcov.info
sonar.testExecutionReportPaths=test-report.xml
sonar.coverage.exclusions=src/environments//.
sonar.tests=src/app
sonar.testExecutionReportPaths=test-report.xml
sonar.scm.disabled=true
sonar.scm.provider=git
sonar.scm.exclusions.disabled=true
sonar.scm.stats.enabled=false
sonar.cpd.exclusions=src/app//.,src/assets//.,src/environments//.,src/styles/*/.*,src/polyfills.ts,src/test.ts,src/main.ts,src/environments/environment.prod.ts,src/environments/environment.ts
sonar.cpd.minimumTokens=100

原创 高质量