Angular 2/Ionic 2 Feedback

[imhoffd]

I'm asking for feedback on the Angular 2/Ionic 2 support in the Ionic Cloud client. Using this library is recommended for Ionic 2 projects, and will be the future of what once was the ionic-platform-web-client. For usage, see the readme for now. The exported classes from '@ionic/cloud-angular' are the same as Push, Auth, User, etc. from the old client, except that they hook into the Angular 2 dependency injection framework (so there's no need to instantiate them).

The cloud client may differ from what you're used to in the ionic-platform-web-client. Although written as a migration guide for v1 apps, this may help.

1. What did you like?
2. What did you dislike/what could be improved?
3. Did you try using the client in ES6 or Typescript?
4. Anything else?

[Maistho]

Does this mean that this (fixed and with a much better config system) version will not be recommended for Ionic 1 projects?

I feel like All Ionic 1 projects should start using the new version as well, even if it means that they will need to update their configs. Just make sure it's well documented.

edit: I'm not sure about how you would use the Angular2 version in Ionic 1 (guessing you can't), but the non-angular version should really be recommended for everyone, regardless of Ionic version.

[imhoffd]

@Maistho So, it's a little confusing right now. I will say that we are committed to supporting both Ionic 1 and 2. Ionic 1 will continue to use the client without the Angular 2 integration (thus, this repo is only for Ionic 2). The vanilla client will be available in ionic-cloud. The vanilla client will continue to be updated and be used in Ionic 1 (directly) & 2 (under the hood). ionic-platform-web-client will stick around for a little while because of legacy Ionic CLI versions using bower to install it by that name, so we'll keep the master branch where it is.

The work that was done on the config system will be a breaking change for Ionic 1 apps, so I took this opportunity to change the package name as well. We will be providing a migration guide with the official release (hopefully this week) and we recommend updating as soon as it is released.

[Maistho]

@dwieeb: Great! That's pretty much what I wanted to hear. 😄

[sagivf]

@dwieeb So far this is looking very good, got it to work right off the bat, which doesn't always happen...
I'll add more feedback as I go.

How safe is using this tough? As safe as using Ionic2(beta) in general?
I would give this more PR, I only stumbled upon it going over https://github.com/driftyco/ionic-platform-web-client issues.

[Manduro]

Deploy and push working like a charm here!

[imhoffd]

@sagivf I'm glad you're eager to start using it! But, the usage of services, especially auth and user, may change yet. It'd be best to wait for the full release and the full documentation before using it in a production app. All of this is still in beta, just like Ionic 2.

@Manduro Great to hear! 🍻

[tamerbak]

@dwieeb What about documentation ? Push doc does not talk about the new platform is is normal ?
URL : http://docs.ionic.io/v2.0.0-beta/docs/push-full-setup

[ericb]

@tamerbak This is not an official release, so there are no official docs yet. The readme can get you initially started if you want to test things out.

[cklanac]

So far the library works great, I created a simple app with signup(), login(), logout() etc... But if you're looking for feedback/enhancements, I have one question/request.

Question. How can I react or subscribe to authentication changes? I looked at the auth:token-changed in auth.ts event, but I can't figure out how to react to it. Plus, I'm not sure it fires on logout().

Request. Can the isAuthenticated() method be Observable or Rx Subject so we can subscribe to changes? It would make it much easier to update sections that depend on authentication like so.

Hide logout button if user is NOT logged in.
<button menuClose ion-item [hidden]="!isLoggedIn" (click)="logout()"><ion-icon name="log-out"></ion-icon> Logout </button>

Subscribe to changes to login status
this.appUser.auth$.subscribe((isLoggedIn: boolean) => {this.isLoggedIn = isLoggedIn;}

Currently, I need to manually update my isLoggedIn BehaviorSubject on signup, login, logout. It would be great if I could just subscribe to the existing isAuthenticated status. Or maybe there's a better way to do it?

[cklanac]

Another question/request...
My project is open-source so I don't want to hardcode the app_id in the project. I'd like to exclude .io-config.json or ionic.config.json from git and import the the app_id into the project.

Question. How can I import or require .io-config.json or ionic.config.json? I've tried several variations like the following but I can't convince Typescript/ES6 to import a JSON file.

import * as config from '../ionic.config.json!';
import * as config from '../ionic.config.json!json';
import * as config from 'json!../ionic.config.json';

Request. The library should automatically load the app_id from .io-config.json or ionic.config.json

[imhoffd]

@cklanac It does fire on logout. The data.token will be undefined. Don't subscribe to that event yet. I will be fleshing out events and there will be auth:login, auth:logout, etc. The ideal case is to subscribe to an observable stream, as you mentioned.

The core of the cloud client is essentially vanilla Typescript, so we'd need to wrap isAuthenticated() and methods like it in $q for angular 1 and observables for Angular 2. I haven't gotten around to this, but would very much like to.

We decided on having the app_id in the source code (not use a config file) after a lengthy discussion (https://github.com/driftyco/ionic-platform-web-client/issues/41). As far as I know there isn't a way for typescript to load a json file. Right now it would need to be up to your build system.

I don't think there's a standardize way of handling config in Angular 2, but when there is, we'd switch to it. Open to suggestions, of course.

[Maistho]

@clanac depending in what loader you are using, you might be able to use require to import the json. I've done that before

var config = require('my_config.json');

Another option could perhaps be to load the json using http, but that might happen to late during the startup for your needs.

[cklanac]

Thanks!
I'll follow the Investigate Observables issue #4

As far as configs and loading json, it looks like they have a promising solution for importing non-ts files in the next release (microsoft/TypeScript#6615). In the meantime, I'm going to use require (which @Maistho just mentioned 👍 ) and is discussed TypeStrong/tsify#88, and TypeStrong/tsify#98

Define require so TS doesn't complain

// require.d.ts
declare function require(path: string): any;

Reference the definition, require the config and update cloud settings

// app.ts
/// <reference path="../typings/require.d.ts"/>
const config  = require('../ionic.config.json');
const cloudSettings: CloudSettings = {
  'core': {
    'app_id':config.app_id 
  }
};

The https://github.com/driftyco/ionic-cloud/wiki/Migration-Guide says you're dropping .io-config.json. Is ionic.config.json is sticking around?

[ericb]

@cklanac Yup, ionic.config.json is sticking around. The .io-config.json file was specific to our cloud configuration, and is being removed in favor of just having the config passed directly to our client. 🍻

[rajayogan]

@tamerbak Visit here to get details on push notifications using ionic-cloud-angular bro.. :)

http://tphangout.com/ionic-2-push-notifications/

Good luck.. 👍

[imhoffd]

@rajayogan I'm gonna say right away that your post contains a lot of legacy code and practices that I'm confident won't work with the latest 0.0.14 release and will be out of date when our new documentation is released.

[rajayogan]

@dwieeb okay.. I will pull the latest release and update the post accordingly. Thanks for the headsup bro.. 👍

[TrikinCurt]

Ok, I have deploy working, it was easy and works great. So, yay is my feedback :) I am trying to use the deploy.watch though, for the life of me I do not see how it works?

[imhoffd]

@TrikinCurt yay! As for deploy.watch(), you can just call it and then you have to use the event emitter to listen to the deploy:update-ready event.

[ProWagerSystems]

Any idea how to correct the issues below, or should I just ignore them?

E:\nodejs\mystery>npm install --save @ionic/cloud
mystery@ E:\nodejs\mystery
+-- UNMET PEER DEPENDENCY @angular/core@^2.0.0-rc.1
+-- graceful-fs@4.1.4
+-- UNMET PEER DEPENDENCY reflect-metadata@0.1.2
+-- UNMET PEER DEPENDENCY rxjs@5.0.0-beta.2
`-- UNMET DEPENDENCY zone.js@^0.6.11

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.13
npm WARN @ionic/cloud-angular@0.0.15 requires a peer of @angular/core@^2.0.0-rc.1 but none was installed.
npm WARN @ionic/cloud-angular@0.0.15 requires a peer of rxjs@^5.0.0-beta.6 but none was installed.
npm WARN angular2@2.0.0-beta.15 requires a peer of reflect-metadata@0.1.2 but none was installed.
npm WARN angular2@2.0.0-beta.15 requires a peer of zone.js@^0.6.10 but none was installed.
npm WARN mystery@ No repository field.
npm WARN mystery@ No license field.

[sagivf]

Since NPM3 peer dependencies aren't automaticlly installed to yes, you need to npm install @angular/core@^2.0.0-rc.1 reflect-metadata@0.1.2 rxjs@5.0.0-beta.2 zone.js@^0.6.11 --save

[imhoffd]

@MyWek @sagivf Those warnings shouldn't occur in an Ionic project, though, as all the peer dependencies should be already installed. I will fix our version requirements in package.json in the next version to allow a more flexible and correct range. For now, you can ignore these warnings and everything should work just fine.

[ProWagerSystems]

Hi, Thanks for that. By any chance is there Deploy sample code for Ionic V2 Beta with Javascript? I'm trying to use the sample code on the migration guide, but am having trouble (3 frustrating hours to be exact) getting it to work: https://github.com/driftyco/ionic-cloud/wiki/Migration-Guide. I'm sort of wishing I didn't choose to use V2 Beta in my project at this point, it is very hard to find sample code. Everything is for older versions or typescript... Thanks for your help!

[imhoffd]

@MyWek The Migration Guide isn't for migrating Ionic 1 to Ionic 2. It's for people who have ionic-platform-web-client in their v1 projects and are looking to upgrade to the new @ionic/cloud. Sample code from the migration guide won't work in v2. If you're having trouble, I recommend waiting a short while for our new docs, which will feature full examples and API documentation. However, the examples will still be in Typescript. The Ionic framework is only providing examples in Typescript for v2, and so is the Ionic Cloud. If you're familiar with Angular 2, you can easily do the translation to ES6.

[justinschuldt]

I've been using deploy in an Ionic 2 TypeScript project for ~2 weeks and it's been working great so far. Just wanted to drop in and say so far so good!

[grabtasker]

I used this ionic-cloud-angular for function "push notification" in ionic2 (using sample code ionic-conference-app), but found no push message to the device. Everything seems correct as I revised once again, does this integration work well at this time?

[imhoffd]

@justinschuldt Thanks! Glad to hear. We're making some finishing touches next week and then we should be good to go pretty soon.

@grabtasker We'll have official documentation out soon that should make this a bit easier to integrate into your app.

[SteveKennedy]

I'm starting a brand new Ionic 2 project, with Angular 2 and Typescript. Should I use the ionic-platform-web-client, ionic-platform-web-client-angular, @ionic/cloud-angular, @ionic/cloud, or @ionic/platform-client in order to use the Ionic cloud/platform?

[Maistho]

@SteveKennedy for a brand new project you should use @ionic/cloud-angular for Ionic 2 and @ionic/cloud for Ionic 1.

[SteveKennedy]

@Maistho. Thank you. Does @ionic/cloud-angular support Analytics? That's like the most important piece to me.

[imhoffd]

@SteveKennedy Answered you on twitter, but I will answer again so others can see. Analytics will be coming after our initial release. We just need to rethink how we're doing it in the cloud client.

[mariohmol]

Cant make a @ionic/cloud-angular work .. anyone has a project example?