'개발/Ionic'에 해당되는 글 4건

starter template에 있는 app을 아래와 같이 release옵션을 줘서 배포를 해보았다.

$ ionic cordova run android --prod --release

빌드 성공 후 퍼센테이지가 올라가는 걸로 보아 성공한 것처럼 보이지만, 100%가 되는 순간 아래와 같은 에러를 만날 수 있는데, apk가 signing되지 않았을 때 인증서가 없어서 발생하는 에러고, signing을 하라고 안내를 해준다.

Failure [INSTALL_PARSE_FAILED_NO_CERTIFICATES]
Sign the build using '-- --keystore' or '--buildConfig' or sign and deploy the unsigned apk manually using Android tools.

emulator에 테스트 용도로 올리고 싶은 경우에는 --release옵션을 빼고 올리면 잘 올라간다.

공식홈에 Document를 보고 하나하나 따라해보는데 갑자기 여기서 막혀서 몇시간 삽질한 것 같다.

starter template에 포함된 앱을 android emulator로 배포해보려고 아래와 같은 키워드를 입력해보았다.

$ ionic cordova run android --prod

빌드는 성공했다고 나오지만 아래와 같은 에러메시지가 발생하며, emulator에 앱이 올라오지 않았다.

No target specified and no devices found, deploying to emulator

Error: Cannot read property 'replace' of undefined

[ERROR] An error occurred while running cordova run android --release (exit code 1).

맨 윗줄은 target device를 찾을 수 없다는 에러이고, 밑에 두줄은 device가 없어서 부가적으로 발생하는 에러이다.

emulator를 띄우면 해결이 되지만, emulator을 띄워도 해결이 되지 않는 경우는 개발자 옵션에서 usb 디버깅 옵션을 켜주어야 한다.

ionic serve를 이용해 웹서버 및 페이지를 확인하고, android 에뮬레이터에 올려보려고 했는데, 아래와 같은 에러가 발생하였다.

Failed to restore plugin "cordova-plugin-statusbar" from config.xml. You might need to try adding it again. 
Error: Failed to fetch plugin https://github.com/apache/cordova-plugin-statusbar.git via registry.
Probably this is either a connection problem, or plugin spec is incorrect.
Check your connection and plugin name/version/URL.
Error: cmd: Command failed with exit code 1 Error output:
npm ERR! code 128
npm ERR! Command failed: C:\Program Files\Git\cmd\git.EXE submodule update -q --init --recursive
npm ERR! fatal: 'submodule' appears to be a git command, but we were not
npm ERR! able to execute it. Maybe git-submodule is broken?
npm ERR!

npm ERR! A complete log of this run can be found in:
npm ERR!     ---_logs\2017-10-11T05_02_42_754Z-debug.log

대충 해석을 해보면, cordova-plugin-statusbar라는 플러그인이 뭔가 문제가 있는 것 같다. 

이런 경우 아래 명령어를 통해 해당 플러그인을 추가해주면 된다.

$ cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git

ionic app이 initialize되는 과정에서 npm install만 하기 때문에, 발생하는 문제이다.

app 폴더에 가서 package.json파일을 열어보면 아래와 같이 "devDependencies"라고 적혀있는 부분이 별도로 존재하는데, npm install 명령어로 설치 시에 얘네들이 빠져서 설치가 되버림.

{
  "name": "helloIonic",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.4.3",
    "@angular/compiler": "4.4.3",
    "@angular/compiler-cli": "4.4.3",
    "@angular/core": "4.4.3",
    "@angular/forms": "4.4.3",
    "@angular/http": "4.4.3",
    "@angular/platform-browser": "4.4.3",
    "@angular/platform-browser-dynamic": "4.4.3",
    "@ionic-native/core": "4.3.0",
    "@ionic-native/splash-screen": "4.3.0",
    "@ionic-native/status-bar": "4.3.0",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.7.1",
    "ionicons": "3.0.0",
    "rxjs": "5.4.3",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.0.0",
    "typescript": "2.3.4"
  },
  "description": "An Ionic project"
}

아래 명령어를 입력하여, devDependencies에 있는 모듈들도 설치를 해주면 해결이 된다.

$ npm install --only=dev

매번 저렇게 해주는 게 귀찮을 수 있으니, 프로젝트를 자주 만들어야 한다면, 아예 글로벌로 설치해버리는 것도 답이다.