ionic2 ionic3 项目创建遇到的问题总结
来源:互联网 发布:陕西大数据公司好不好 编辑:程序博客网 时间:2024/06/06 03:52
真是一觉醒来,就又有新版本发布啊。
这一次的总结主要针对ionic3,当然也适用于ionic2.
不一定面面俱到,但是希望看到这篇总结开发者能够少走一些弯路。
First of all,当然是安装最新版的ionic了。
npm install -g ionic
可以用
ionic info
查看一系列依赖工具的版本。
Fine,现在开始创建ionic项目了。一切看起来的风平浪静的样子。
还是那句用烂了的老命令。
ionic start ionic3-angular4 --v2
当然,虽然是ionic3,但是还是要使用 --v2 这个命令。
不信的话,装好了去项目文件里的 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" }
$ 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 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.14393npm 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.5npm ERR! npm v3.10.10npm ERR! code ELIFECYCLEnpm 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 1npm 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-worldnpm 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.nodeNode Sass could not find a binding for your current environment: Windows 64-bit with Node.js 6.xFound bindings for the following environments: - Windows 64-bit with Node.js 6.xThis 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.14393npm 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.5npm ERR! npm v3.10.10npm ERR! code ELIFECYCLEnpm 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 1npm 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_modulesnpm clean cachenpm updatecnpm 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.
阅读全文
1 0
- ionic2 ionic3 项目创建遇到的问题总结
- ionic2项目创建遇到的问题
- cordova 打包ionic2项目遇到的坑
- maven +SpringMVC项目的创建中遇到的问题总结
- ionic2 遇到的一些小问题
- Ionic2安装的与项目创建
- Ionic跨平台项目(八)ionic2、ionic3命令大全
- ionic3项目创建 运行教程
- Ionic3安装和项目创建
- Ionic3 安装git路径插件遇到的问题
- ionic3/ionic2 新建页面
- Ionic2升级到Ionic3
- Ionic2常用命令 Ionic3命令
- ionic2/ionic3自定义Action Sheets和Alerts组件的样式
- intellij创建maven项目遇到的问题
- ionic创建项目遇到的一些问题
- 创建maven项目及遇到的问题
- 创建maven web项目遇到的问题
- Java基础之控制流程及数组
- Java中@SuppressWarnings的使用
- 909422229_单例模式的七种写法
- 数字、时间等单位换算工具类收集
- Win32 串口编程(四)
- ionic2 ionic3 项目创建遇到的问题总结
- poj3087 Shuffle'm Up
- CentOS-VIM显示行号
- git 错误异常
- Swift
- QMainWindow 和 QWidget 设置layout
- USACO
- Linux启动过程(开机启动顺序)
- FFmpeg Basics阅读笔记1:介绍