How to use Ionic Cloud with Angular 1.5

Question

I've reached a bit of a dead-end and I am not sure how to proceed. I have developed my Web Application on Angular 1.5.9. I have just now ported over my web app to the Ionic App using ionic start app_name. Everything is working as it should. However, my next step is to set-up the deploy and ionic services. At first I tried adding ionic add ionic-platform-web-client. But since its deprecated and from reading the recent docs, I understood I should now use ionic cloud. So I installed ionic cloud using npm install @ionic/cloud-angular --save. I then got the dependency error saying that:

├── UNMET PEER DEPENDENCY @angular/core@^2.1.1 || ^4.0.0

So looking into it further, I realised that I need to have Angular 2 for it and also to complete the ionic cloud configuration, I also need to update the src/app/app.module.ts file. My questions are:

How can I use Angular 2 when I am using Angular 1.5.6 for my Web App? Rewriting my Angular 1.5 app to Angular 2 is not feasible. Can I use both simultaneously? If so, how? How can I resolve this?

Any help will be great since I cannot find any info on using the latest ionic cloud with Angular 1.5. My current set-up is:

Cordova CLI: 6.5.0 
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
ios-deploy version: 1.9.1
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v7.9.0
Xcode version: Xcode 8.3.2 Build version 8E2002
Angular: 1.5.9

score 1 · Accepted Answer · answered Apr 23 '17 at 15:29

Ionic Cloud Client can be used with Ionic 1 / Angular 1.5. This is what I did:

Install Ionic Cloud:

npm install @ionic/cloud --save

Copy the files to www/lib directory:

cp node_modules/@ionic/cloud/dist/bundle/ionic.cloud.min.js www/lib

Include the link in your project’s index.html:

<script src="lib/ionic.cloud.min.js"></script>

Set the Platform to assign your app a unique app id and api key:

ionic io init

Install Caodova's deploy plugin:

cordova plugin add ionic-plugin-deploy --save

Inject Deploy dependency ionic.cloud to the Angular module:

angular.module('application', ['ionic.cloud']) ...

Do the Deploy Check using $ionicDeploy inside the .run Block of the Angular 1.5 config file.

.run(function($ionicDeploy) {
       $ionicDeploy.check().then(function(snapshotAvailable) {
                if (snapshotAvailable) {
                  // When snapshotAvailable is true, you can apply the snapshot
                  $ionicDeploy.download().then(function() {
                    $ionicDeploy.extract().then(function() {
                       $ionicDeploy.load();
                    });
                  });
                }
       }); // end deploy check
};

Thats it! It was simpler than I though. Here is the link to the Docs for more info: http://docs.ionic.io/setup.html#installation

How to use Ionic Cloud with Angular 1.5

1 Answers1