ionic3+angular+cordova环境配置踩坑记录_cordova调试ionic+angular项目

一、目标环境

配置 ionic 3(CLI 4.6.0) +Anular4.4.4+Crodova 8.0

二、配置过程

1、Nodejs

（1）确认Node版本

原因：nodejs与node-sass版本不匹配将导致构建失败！

本次项目使用node-sass 4.5.3，在 node-sass github 中确认可知：
node-sass 4.5.3 最高支持Nodejs 8

（2）下载指定版本的Nodejs

在nodejs 官网历史版本下载Node 8的大版本
（不建议下载更低版本，亲测nodejs 6.x无法构建程序）

根据机器类型选择安装包 建议选择msi方式安装

（3）默认安装

安装过程全部默认，尽量不要改变安装目录。

（4）检查版本

node -v

2、nrm

原因：npm默认源远在大洋彼岸，下载过程极易传输失败，导致费时费力。
所以必须！更换下载源。

（1）全局安装nrm

npm install -g nrm

（2）查看源列表

nrm ls

额外内容：
此时可能出现以下报错：
（1）
C:\Users\hello\AppData\Roaming\npm\node_modules\nrm\node_modules\open\index.js:38 } catch {}
解决：
index.js的 38行 将 catch {} 改为 catch (e) {}
(2)
path.js:28 throw new TypeError('Path must be a string. Received ’ + inspect(path)) cli.js
解决：
cli.js 第17行修改成

const NRMRC = path.join(process.env[(process.platform == ‘win32’) ? ‘USERPROFILE’ : ‘HOME’], ‘.nrmrc’);
1

（3）测试延迟

nrm test <源名称>

（4）更换源

nrm use <源名称>
选择延迟最小的镜像源（建议cnpm）

（5）检查是否更换

npm config get registry

3、ionic

（1）全局安装ionic

cmd下执行 npm i -g ionic@4.6.0

（2）验证版本

ionic -v

4、Cordova

（1）全局安装Cordova

高版本可能造成项目构建失败

cmd下执行 npm i -g cordova@8.0.0

（2）验证版本

cordova -v

5、尝试调试项目

（1）更换node-sass仓库

npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass

（2）重新下载项目依赖包

原因：旧的依赖会导致项目新构建不通过

删除或将原项目目录下的node_modules中的内容，或备份至其他文件夹

（3）安装依赖

项目目录下执行 npm install

（4）测试开发环境

项目目录下执行 ionic serve

（5）测试打包

项目目录下执行 ionic build --prod

三、自我分析

环境的搭建，来来回回构造了可能花费了一个星期，总结出工作中的问题如下：

1、项目pakeage.json中存放有项目所需的依赖包版本，包括angualr、ionic、cordova等等，手动安装依赖前必须先查看该文件，了解项所使用的包版本；

2、在项目目录下使用npm install安装的依赖包，可以独立于系统全局的环境；

3、使用npm安装依赖包时弹出的信息只需要关注 ERR! 即可；

4、使用npm安装失败后必须使用 Npm cache clean -f 进行清理；

5、纠错时必须要专注于错误本身，万不可天马行空、发散思维；

6、找寻解决方案要有针对性，看清是否为同类型的错误，确认后再使用；

7、当使用某种解决方案时又蹦出新的错误提示，应当重新考量方案的正确性，尝试其他解决方案，忌就新错误展开查找。

8、项目目录尽量不要有中文字符。