更小更快更易用的Angular5管中窥豹

这一段时间留意到Angular5的版本更新速度飞快，几乎两三天就一个版本，我就知道它快要来了。

image.png

然后今天就真的来了！虽说我对Angular5的内容有了解到一些，但是还是想看到官方或专家的详细描述，等到此文：Version 5.0.0 of Angular Now Available.

image.png

由于上班也不好意思占用太多时间做自己的私事，我就不耗费翻译的时间了，迫不及待的撸个新项目看看。

创建Angular5项目，要更新angular-cli到1.5版本以上（其实angular-cli已换成@angular/cli）。如果未安装过angular-cli，则直接执行此句命令并跳过后续所有步骤即可：npm install -g @angular/cli@latest

至于怎么更新可以看Github：https://github.com/angular/angular-cli，具体操作如下：

首先敲入命令查看下当前cli版本：

代码语言：javascript复制

ng -v

angular-cli版本

看到版本是1.4.5，低于1.5，所以我们敲入以下命令更新：

代码语言：javascript复制

npm install -g @angular/cli@latest

或

代码语言：javascript复制

npm update -g @angular/cli

如果你使用的是Angular CLI 1.0.0-beta.28或以下版本, 你需要先卸载angular-cli包，从angular-cli向 @angular/cli转化：

代码语言：javascript复制

npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli

升级全局包（Global package）：

代码语言：javascript复制

npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest

注：如果npm版本大于5就使用npm cache verify去代替上述npm cache clean命令以避免错误.
注：如果要升级旧项目，本地包也需要升级，就先cd 项目，然后执行下述命令：

代码语言：javascript复制

rm -rf node_modules dist
npm install --save-dev @angular/cli@latest
npm install

执行以下命令：

代码语言：javascript复制

ng new angular5
cd angular5
ng serve

打开localhost:4200/即可看到页面。

我们执行下打包命令：

代码语言：javascript复制

ng build --prod

查看命令输出窗口，对比下常规运行和打包后的内容，可以看到文件得到了非常大的压缩：

Angular5项目运行与打包

接着我们又打包一个Angular4的项目来比较一下：

Angular4项目打包

发现在Angular5中没有vendor，而总体大小也小了50多K，看上去貌似不多，但是按比例来看就很可观了，或许当项目越大会越明显，时间有限，简单测试就到此先告一段落，后续再添加翻译和做进一步测试。

0 人点赞