
Angular 安装入门从在线沙箱到本地 CLI 项目的完整上手指南【免费下载链接】angularDeliver web apps with confidence 项目地址: https://gitcode.com/GitHub_Trending/an/angular导读本文基于 Angular 官方文档库中的安装与起步文档adev/src/content/introduction/installation.md展开系统讲解「两种最快上手 Angular 的路径」一是在浏览器中零配置试玩二是在本地通过 Angular CLI 完整搭建、运行一个真实项目。文章按官方文档给出的操作顺序覆盖 Node.js 版本前提、CLI 全局安装npm/pnpm/yarn/bun 四种方式、ng new创建项目与交互式选项、npm start/ng serve启动开发服务器等关键环节并结合本仓库中的版本兼容表、CLI 本地环境指南、开发服务器文档与 workspace 文件结构说明补充可验证的实现细节与排错方法。读完本文你将能够在本地从零创建并运行一个 Angular 应用并理解每一步背后所涉及的配置与构建机制。一、官方安装页的整体脉络官方安装文档为读者规划了两条截然不同的起步路线按需选择即可在线试玩Play Online完全不需要任何环境配置直接在浏览器里体验 Angular 应用本地新建项目Set up a new project locally创建可持久保存、可纳入 Git 版本管理的本地项目这也是绝大多数真实开发场景的选择。文档后续的「前置条件Prerequisites」与「操作步骤Instructions」小节完整覆盖了从环境检测到浏览器打开页面的全部环节最后还补充了面向 AI 辅助开发的入口与后续学习路径。下面的章节将沿这条主线逐步展开并在每一步结合仓库中的对应文档与源码说明其原理。二、想立刻体验Angular Playground 在线沙箱如果只是想“玩一玩” Angular、观察一个真实 Angular 应用是如何组织的而不想先花时间搭建项目环境官方提供了在线沙箱Playground。它零配置、无需安装任何软件打开即可编辑并实时查看运行效果是评估 Angular、验证某个 API 行为或学习组件语法的低成本入口。需要说明在线沙箱适合尝鲜与学习一旦需要 Git 版本管理、持久化依赖或接入编辑器插件等开发工具链官方文档明确建议转向本地项目也就是下一节的内容。三、本地新建项目之前四项前置条件本地安装文档逐条列出了开工前需要具备的环境要素。下面按官方文档顺序逐项解读并给出验证方法。3.1 Node.js版本要求官方文档要求Node.js v22.22.3 或更高版本。这一要求并非拍脑袋而是与本仓库中记录的各 Angular 大版本对 Node.js 的约束一一对应的详见 adev/src/content/reference/versions.md 的版本兼容表。结合该表中当前处于积极支持期的版本可以得出更精确的结论Angular 大版本兼容的 Node.js 版本范围TypeScript 范围22.0.x^22.22.3||^24.15.0||^26.0.06.0.0 6.1.021.0.x / 21.1.x / 21.2.x^20.19.0||^22.12.0||^24.0.05.9.0 6.0.020.x^20.19.0||^22.12.0||^24.0.05.8.0 6.0.0补充说明两点帮助你避免踩坑文档中“v22.22.3 or newer”是对应当前主推版本Angular v22 系列的表述若你实际安装的是 v20/v21则应参考上表选择相应 Node 版本。Angular 官方对 Node.js 的要求是active LTS 或 maintenance LTS 版本adev/src/content/tools/cli/setup-local.md尽量避开奇偶版本号的非 LTS 发布线。Angular CLI 正是依托 Node.js 及其附带的 npm 在浏览器之外安装、运行各类 JavaScript 工具链的因此 Node 是 CLI 运转的运行时基础不能跳过。安装 Node.js 后可在终端用以下命令确认版本符合要求node -v npm -v3.2 文本编辑器官方推荐Visual Studio Code。选择编辑器的核心诉求是获得良好的 TypeScript 支持、内置终端以及与 Angular 工程化的配合体验当然任何支持 TypeScript 的编辑器都可以使用。3.3 终端Terminal运行 Angular CLI 命令如ng new、ng serve必须有可用的命令行终端。如果使用 Visual Studio Code可以直接打开其内置集成终端菜单 Terminal → New Terminal免去在系统终端与编辑器之间切换。3.4 开发工具Angular Language Service为了提升编码体验官方推荐安装Angular Language Service即编辑器中面向 Angular 模板的语言服务插件。它能在你编写组件模板时提供自动补全、错误诊断与跳转提示显著降低模板层面的低级错误概率。仓库中对应语言服务实现的源码位于 packages/language-service其入口定义在 packages/language-service/index.ts对“模板类型检查、补齐、重构”等能力的实现细节感兴趣时可进一步查阅。四、安装 Angular CLI四种包管理器Angular CLI 以 npm 包angular/cli的形式发布安装后提供一个名为ng的命令行二进制CLI 总览见 adev/src/content/tools/cli/overview.md。官方文档给出了四套等价的全局安装命令任选其一即可# npm npm install -g angular/cli # pnpm pnpm install -g angular/cli # yarn yarn global add angular/cli # bun bun install -g angular/cli安装完成后建议先做一次版本自检确认ng已进入 PATH 且版本正确ng version4.1 WindowsPowerShell 执行策略问题官方文档特别提示Windows 客户端默认禁止执行 PowerShell 脚本导致上面 npm 全局安装的二进制无法运行并报错。解决办法是为当前用户放开“远程签名”策略Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned执行后请仔细阅读终端返回的提示信息理解执行策略放开后对脚本运行的含义再继续。4.2 Unix/Linux全局目录权限问题在部分 Unix 类系统上全局可执行脚本可能归属于 root 用户直接安装会触发权限不足错误。此时需要用sudo以 root 身份执行命令并按提示输入密码sudo npm install -g angular/cli # 或 sudo pnpm install -g angular/cli # 或 sudo yarn global add angular/cli # 或 sudo bun install -g angular/cli同样需要理解以 root 身份安装的副作用不应无脑滥用。五、创建第一个项目ng new5.1 基本用法与交互式选项在终端中执行ng new并带上项目名即可创建新工作区workspace。官方示例使用my-first-angular-app作为项目名ng new project-name # 例如 ng new my-first-angular-appng new会以交互方式询问若干工程化选项例如是否启用路由routing、选用哪种样式预处理器CSS/SCSS/Sass/Less、采用 standalone 组件还是 NgModule 架构、选择哪个包管理器等。在交互界面中使用方向键上/下移动光标回车键确认选择若没有特殊偏好直接连按回车接受默认值即可继续。关于命令行选项的通用语法CLI 遵循 Unix/POSIX 风格约定布尔选项用--flag表示 true、--no-flag表示 false也支持--flagtrue/false数组与 keyvalue 选项可用空格或重复--option两种方式给出详见 adev/src/content/tools/cli/overview.md。据此你可以用类似下面的方式跳过交互、直接按预设创建项目ng new my-first-angular-app --routing --stylescss --package-managernpm5.2 成功标志与产物选项确定后CLI 会自动安装 Angular 各 npm 包及其依赖首次安装可能需要数分钟。全部完成后终端会输出如下成功信息✔ Packages installed successfully. Successfully initialized git.注意这里同时完成了两件事依赖安装成功Git 仓库初始化成功。也就是说ng new生成的是一个“开箱即用、可纳入版本管理”的完整 workspace。从工作区结构的视角看详见 adev/src/content/reference/configs/file-structure.mdng new my-first-angular-app会在磁盘上创建一个同名目录内部是一个单应用工作区应用源码位于src/顶层包含 workspace 级配置angular.json所有项目的构建/服务/测试配置、package.json与package-lock.json依赖清单、tsconfig.jsonTypeScript 基础配置其余 tsconfig 均继承它以及.gitignore、README.md、.editorconfig等src/内是应用入口与根组件源码index.html宿主页面CLI 会在构建时自动注入 JS/CSS、main.ts应用入口、styles.css全局样式、app/组件、模板与逻辑含根组件app.component.ts与其模板、样式、单元测试等。一个 workspace 可以容纳多个应用与库ng generate application my-app2、ng generate library my-lib生成的后续项目默认进入projects/目录若希望从一开始就构建 monorepo 式多项目工作区可用ng new my-workspace --no-create-application跳过根应用生成。六、在本地运行你的新项目6.1 进入项目目录并确认依赖cd my-first-angular-app项目首次创建后依赖即已装好可用如下方式确认node_modules目录存在ls node_modules # 若输出大量依赖目录即正常若因某些原因依赖缺失可先在项目内执行npm install或 pnpm/yarn/bun 对应命令补装再继续。6.2 启动开发服务器官方安装文档使用npm start启动项目npm start其底层原理是新建项目package.json的 scripts 中预置了start: ng serve因此npm start实际等价于执行ng serveng serve的详细行为见 adev/src/content/tools/cli/serve.md。开发服务器会编译应用并跳过不必要的生产优化保证编译速度监听文件变化源码一旦改动就自动重建并让浏览器热更新live reload输出便于阅读的开发日志。6.3 解读启动日志启动成功后的终端输出大致如下Watch mode enabled. Watching for file changes... NOTE: Raw file sizes do not reflect development server per-request transformations. ➜ Local: http://localhost:4200/ ➜ press h enter to show help逐行解读Watch mode enabled文件监听watch已开启之后的源码改动会自动触发重建Local: http://localhost:4200/本地访问地址直接在浏览器打开即可看到应用press h enter to show help在运行中的终端里按h再回车可查看开发服务器帮助。如果想省去手动打开浏览器的步骤可以在启动命令中附加-o/--open参数服务器就绪后会自动打开默认浏览器ng serve --open6.4 停止与排错提示在运行ng serve/npm start的终端中按CtrlC即可停止服务器adev/src/content/tools/cli/serve.md 对此有明确说明端口被占用时可换端口启动ng serve --port 4300若项目需要把某些请求代理到后端例如将http://localhost:4200/api转发到http://localhost:3000/api可在angular.json的servetarget 中通过proxyConfig选项指向proxy.conf.json注意修改代理配置后需重启ng serve才能生效。七、npm start与ng serve背后的构建机制对于希望进一步理解“本地运行到底发生了什么”的读者可以追踪如下调用链npm start触发package.json中的start脚本即ng serveng serve不会“硬编码”执行某个固定程序而是依据 angular.json 中默认项目的servetarget 配置调用对应的Architect builder当前主推的默认 builder 是angular/build:dev-server基于 Vite其 Angular.json 中的结构大致如下摘引自官方 CLI 文档的示意{ projects: { my-app: { architect: { serve: { builder: angular/build:dev-server } } } } }该 builder 负责“编译应用 → 启动 dev server → 文件监听 → 热更新”。ng serve只负责默认项目的servetarget多项目场景下则可用ng serve project-name指定项目。仓库根目录angular.json、示例集成项目如 integration/cli-hello-world/angular.json以及各包目录下的BUILD.bazel均可作为真实配置的参考样本。CLI 支持的命令全集new/serve/build/test/generate/update等可对照 adev/src/content/reference/cli.md 查询。八、使用 AI 辅助开发与后续学习路径8.1 在 AI IDE 中开发 Angular完成本地环境搭建后官方文档还给出了一条面向 AI 时代的建议如果使用支持 AI 的 IDE如 Copilot 类插件应先了解官方的Angular prompt 规则与最佳实践让 AI 助手遵循正确的组件写法、信号signals用法与工程约定减少生成“看起来能跑、实则不符合规范”的代码。对应内容记录在 adev/src/content/ai/develop-with-ai.md仓库中的可执行 prompt 规则与技能定义可在 skills/dev-skills/angular-developer 目录下查阅。8.2 下一步该学什么至此你已经拥有了一个可运行、可修改的 Angular 项目官方文档建议的下一步是从 Essentials 指南 入手系统学习组件、模板、信号signals、依赖注入等核心概念或按需进入更深入的主题指南路由、表单、HTTP、测试、SSR/hydration 等仓库中文档均位于 adev/src/content/guide 与 adev/src/content/best-practices 下可按目录浏览回顾本文涉及的 CLI 本地环境设置、workspace 文件结构 与 Angular 版本兼容表在升级 Node、Angular 或遇到兼容性问题时随时回查。需要说明在线沙箱与 Playground 是官方文档站点提供的交互服务本文所有本地环境相关结论Node 版本、命令行为、构建产物与文件结构均以本仓库内 安装文档、CLI 本地环境文档、开发服务器文档 及 版本兼容文档 为准命令执行结果会随 Angular 主版本更新而略有差异。【免费下载链接】angularDeliver web apps with confidence 项目地址: https://gitcode.com/GitHub_Trending/an/angular创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考