Angular 中文官方:https://www.angular.cn/
為什么要看Angular?我也不知道,因為公司有個Angular的項目要維護。聽說Angular的版本已經到7了。以前沒怎么玩過這個。所以重頭開始嘗試。還有,我搜了下,最新的angular7搭建的教程很少(是沒有)
打開菜鳥教程找Angular的入門教程,不知道為什么只有Angular2,7捏?不過沒關系,基礎搭建應該都差不多,版本升級可能只是部分語法和接口升級,那就從angular2開始吧。
1.項目搭建
創建與配置項目:http://www.runoob.com/angularjs2/angularjs2-typescript-setup.html
跟着菜鳥教程的“創建配置項目”一步一步來,你也可以
最后一步有點問題,編譯並運行應用程序
npm start
報錯,報什么錯?忘了截圖了
報錯大概如下:
node_modules/rxjs/Subject.d.ts(16,22): error TS2415:Class'Subject<T>' incorrectly extends base class'Observable<T>'.Types of property 'lift' are incompatible.Type'<T, R>(operator: Operator<T, R>) => Observable<T>' is not assignable to type '<R>(operator: Operator<T, R>) => Observable<R>'.Type'Observable<T>' is not assignable to type 'Observable<R>'.Type'T' is not assignable to type 'R'. npm ERR! code ELIFECYCLE npm ERR! errno 2
解決如下:
package.json文件里這倆依賴版本的問題
2.寫第一個頁面
我想寫一個列表頁、一個詳情頁、一個編輯頁,並且把這三個頁面串起來。
等等,我怎么開始寫第一個頁面呢?菜鳥教程沒說啊,angular官網也沒說啊
於是我去angular官網找路由的文檔:https://www.angular.cn/tutorial/toh-pt5
但是angular官網的代碼肯定都是以最新版本為基礎的,剛剛跟着菜鳥教程搭的是angular2的環境,直接改版本號升級肯定會有很多問題。所以我想到一個辦法,直接把angular官網的路由示例下載下來,這樣angular7有了,路由也有了,完美!
angular7路由范例下載(來自官網): 下載范例
下載解壓后,執行 npm install安裝
可能會有一些報錯,一個一個解決,我遇到的報錯有3個:
(1)Failed at the phantomjs-prebuilt@2.1.16 install script.
解決方法,執行:npm install phantomjs-prebuilt@2.1.16 --ignore-scripts
(2)Missing: karma-phantomjs-launcher@^1.0.2
解決方法,執行:npm i karma-phantomjs-launcher
(3)You are running version v8.7.0 of Node.js, which is not supported by Angular CLI v6.
The official Node.js version that is supported is 8.9 and greater.
node版本低的問題
解決方法,windows系統,去nodeJS官網下載最新版本,安裝。
最后運行成功
如果它不自動打開瀏覽,那你手動輸入 http://localhost:4200/ (可能你那邊不一樣)