Angular在升級到6的時候,多了許多新的功能,比如ng命令,在從5升級到6的時候是無痛升級的,但是升級到了6之後,也有許多地方做了改變,比如Angular的設置,Angular的base-path等,通過在一臺機器上部署多個Angular的單頁應用,來說明這些問題。
angular 打包,縮小包體積命令
ng build --prod --aot
來源
來源網站打不開了,但是找到一個不錯的博客
angular 6新的設置方式,我想在Angular新建項目的時候使用yarn而不是npm
You should update the article.
With @angular/cli version 6+ it will be
SET GLOBAL: ng config — global cli.packageManager npm
SET LOCAL: ng config cli.packageManager npm
GET: ng config cli.packageManager
The diff is:
- No more get/set commends, only config and get/set is inferred.
needs to prefix cli properties with cli. because there are other things now, from devkit…
- base-path設置
這個設置(見詞知意)可以讓項目添加一個新的URL前綴,比如默認是/,你可以設置成/blog
在angular.json文件中找到projects->todo-web(項目名字)->architect->build->options下新增:
"baseHref": "/todo/",
"deployUrl": "/todo/"
- 項目打包上傳到服務器
我的項目在服務器上的位置: /todo/todo
我還有另一個angular的項目位置在: /blog/blog, 他們的項目結構是相同的。
在看看nginx的配置(server下):
其中try_files可以防止Angular刷新404的問題。
這樣我的可以用一個Nginx做代理,同時訪問我的兩個web項目,兩個api項目。
他們的地址是:
- [TODO項目]https://kazma.life/todo/
- [博客項目, 寫着玩的,前端比較差]https://kazma.life/blog/
- [平時寫的博客用的是Github託管的]https://kazma233.github.io/
以上可以說是解決了很大部分的坑了。