這一段時間留意到Angular5的版本更新速度飛快芽淡,幾乎兩三天就一個版本逼侦,我就知道它快要來了曙痘。
然后今天就真的來了!雖說我對Angular5的內(nèi)容有了解到一些氛堕,但是還是想看到官方或?qū)<业脑敿毭枋隽蟪簦鹊酱宋模?a target="_blank" rel="nofollow">Version 5.0.0 of Angular Now Available.
由于上班也不好意思占用太多時間做自己的私事,我就不耗費翻譯的時間了讼稚,迫不及待的擼個新項目看看括儒。
第一步,升級@angular/cli
創(chuàng)建Angular5項目锐想,要更新angular-cli到1.5版本以上(其實angular-cli已換成@angular/cli)帮寻。如果未安裝過angular-cli,則直接執(zhí)行此句命令并跳過后續(xù)所有步驟即可:
npm install -g @angular/cli@latest
至于怎么更新可以看Github:https://github.com/angular/angular-cli赠摇,具體操作如下:
首先敲入命令查看下當前cli版本:
ng -v
看到版本是1.4.5固逗,低于1.5,所以我們敲入以下命令更新:
npm install -g @angular/cli@latest
或
npm update -g @angular/cli
如果你使用的是Angular CLI 1.0.0-beta.28或以下版本, 你需要先卸載angular-cli包藕帜,從angular-cli向 @angular/cli轉(zhuǎn)化:
npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli
升級全局包(Global package):
npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest
注:如果npm版本大于5就使用
npm cache verify
去代替上述npm cache clean
命令以避免錯誤.
注:如果要升級舊項目烫罩,本地包也需要升級,就先
cd 項目
洽故,然后執(zhí)行下述命令:
rm -rf node_modules dist
npm install --save-dev @angular/cli@latest
npm install
第二步贝攒,新建一個Angular5的項目
執(zhí)行以下命令:
ng new angular5
cd angular5
ng serve
打開localhost:4200/
即可看到頁面。
我們執(zhí)行下打包命令:
ng build --prod
查看命令輸出窗口时甚,對比下常規(guī)運行和打包后的內(nèi)容隘弊,可以看到文件得到了非常大的壓縮:
接著我們又打包一個Angular4的項目來比較一下:
發(fā)現(xiàn)在Angular5中沒有vendor
,而總體大小也小了50多K撞秋,看上去貌似不多长捧,但是按比例來看就很可觀了,或許當項目越大會越明顯吻贿,時間有限串结,簡單測試就到此先告一段落,后續(xù)再添加翻譯和做進一步測試。