Displaying apps in Ionic View

Bendeverell · July 25, 2017, 3:32pm

Hi

I am trying to view an app on a iPad using ionic view

I tried the following steps. I am missing something?

Created an app in ionic.io
Created a blank app using ionic 3
Built for iOS
Linked app
Uploaded app.

On the iPad I have logged into Ionic view but there are no apps there. I have also added a developer cert and provisioning cert for iOS in the app settings and have added a security profile.

Are there any docs for ionic3 available?

Has anyone managed to get an ionic 3 app in Ionic view.

Thanks for your help
-Ben

Sujan12 · July 25, 2017, 3:44pm

That is not relevant for testing with Ionic View.[quote=“Bendeverell, post:1, topic:99487”]
Are there any docs for ionic3 available?
[/quote]

Open-Source UI Toolkit to Create Your Own Mobile Apps - but this doesn’t seem relevant here.[quote=“Bendeverell, post:1, topic:99487”]
Has anyone managed to get an ionic 3 app in Ionic view.
[/quote]

Yes, of course.

The docs for Ionic View are here: Ionic Docs - Ionic Documentation

Is your app visible on apps.ionic.io?
Are you logged into the same account in Ionic View as on apps.ionic.io?
Is the upload visible for your app on apps.ionic.io in the “Deploy” tab with “No Note: upload”?
Can you test with Ionic View other devices?

guadyass · July 25, 2017, 5:34pm

Hi ,
in ionic.config.json add your app_id :

{
  "name": "NAME",
  "app_id": "",
  "type": "ionic-angular"
}

Bendeverell · July 25, 2017, 6:01pm

Hi

I did not inject Deploy into the app. The app doesn’t appear in the deploy tab.
Thanks for your quick reply

Sujan12 · July 25, 2017, 6:18pm

That tab only has several functionalities - one of them is “containing” the app snapshots that are visible in Ionic View.

It seems your ionic upload wasn’t successful. Can you run it again and post the output here please?
Also run ionic info and post the output.

Bendeverell · July 25, 2017, 7:28pm

Hi Sujan

I have compiled this and got it to run in xcode. This is the upload and info output from the my mac. Its a test application from a Ionic2/3 course . Thanks for your help

Tue Jul 25 20:22: $|-bash|~/Documents/Udemy/IonicAngular/Section Code (Finished) >> ionic upload
Running app-scripts build:

[20:22:34] build dev started …
[20:22:34] clean started …
[20:22:34] clean finished in 30 ms
[20:22:34] copy started …
[20:22:34] transpile started …
[20:22:41] transpile finished in 6.91 s
[20:22:41] webpack started …
[20:22:42] copy finished in 7.59 s
[20:22:50] webpack finished in 8.31 s
[20:22:50] sass started …
[20:22:53] sass finished in 3.42 s
[20:22:53] build dev finished in 18.75 s
⠙ Requesting snapshot upload
_stream_readable.js:545
switch (state.pipesCount) {
^

TypeError: Cannot read property ‘pipesCount’ of undefined
at module.exports.Readable.pipe (_stream_readable.js:545:16)
at module.exports.ZipArchiveOutputStream._smartStream (/usr/local/lib/node_modules/ionic/node_modules/compress-commons/lib/archivers/zip/zip-archive-output-stream.js:184:11)
at module.exports.ZipArchiveOutputStream._appendStream (/usr/local/lib/node_modules/ionic/node_modules/compress-commons/lib/archivers/zip/zip-archive-output-stream.js:96:20)
at module.exports.ArchiveOutputStream.entry (/usr/local/lib/node_modules/ionic/node_modules/compress-commons/lib/archivers/archive-output-stream.js:88:10)
at module.exports.ZipStream.entry (/usr/local/lib/node_modules/ionic/node_modules/zip-stream/index.js:157:49)
at Zip.append (/usr/local/lib/node_modules/ionic/node_modules/archiver/lib/plugins/zip.js:53:15)
at Archiver._moduleAppend (/usr/local/lib/node_modules/ionic/node_modules/archiver/lib/core.js:172:16)
at Archiver._onQueueTask (/usr/local/lib/node_modules/ionic/node_modules/archiver/lib/core.js:370:8)
at /usr/local/lib/node_modules/ionic/node_modules/async/dist/async.js:4069:9
at Object.process (/usr/local/lib/node_modules/ionic/node_modules/async/dist/async.js:2317:17)
Tue Jul 25 20:22: $|-bash|~/Documents/Udemy/IonicAngular/Section Code (Finished) >>
Tue Jul 25 20:23: $|-bash|~/Documents/Udemy/IonicAngular/Section Code (Finished) >> ionic info

global packages:

@ionic/cli-utils : 1.5.0
Ionic CLI        : 3.5.0

local packages:

@ionic/app-scripts              : 1.0.0
@ionic/cli-plugin-ionic-angular : 1.3.2
Ionic Framework                 : ionic-angular 2.0.0-rc.5

System:

Node       : v8.0.0
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b 
ios-deploy : 1.9.1 
ios-sim    : not installed
npm        : 5.3.0

Tue Jul 25 20:23: $|-bash|~/Documents/Udemy/IonicAngular/Section Code (Finished) >>

Sujan12 · July 25, 2017, 8:29pm

I found this:

github.com/ionic-team/ionic-cli

TypeError: Cannot read property 'pipesCount' of undefined

opened 02:56PM - 31 May 17 UTC

closed 10:25PM - 10 Jul 17 UTC

jgw96

_From @unipheas on May 31, 2017 7:37_ **Ionic version:** (check one with "x") … [ ] **1.x** (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) [ ] **2.x** [x] **3.x** **I'm submitting a ...** (check one with "x") [x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/ **Current behavior:** I created a new app, installed my platforms, linked the app, ran resources, then tried to do 'ionic upload'. It's giving me an error of '_stream_readable.js:545 switch (state.pipesCount) { TypeError: Cannot read property 'pipesCount' of undefined .... **Expected behavior:** Successfully upload to Ionic Services **Steps to reproduce:**  **Related code:** ``` _stream_readable.js:545 switch (state.pipesCount) { ^ TypeError: Cannot read property 'pipesCount' of undefined at module.exports.Readable.pipe (_stream_readable.js:545:16) at module.exports.ZipArchiveOutputStream._smartStream (/usr/local/lib/node_modules/ionic/node_modules/compress-commons/lib/archivers/zip/zip-archive-output-stream.js:184:11) at module.exports.ZipArchiveOutputStream._appendStream (/usr/local/lib/node_modules/ionic/node_modules/compress-commons/lib/archivers/zip/zip-archive-output-stream.js:96:20) at module.exports.ArchiveOutputStream.entry (/usr/local/lib/node_modules/ionic/node_modules/compress-commons/lib/archivers/archive-output-stream.js:88:10) at module.exports.ZipStream.entry (/usr/local/lib/node_modules/ionic/node_modules/zip-stream/index.js:138:49) at Zip.append (/usr/local/lib/node_modules/ionic/node_modules/archiver/lib/plugins/zip.js:53:15) at Archiver._moduleAppend (/usr/local/lib/node_modules/ionic/node_modules/archiver/lib/core.js:172:16) at Archiver._onQueueTask (/usr/local/lib/node_modules/ionic/node_modules/archiver/lib/core.js:370:8) at /usr/local/lib/node_modules/ionic/node_modules/async/dist/async.js:4045:9 at process (/usr/local/lib/node_modules/ionic/node_modules/async/dist/async.js:2316:17) ``` **Other information:** **Ionic info:** (run `ionic info` from a terminal/cmd prompt and paste output below): ``` global packages: @ionic/cli-utils : 1.2.0 Cordova CLI : 7.0.1 Ionic CLI : 3.2.0 local packages: @ionic/app-scripts : 1.3.7 @ionic/cli-plugin-cordova : 1.2.1 @ionic/cli-plugin-ionic-angular : 1.2.0 Cordova Platforms : android 6.2.3 ios 4.4.0 Ionic Framework : ionic-angular 3.3.0 System: Node : v8.0.0 OS : macOS Sierra Xcode : Xcode 8.3.2 Build version 8E2002 ios-deploy : 1.9.1 ios-sim : 5.0.13 ``` _Copied from original issue: ionic-team/ionic#11872_

So either use Node 6.x or 8.1.2+ for this to work.

Bendeverell · July 25, 2017, 9:11pm

Thanks Sujan

As advised I updated node and the process seems to have run correctly.

Tue Jul 25 22:06: $|-bash|~/Documents/Udemy/IonicAngular/Section Code (Finished) >> ionic info

global packages:

@ionic/cli-utils : 1.5.0
Ionic CLI        : 3.5.0

local packages:

@ionic/app-scripts              : 1.0.0
@ionic/cli-plugin-ionic-angular : 1.3.2
Ionic Framework                 : ionic-angular 2.0.0-rc.5

System:

Node       : v8.2.1
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b 
ios-deploy : 1.9.1 
ios-sim    : not installed
npm        : 5.3.0

Tue Jul 25 22:06: $|-bash|~/Documents/Udemy/IonicAngular/Section Code (Finished) >> ionic upload
Running app-scripts build:

[22:07:30] build dev started …
[22:07:30] clean started …
[22:07:30] clean finished in 25 ms
[22:07:30] copy started …
[22:07:30] transpile started …
[22:07:33] transpile finished in 2.95 s
[22:07:33] webpack started …
[22:07:34] copy finished in 3.86 s
[22:07:42] webpack finished in 9.14 s
[22:07:42] sass started …
[22:07:45] sass finished in 2.09 s
[22:07:45] build dev finished in 14.27 s
Requesting snapshot upload - done!
Uploading snapshot - done!
[OK] Uploaded snapshot 0f703f0a-eedc-4cfd-8f12-064d0ce9f50f!
Tue Jul 25 22:08: $|-bash|~/Documents/Udemy/IonicAngular/Section Code (Finished) >>

Sujan12 · July 25, 2017, 9:19pm

Great. Now it should appear in “Deploys” on apps.ionic.io and also in Ionic View. Lets us know if this worked.

Bendeverell · July 25, 2017, 9:27pm

Perfect thanks for your help. I am new to ionic but so far looking good. I see the app on Ionic View on my ipad.

Bendeverell · July 26, 2017, 5:43am

Hello

I have got the app to work on my apple iphone/ipad. The android package seems to have failed.

BUILD STATUS PLATFORM STARTED BUILD TIME
#2 Failed Android 2017-07-26 6:36 AM
OUTPUT
#1 Failed Android 2017-07-25 10:19 PM
OUTPUT

the output message is

ANDROID_HOME=/opt/android-sdk
JAVA_HOME=/usr/lib/jvm/java-8-oracle
Error: Could not find gradle wrapper within Android SDK. Might need to update your Android SDK.
Looked here: /opt/android-sdk/tools/templates/gradle/wrapper

I download Android studio yesterday afternoon so hope its the latest version.

The output from the command line looks ok.

Wed Jul 26 06:35: $|-bash|~/Documents/Udemy/IonicAngular/Section Code (Finished) >> ionic package build
? What platform would you like to target: android
Running app-scripts build:

[06:35:52] build dev started …
[06:35:52] clean started …
[06:35:52] clean finished in 46 ms
[06:35:52] copy started …
[06:35:52] transpile started …
[06:36:00] transpile finished in 7.84 s
[06:36:00] webpack started …
[06:36:01] copy finished in 9.40 s
[06:36:09] webpack finished in 9.39 s
[06:36:09] sass started …
[06:36:12] sass finished in 2.81 s
[06:36:12] build dev finished in 20.16 s
Requesting snapshot upload - done!
Uploading snapshot - done!
[OK] Uploaded snapshot 7de64d90-4019-428c-abee-513066509c36!
Requesting project upload - done!
Uploading project - done!
Queuing build - done!
[OK] Build 2 has been submitted!
Wed Jul 26 06:36: $|-bash|~/Documents/Udemy/IonicAngular/Section Code (Finished)

Is there an additional step I have missed?

Thanks for your help

Ben

Sujan12 · July 26, 2017, 9:27am

Post your ionic info output please.

Bendeverell · July 26, 2017, 9:41am

Hello

Please find the ionic info below.

Thanks for your help

Wed Jul 26 06:57: $|-bash|~/Documents/Udemy/IonicAngular/Section Code (Finished) >> ionic package list
Retrieving package builds - done!

id | status | platform | profile | mode | started | finished

[OK] Showing 2 of your latest builds.

Wed Jul 26 06:57: $|-bash|~/Documents/Udemy/IonicAngular/Section Code (Finished) >> ionic info

global packages:

@ionic/cli-utils : 1.5.0
Ionic CLI        : 3.5.0

local packages:

@ionic/app-scripts              : 1.0.0
@ionic/cli-plugin-ionic-angular : 1.3.2
Ionic Framework                 : ionic-angular 2.0.0-rc.5

System:

Node       : v8.2.1
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b 
ios-deploy : 1.9.1 
ios-sim    : not installed
npm        : 5.3.0

Wed Jul 26 10:40: $|-bash|~/Documents/Udemy/IonicAngular/Section Code (Finished)

Bendeverell · July 26, 2017, 10:20am

Hi

I have a successful android build. I ran the following command to add the platform for android.

ionic cordova platform add android

I wrongly assumed when running the ionic package build command with the android option a sub folder under platforms would be created.

My understanding is a limited. If I run the command > ionic package build
-IOS
and
-Android
and then run > ionic upload. Will both versions be able in Ionic View?

Thanks in advance for your help

Ben

Wed Jul 26 10:40: $|-bash|~/Documents/Udemy/IonicAngular/Section Code (Finished) >> ionic cordova platform add android
? The plugin @ionic/cli-plugin-cordova is not installed. Would you lik
e to install it and continue? Yes

npm install --save-dev --save-exact @ionic/cli-plugin-cordova@latest
Running command - done!
cordova platform add android --save
Running command - done!
Using cordova-fetch for cordova-android@~6.2.2
Adding android project…
Creating Cordova project for the Android platform:
Path: platforms/android
Package: com.ionicframework.favoritequotes
Name: Favorite_Quotes
Activity: MainActivity
Android target: android-25
Subproject Path: CordovaLib
Android project created with cordova-android@6.2.3
Installing “cordova-plugin-console” for android
Installing “cordova-plugin-device” for android
Installing “cordova-plugin-splashscreen” for android
Installing “cordova-plugin-statusbar” for android
Installing “cordova-plugin-whitelist” for android

           This plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version, you do *not* need this plugin since the whitelist will be built in.

Installing “ionic-plugin-deploy” for android
Installing “ionic-plugin-keyboard” for android
–save flag or autosave detected
Saving android@~6.2.3 into config.xml file …
Copying default image resources into ./resources/android - done!
Wed Jul 26 10:59: $|-bash|~/Documents/Udemy/IonicAngular/Section Code (Finished) >> ionic package build
? What platform would you like to target: android
Running app-scripts build:

[11:06:11] build dev started …
[11:06:12] clean started …
[11:06:12] clean finished in 10 ms
[11:06:12] copy started …
[11:06:12] transpile started …
[11:06:31] transpile finished in 19.34 s
[11:06:31] webpack started …
[11:06:36] copy finished in 23.96 s
[11:06:46] webpack finished in 14.91 s
[11:06:46] sass started …
[11:06:54] sass finished in 7.68 s
[11:06:54] build dev finished in 42.75 s
Requesting snapshot upload - done!
Uploading snapshot - done!
[OK] Uploaded snapshot 97dbc20e-323f-45f4-bebd-cebe41d0036f!
Requesting project upload - done!
Uploading project - done!
Queuing build - done!
[OK] Build 3 has been submitted!
Wed Jul 26 11:07: $|-bash|~/Documents/Udemy/IonicAngular/Section Code (Finished) >> ionic package list
Retrieving package builds - done!

id | status | platform | profile | mode | started | finished

[OK] Showing 3 of your latest builds.

Wed Jul 26 11:08: $|-bash|~/Documents/Udemy/IonicAngular/Section Code (Finished) >>

Sujan12 · July 26, 2017, 11:29am

Ionic View has nothing to do with ionic package:
Ionic View basically just shows /www in an app on your phone. Running ionic upload once makes your app available on all devices that can run an Ionic View app.
ionic package takes /www and builds it into its own app that you can install on phones.

You Android build was failing on ionic package because it needs some input for which cordova-android version to use. As oyu hadn’t added the Android platform locally, it didn’t have that information. When you run ionic info now again, you will see that there is additional information available.

Bendeverell · July 26, 2017, 11:31am

Hi

I have this app working on the xcode and android studio emulators and within Ionic View on my physical devices. Thanks for your help over the last couple of days.

Best wishes

Ben