2. 程式人生 > >ionic2 ionic3 專案建立遇到的問題總結

ionic2 ionic3 專案建立遇到的問題總結

阿新 • • 發佈：2019-02-07

真是一覺醒來，就又有新版本釋出啊。

這一次的總結主要針對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 
 
[email protected]: Please update to the latest object-keys
        npm WARN prefer global [email protected] should be installed with -g

        > [email protected] 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 [email protected]

好傢伙，是不限制時間了，折騰了十來次，能把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

> [email protected] 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\[email protected]@    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! [email protected] 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 [email protected] 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

> [email protected] 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! [email protected] 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 [email protected] 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/[email protected] › [email protected] › [email protected] › [email protected] › [email protected]^3.0.2 (02:21:41)
    → @ionic/[email protected] › [email protected] › [email protected] › [email protected] › [email protected]^2.1.1 (12:33:51)


講道理上面的好像是更新記錄之類的。所以不更新就是等著踩坑。= =，就像中永恆之藍的病毒一樣，不更新就踩坑。

終於，看了近十頁ionic serve 的issue 之後，自己電腦的ionic serve 能夠work了。

$ ionic serve

> [email protected] 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.

相關推薦

ionic2 ionic3 專案建立遇到的問題總結

真是一覺醒來，就又有新版本釋出啊。 這一次的總結主要針對ionic3，當然也適用於ionic2. 不一定面面俱到，但是希望看到這篇總結開發者能夠少走一些彎路。 First of all,當然是安裝最新版的ionic了。 npm install -g ionic 可以用 i

django專案所遇問題總結

2. 關於設定static靜態檔案，樣式失效問題 原因： 可能開啟多個埠號，頁面顯示訪問的不是已經設定了static的模板，所以，樣式沒有顯示   3. models模型中gender欄位的選擇設定 choice = [ (1, '男'), (2, '女') ] gender = mo

node.js、vue專案建立以及git常用指令總結

node.js、vue專案建立以及git常用指令總結 node.js指令 cd… 返回上級 dir 檢視該資料夾下有哪些檔案 node 進入node.js執行環境 .exit 退出node.js執行環境 或者兩側ctrl+c md f

IntelliJ IDEA for Mac 首次建立web專案總結（tomcat配置及專案建立）

5.點選 Modules -> 選中專案“ JavaWeb ” -> 切換到  Dependencies 選項卡 -> “+ ”，選擇 “ JARs or directories ”。可看到Java Web專案需要依賴的 JDK 與 Tomcat包（看不到說明IDEA的JDK或Tomcat沒

ionic3專案實戰教程一（建立專案、目錄分析、生成apk、根元件app分析）

前言： 使用ionic3+angular4+typescript4+cordova8+es6寫app專案其實是一件相當困難的事情。不僅需要強大的英文文件閱讀能力，更需要耐心和毅力！因為這條技術路線不

建立ionic3專案

一、前言：要想建立一個ionic3的專案的環境配置：（2）npm或cnpm 由於npm的伺服器在國外，所以安裝依賴的時候速度可能會很慢，這時候可以用cnpm來代替（安裝淘寶映象命令：npm instal

ionic2專案建立遇到的問題

在ionic2專案的建立過程中，遇到了不少問題，前前後後花了不少時間才解決。 在網上查到，可能是npm的版本問題，但是也只是可能。所以我就先照著簡單的方法做了。比如，直接跳過npm這個步驟。 使用命令列建立ionic專案 ionic start --v2 myApp ta

Ionic3安裝和專案建立

安裝前請注意各個版本的相容問題，以下版本親測可用。【安裝過程中注意網路必須暢通】   1. 請預先安裝好nodejs (官網：https://nodejs.org/en/) 【開啟命令列測試】   2. 安裝淘寶映象命令  npm install -g cnpm --r

ionic3 ion-slides遇坑

www info 網上 ets https sets 切換頁面 官網 頁面 不想吐槽 ionic-slides 的組件，是個巨坑。。。切換頁面以後再返回當前頁面， 不能自動播放，網上的解決方案都是沒用的（親測，後臺獲取的數據） ... 不信邪的寶寶們可以去試試。。建議

ionic3 專案常用

ionic cordova platform add android ionic cordova build android —prod 【debug版本，無需簽名】 ionic cordova build android --prod --release 【釋出版，需要簽名（要使用jarsigner簽

Libgdx Developer's Guide(Libgdx開發者手冊)-2（專案建立、執行和除錯）

專案建立 由於它的Android 和HTML5/GWT後臺，libgdx 與Eclipse緊密結合。本章討論怎樣在Eclipse中建立一個libgdx專案。如果你使用的是IntelliJ, 請檢視guide to use libgdx with IntelliJ IDEA 。如果你更喜歡使用其他

Spring整合Struts2和Hibernate+Maven（一）之Maven專案建立

趁著畢設的功夫，寫一些東西。也算是記錄個人平時畢設完成的過程。 建立專案 工具：intellij idea+JDK1.6+Maven 第一步：New Project ->點選左側maven ->勾選Create fromarchetype 後選擇maven-archet

Node.js部落格系統--2.專案建立、安裝初始化和第一個請求的實現

技術框架 專案初始化 開啟vscode，新建一個blog資料夾，在控制檯npm init，除了出現package name:(blog)的時候需要填寫一個blog，其他都只需要回車就可以 接著執行以下命令 分別使用 npm i --save ~;安裝下列包

Maven 聚合專案建立

第一步：建立父工程 右擊空白處，new 建立新的 maven 工程   這裡跳過預設的骨架，使用自動義的骨架   這裡父工程必須使用pom打包方式     第二步：建立子工程 右擊空白處，new建立新maven工程   跳

Android NDK開發 Android JNI專案建立

本篇文章只介紹android ndk在windows系統的編譯環境配置方法 更新於2015年1月11日 將更加詳細的介紹一個基本的Android Jni專案的建立。 步驟一：下圖是必須的，配置好這一步驟就可以進行Android JNI專案的建立了。 步驟二：新建一個Andr

springboot 專案建立步驟

1. 建立一個普通的Maven工程，不需要選擇任何模板 2. 匯入spring boot 父工程依賴以及新增web依賴 父工程依賴 <parent> <groupId>org.springframework.boot</groupId

使用Gradle管理專案建立第一個springboot專案

xl_echo編輯整理，歡迎轉載，轉載請宣告文章來源。更多IT、程式設計案例、資料請聯絡QQ：1280023003 百戰不敗，依不自稱常勝，百敗不頹，依能奮力前行。——這才是真正的堪稱強大！！ 使用gradle管理專案和maven管理專案最大的區別在於它的依賴配置，如果不熟

maven專案建立pom xml報無法解析org apache maven plugins maven resource

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

Cocos2d-x專案建立之 靜態庫生成

第一步：建立Cocos2d-x專案 Mac環境下，提前配置好Cocos2d-x環境，使用終端建立cocos2d-x原始碼專案。建立專案命令列， cocos new -l cpp MyFirstDemo 如圖： 生成專

Cocos2d-x專案建立之 原生ios專案匯入Cocos2d框架

上一章： Cocos2d-x專案建立之 靜態庫生成 第一步，“Cocos2d-X原始碼”和“預編譯靜態庫”準備 Cocos2d-X原始碼可在官網下載，如： Cocos2d-X 預編譯靜態庫生成方法： Cocos2d-x專案建立之 靜態庫生成