ng-起步
目前,无论你使用什么前端框架,都必然要使用到各种 NodeJS 工具,Angular 也不例外。与其它框架不同,Angular 从一开始就走的“全家桶”式的设计思路,因此 @angular/cli 这款工具里面集成了日常开发需要使用的所有 Node 模块,使用 @angular/cli 可以大幅度降低搭建开发环境的难度。
Angular CLI 类似于 Vue CLI,是 Angular 官方开发的一个脚手架工具,专门用来开发构建 Angular 应用程序。
- Angular 应用程序初始化
- 内置开发服务器
- 代码变更浏览器自动刷新
- 创建组件、指令、服务等集成工具
- 测试和维护
- ......
Step 0. 安装依赖环境
安装 Node.js
- 下载地址
- 安装
- 确认 Node.js 环境
安装 npm
- npm 会随着 Node 的安装被一起安装
- 确认 npm 环境
安装 Python
- 下载地址
- Windows 32 位
- Windows 64位
- 确认 Python 环境
安装 C++ 编译工具
Angular CLi
在 Windows 上同时依赖 C++ 编译工具,所以我们这里也需要单独安装。
当然如果你的机器安装了 Visual Studio(注意,不是 Visual Studio Code)。
执行下面的命名安装 C++ 编译工具:
npm install --global --production windows-build-tools
安装 cnpm
npm i -g cnpm --registry=https://registry.npm.taobao.org
Step1. 安装脚手架工具 Angular CLI
Angular CLI 是 Angular 官方开发的一个类似于 Vue CLI
的脚手架开发工具,它帮我们集成了 webpack 打包、开发服务器、单元测试、自动编译、部署等功能特性。
使用它的第一步就是先安装:
cnpm i -g @angular/cli
安装结束之后我们可以通过在命令行输入以下命令测试是否安装成功:
ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 8.3.23
Node: 12.10.0
OS: win32 x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.803.23
@angular-devkit/core 8.3.23
@angular-devkit/schematics 8.3.23
@schematics/angular 8.3.23
@schematics/update 0.803.23
rxjs 6.4.0
安装失败解决方案
- 在 Windows 平台上安装 @angular/cli 会报很多 error,那是因为 @angular/cli 在 Windows 平台上面依赖 Python 和 Visual Studio 环境,而很多开发者的机器上并没有安装这些东西
- 以及 node-sass 模块被墙的问题,强烈推荐使用 cnpm 进行安装,可以非常有效地避免撞墙
npm i -g cnpm --registry=https://registry.npm.taobao.org
cnpm i -g @angular/cli
- 如果安装失败,请手动把全局的
@angular/cli
删掉:cnpm uninstall -g @angular/cli
- 如果
node_modules
删不掉,爆出路径过长之类的错误,请尝试用一些文件粉碎机之类的工具强行删除。 - 无论你用什么开发环境,安装的过程中请仔细看错误日志。很多人没有看错误日志的习惯,报错的时候直接懵掉,根本不知道发生了什么。
Setp 2. 使用脚手架工具初始化项目
ng new my-app
Angular CLI
将会自动帮你把目录结构创建好,并且会自动生成一些目录文件
请特别注意:Angular CLI
在自动生成好项目骨架之后,会立即自动使用 npm 来安装所依赖的 Node 模块,所以这里你懂的,一道墙又会阻止我们通往自由的道路,所以这里如果初始化很慢或者失败,请自己手动 Ctrl + C
终止掉,然后进入初始化好的项目根目录使用 cnpm
来安装。
Step 3. Serve the application
使用脚手架工具初始化项目完成之后,我们就可以启动开发模式了:
# 或者 npm start
ng serve
注意:
- 在项目根目录下执行
- 看好是
serve
不是 server - 该命令默认会开启一个服务占用 4200 端口,如果想要修改可以通过
--port
参数来指定,例如ng serve --port 3000
接下来我们打开浏览器,访问:http://localhost:4200/ 。成功即可在浏览器中看到如下页面:
Step 4. 体验一下 Angular
找到 ./src/app/app.component.ts
文件,将 AppComponent
组件类中的 title
修改如下(记得保存哦):
export class AppComponent {
title = '你的第一个 Angular 应用';
}
你会发现浏览器随之刷新
标题样式太丑了,来让我们打开 src/app/app.component.css
文件并写入以下内容:
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
浏览器随之刷新
是不是很酷!😂😂😂😂😂😂
一些常见的坑
@angular/cli 这种“全家桶”式的设计带来了很大的方便,同时也有一些人不太喜欢,因为很多底层的东西被屏蔽掉了,开发者不能天马行空地自由发挥。比如:@angular/cli 把底层 webpack 的配置文件屏蔽掉了,很多喜欢自己手动配 webpack 的开发者就感到很不爽。
对于国内的开发者来说,上面这些其实不是最重要的,国内开发者碰到的坑主要是由两点引起的:
- 第一点是网络问题:比如
node-sass
这个模块你很有可能就装不上,原因你懂的。 - 第二点是开发环境导致的问题:国内使用 Windows 平台的开发者比例依然巨大,而 @angular/cli 在 Windows 平台上有一些非常恶心的依赖,比如它需要依赖 python 环境、Visual Studio 环境。
所以,如果你的开发平台是 Windows,请特别注意:
- 如果你知道如何给 npm 配置代理,也知道如何FQ,请首选 npm 来安装 @angular/cli。
- 否则,请使用 cnpm 来安装 @angular/cli,原因有三:1、cnpm 的缓存服务器在国内,你装东西的速度会快很多;2、用 cnpm 可以帮你避开某些模块装不上的问题,因为它在服务器上面做了缓存;3、cnpm 还把一些包都预编译好了缓存在服务端,不需要把源码下载到你本地去编译,所以你的机器上可以没有那一大堆麻烦的环境。
- 如果安装失败,请手动把 node_modules 目录删掉重试一遍,全局的 @angular/cli 也需要删掉重装,cnpm uninstall -g @angular/cli。
- 如果 node_modules 删不掉,爆出路径过长之类的错误,请尝试用一些文件粉碎机之类的工具强行删除。
- 无论你用什么开发环境,安装的过程中请仔细看 log。很多朋友没有看 log 的习惯,报错的时候直接懵掉,根本不知道发生了什么。
总结一下
安装依赖
- Node 6.9.0 or higher
- NPM 3 or higher
- Python
- C++ 编译工具
安装angular/cli
npm install -g @angular/cli
使用帮助
ng help
初始化项目
ng new <项目名称>
启动开发服务
ng serve
ng serve
默认占用 4200
端口号,可以通过下面选项配置:
ng serve --port 4201