Ionic start(4.x版本)發生bad status code 400錯誤以及離線建立新項目的解決方法

使用ionic start建立新項目，出現錯誤：

Error: Encountered bad status code (400) for
https://d2ql0qc7j8u4b2.cloudfront.net/angular-official-tabs.tar.gz

This could mean the server is experiencing difficulties right now--please try
again later.
    at Request.req.on.res
(C:\Users\xxx\AppData\Roaming\npm\node_modules\ionic\lib\utils\http.js:68:28)
    at emitOne (events.js:116:13)
    at Request.emit (events.js:211:7)
    at Request._emitResponse
(C:\Users\xxx\AppData\Roaming\npm\node_modules\ionic\node_modules\superagent\lib
\node\index.js:862:8)
    at ClientRequest.req.once.res
(C:\Users\xxx\AppData\Roaming\npm\node_modules\ionic\node_modules\superagent\lib
\node\index.js:412:10)
    at Object.onceWrapper (events.js:315:30)
    at emitOne (events.js:121:20)
    at ClientRequest.emit (events.js:211:7)
    at HTTPParser.parserOnIncomingClient (_http_client.js:543:21)
| Downloading and extracting tabs starter (100.00%)

而後就一直卡在Downloading and extracting tabs starter不動。直接緣由是ionic cli沒法下載ionic的template文件angular-official-tabs.tar.gz，從url看這個文件沒有放在npm庫中，因此使用淘寶npm鏡像不能解決這個問題。在網上搜了不少文章都沒法解決這個問題。

後來在Ionic官網上看到，Ionic新項目模板（starter）做爲一個開源項目託管在github上，因而嘗試去找到starter template的源碼，而後直接從starter template手工建立新項目。

在github上搜索ionic-team，發現ionic-team/starters項目，這就是要找的模板源碼項目。地址是：

https://github.com/ionic-team/starters

而後打包下載這個項目的全部源碼。根目錄下，有三個文件夾angular、ionic-angular和ionic1三個文件夾，顯然分別對應三種ionic4項目的starter模板。angular是ionic4.x的angular項目；ionic-angular是ionic2.x/3.x的項目；ionic1是ionic1.x項目。

我須要建立的是ionic4.x的項目，因此進入angular文件夾，裏面有base和official兩個文件夾，從前面錯誤信息看到下載文件名爲angular-official-tabs.tar.gz，因此顯然這個模板應該放在official文件夾中。打開official文件夾，裏面果真有一個tabs的文件夾，裏面有src和e2e兩個文件夾，應該就是模板的源文件。可是angular/official/tabs文件夾下沒有包含完整的ionic/angular的項目文件，顯然，angular.json、package.json文件都沒有。而後查找其餘文件夾，發現angular/base文件夾下，有這些缺失的文件。因而作如下嘗試：

a.新建一個文件夾做爲咱們本身的項目文件夾，假設是testv4。

b.把angular/base下的全部文件複製到testv4中。

c.把angular/official/tabs文件夾下全部文件複製到testv4中，提示有同名文件，所有覆蓋。

d.把integrations/cordova文件夾下全部文件複製到testv4中

編輯testv4/config.xml文件，修改項目名、做者等信息。

若是不存在testv4/ionic.config.json文件，則新建一個，添加如下內容：
{
    "name": "testv4",
    "integrations": {
        "cordova": {}
    },
    "type": "angular"
}

若是testv4/ionic.config.json文件已經存在，則在integrations中添加"cordova": {}。

e.打開testv4/package.json文件，修改前面幾行內容爲本身的應用名稱等：

"name": "ionic-app-base",
  "version": "0.0.0",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",

f.在testv4文件夾上執行npm install，中間可能會出現錯誤，若是出錯則刪除node_module文件夾而後再次運行npm install，直到成功。

g.執行npm run start，啓動瀏覽器打開localhost:4200，成功。

這個方法也能夠實現不聯網狀態下，離線建立Ionic新項目，固然你能夠說離線建立新項目沒有意義，由於npm install同樣須要聯網，但若是可以手工創建node_module文件夾，離線建立ionic項目也是有意義的。