使用 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. 打开 testv4/package.json 文件,修改前面几行内容为自己的应用名称等:
“name”: “ionic-app-base”,
“version”: “0.0.0”,
“author”: “Ionic Framework”,
“homepage”: “https://ionicframework.com/”,
e. 在 testv4 文件夹上执行 npm install,中间可能会出现错误,如果出错则删除 node_module 文件夹然后再次运行 npm install,直到成功。
f. 执行 npm run start,启动浏览器打开 localhost:4200,成功。
这个方法也可以实现不联网状态下,离线创建 Ionic 新项目,当然你可以说离线创建新项目没有意义,因为 npm install 一样需要联网,但如果能够手工建立 node_module 文件夹,离线创建 ionic 项目也是有意义的。