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项目也是有意义的。


3.8k 声望
16 粉丝
0 条评论
推荐阅读
Ionic4 cordova混合开发的开发调试环境搭建
Ionic4混合开发首选应该是capacitor,但capacitor刚推出不久还不够成熟,所以选择使用传统的cordova方式开发。基本上,Ionic native5和之前版本使用方式上变化不大,但cli有些选项上有些区别。

scherman2阅读 4.1k

如何发布一个 TypeScript 编写的 npm 包
前言在这篇文章中,我们将使用TypeScript和Jest从头开始构建和发布一个NPM包。我们将初始化一个项目,设置TypeScript,用Jest编写测试,并将其发布到NPM。项目我们的库称为digx。它允许从嵌套对象中根据路径找出...

chuck6阅读 558

封面图
都2022 年了,你总不能还只会 npm i 吧? 🔥🔥🔥
在键帽与字符上横跳,于代码和程序中穿梭。一起面向快乐编程!大家好,我是荣顶,马上金三银四啦 ~ 这次给大家带来一篇 npm 命令相关的文章。目的在于查缺补漏,提升效率。npm 作为 node 包管理器,内置了非常多...

荣顶9阅读 2.5k

封面图
package.json中的字段详解(来自于官方文档)
main module browserexports //定义多个入口点(推荐使用),优先级比上面高。为esm和cjs提供,在引入exports之外的路径,会报错。 详情参考 [链接]

寒水寺一禅4阅读 712

使用 github actions 实现 npm 包自动化发布
鉴于我发布/即将发布的 npm 包越来越多,我决定用 github 的 actions 功能来实现 npm 包自动发布,过程也比较顺利,遂决定写一篇流水账记录下自动发布的实现,方便以后用到的时候翻阅。

MrBigShot1阅读 2.3k

Promise: 异步编程的理解和使用
JavaScript 中,Promise 的流行是得益于 jQuery 的方法 jQuery.Deferred(),其他也有一些更精简独立的 Promise 库,例如:Q、When、Bluebird。

后除2阅读 772

什么是好的错误消息?
微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势,学习途径等等。本文 GitHub [链接] 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

前端小智2阅读 448

3.8k 声望
16 粉丝
宣传栏