ionic2 ionic3 项目创建遇到的问题总结

真是一觉醒来，就又有新版本发布啊。

这一次的总结主要针对ionic3，当然也适用于ionic2.

不一定面面俱到，但是希望看到这篇总结开发者能够少走一些弯路。

First of all,当然是安装最新版的ionic了。

npm install -g ionic

可以用

ionic info

查看一系列依赖工具的版本。

Fine，现在开始创建ionic项目了。一切看起来的风平浪静的样子。

还是那句用烂了的老命令。

ionic start ionic3-angular4 --v2

当然，虽然是ionic３，但是还是要使用　－－v２　这个命令。

不信的话，装好了去项目文件里的　packagge,json 里面去看。

"dependencies": {
    "@angular/common": "4.1.0",
    "@angular/compiler": "4.1.0",
    "@angular/compiler-cli": "4.1.0",
    "@angular/core": "4.1.0",
    "@angular/forms": "4.1.0",
    "@angular/http": "4.1.0",
    "@angular/platform-browser": "4.1.0",
    "@angular/platform-browser-dynamic": "4.1.0",
    "@ionic-native/core": "3.7.0",
    "@ionic-native/splash-screen": "3.7.0",
    "@ionic-native/status-bar": "3.7.0",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.2.1",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.10"
  }

然而， 实际上，我第一次这么 start的时候，并没有成功。

$ ionic start ionic3-angular4 --v2
? What starter would you like to use: (Use arrow keys)
? What starter would you like to use: tabs
? The directory ionic3-angular4 contains file(s) that could conflict. Would youY
? The directory ionic3-angular4 contains file(s) that could conflict. Would you
 like to overwrite the directory with this new project? Yes
✔ Creating directory G:\myionicapp\ionic3-angular4 - done!
Fetching app base (https://github.com/driftyco/ionic2-app-base/archive/master.tar.gz)
✔ Downloading - done!
Fetching starter template tabs (https://github.com/driftyco/ionic2-starter-tabs/archive/master.tar.gz)
✔ Downloading - done!
✔ Updating package.json with app details - done!
✔ Creating configuration file ionic.config.json - done!
Installing dependencies may take several minutes!
> npm install
✖ Running command - failed!
[ERROR] An error occurred while running npm install (exit code 1):

        npm WARN deprecated object-keys@0.2.0: Please update to the latest object-keys
        npm WARN prefer global node-gyp@3.6.1 should be installed with -g

        > node-sass@4.5.0 install G:\myionicapp\ionic3-angular4\node_modules\node-sass
        > node scripts/install.js

        Downloading binary from https://github.com/sass/node-sass/releases/download/v4.5.0/win32-x64-48_binding.node
        Cannot download "https://github.com/sass/node-sass/releases/download/v4.5.0/win32-x64-48_binding.node":

        connect ETIMEDOUT 52.216.17.216:443
...省略一万字

看起来是npm的锅，请求或者下载超时了。

于是github上面大佬们就说，换个不怎么限制时间的版本吧。（相关的github上的issue请参考 https://github.com/driftyco/ionic-cli/issues/2256）

于是尝试

npm i -g ionic@legacy

好家伙，是不限制时间了，折腾了十来次，能把github上的文件download下来了。

but,npm 始终install不上啊。一直停留在

Installing npm packages (may take a minute or two)

怕是因为墙的原因，反正就是获取不了。

所以，一个可行的办法就是，

创建ionic项目时，先屏蔽掉依赖的安装。

ionic start ionic3-angular4 --v2 --skip-npm

啊，可以了。我看到了ionic的音符。

问题远远还没又解决。

先安装依赖吧，依赖装好了才可以真正启用ionic serve。

cnpm install --save

看起来都是对的。

$ cnpm install --save
√ Installed 19 packages
√ Linked 0 latest versions
√ Run 0 scripts
√ All packages installed (1 packages installed from npm registry, used 7s, speed     3.98kB/s, json 13(29.65kB), tarball 0B)
Recently updated (since 2017-05-10): 1 packages (detail see file C:\Users\**\i    onic3-angular4-1\node_modules\.recently_updates.txt)

然鹅，当我在输入

ionic serve

出现了一些意想不到的错误。

ionic serve

> ionic-hello-world@0.0.0 ionic:serve C:\Users\黛扬\ionic3-angular4-1
> ionic-app-scripts serve "--v2" "--address" "0.0.0.0" "--port" "8100" "--livere    load-port" "35729"

module.js:471
    throw err;
    ^

Error: Cannot find module 'fs-extra'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\Users\黛扬\ionic3-angular4-1\node_modules\.1.3.7@@    ionic\app-scripts\dist\util\config.js:4:18)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\    node_modules\\npm\\bin\\npm-cli.js" "run" "ionic:serve" "--" "--v2" "--address"     "0.0.0.0" "--port" "8100" "--livereload-port" "35729"
npm ERR! node v6.9.5
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! ionic-hello-world@0.0.0 ionic:serve: `ionic-app-scripts serve "--v2" "-    -address" "0.0.0.0" "--port" "8100" "--livereload-port" "35729"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ionic-hello-world@0.0.0 ionic:serve script 'ionic-app-scr    ipts serve "--v2" "--address" "0.0.0.0" "--port" "8100" "--livereload-port" "357    29"'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ionic-hello-world pac    kage,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     ionic-app-scripts serve "--v2" "--address" "0.0.0.0" "--port" "8100    " "--livereload-port" "35729"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs ionic-hello-world
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm own

和类似

$ ionic serve

> ionic-hello-world@0.0.0 ionic:serve C:\Users\黛扬\ionic3-angular4-1
> ionic-app-scripts serve "--v2" "--address" "0.0.0.0" "--port" "8100" "--livereload-port" "35729"

C:\Users\黛扬\ionic3-angular4-1\node_modules\node-sass\lib\binding.js:15
      throw new Error(errors.missingBinary());
      ^

Error: Missing binding C:\Users\黛扬\ionic3-angular4-1\node_modules\node-sass\vendor\win32-x64-48\binding.node
Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 6.x

Found bindings for the following environments:
  - Windows 64-bit with Node.js 6.x

This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass` to build the binding for your current environment.
    at module.exports (C:\Users\黛扬\ionic3-angular4-1\node_modules\node-sass\lib\binding.js:15:13)
    at Object.<anonymous> (C:\Users\黛扬\ionic3-angular4-1\node_modules\node-sass\lib\index.js:14:35)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\Users\黛扬\ionic3-angular4-1\node_modules\@ionic\app-scripts\dist\core\bundle-components.js:6:16)

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "ionic:serve" "--" "--v2" "--address" "0.0.0.0" "--port" "8100" "--livereload-port" "35729"
npm ERR! node v6.9.5
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! ionic-hello-world@0.0.0 ionic:serve: `ionic-app-scripts serve "--v2" "--address" "0.0.0.0" "--port" "8100" "--livereload-port" "35729"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ionic-hello-world@0.0.0 ionic:serve script 'ionic-app-scripts serve "--v2" "--address" "0.0.0.0" "--port" "8100" "--livereload-port" "35

嗯，我试过了npm ERR 提示后面的操作。全以失败告终。

于是，就只好

移除node_modules文件，然后清除npm缓存，再将npm升级，继而重新安装。(github 上面能够solve那些issue的基本都是执行这些操作的，大多都是因为版本问题出现的错误)

rm -rf node_modules
npm clean cache
npm update
cnpm install --save

在我执行了 cnpm install --save 之后，我看到了 

  Today:
    → @ionic/app-scripts@1.3.7 › chokidar@1.6.1 › anymatch@1.3.0 › micromatch@2.3.11 › kind-of@^3.0.2 (02:21:41)
    → @ionic/app-scripts@1.3.7 › babili@0.0.10 › babel-cli@6.24.1 › babel-core@6.24.1 › debug@^2.1.1 (12:33:51)

讲道理上面的好像是更新记录之类的。所以不更新就是等着踩坑。= =，就像中永恒之蓝的病毒一样，不更新就踩坑。

终于，看了近十页ionic serve 的issue 之后，自己电脑的ionic serve 能够work了。

$ ionic serve

> ionic-hello-world@0.0.0 ionic:serve C:\Users\黛扬\ionic3-angular4-1
> ionic-app-scripts serve "--v2" "--address" "0.0.0.0" "--port" "8100" "--livereload-port" "35729"

[13:19:54]  ionic-app-scripts 1.3.7
[13:19:54]  watch started ...
[13:19:54]  build dev started ...
[13:19:54]  clean started ...
[13:19:54]  clean finished in 1 ms
[13:19:54]  copy started ...
[13:19:54]  transpile started ...
[13:19:58]  transpile finished in 4.24 s
[13:19:58]  preprocess started ...
[13:19:58]  deeplinks started ...
[13:19:58]  deeplinks finished in 9 ms
[13:19:58]  preprocess finished in 10 ms
[13:19:58]  webpack started ...
[13:19:59]  copy finished in 4.80 s
[13:20:08]  webpack finished in 9.34 s
[13:20:08]  sass started ...
[13:20:08]  sass finished in 777 ms
[13:20:08]  postprocess started ...
[13:20:08]  postprocess finished in 32 ms
[13:20:08]  lint started ...
[13:20:08]  build dev finished in 14.56 s
[13:20:09]  watch ready in 14.72 s
[13:20:09]  dev server running: http://localhost:8100/

[13:20:14]  lint finished in 5.83 s

很棒棒， it works.