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