Stories

Detail Return Return

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

使用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項目也是有意義的。

Add a new Comments

Some HTML is okay.