Upgraded to latest version of Ionic and Spring Boot

deploy.sh

@@ -63,5 +63,5 @@ ionic cordova run ios
 # See http://stackoverflow.com/a/43363820
 
 # cleanup changed files
-git checkout $r/ionic-beer
+sed -i -e "s|$serverUri|http://localhost:8080|g" src/providers/beer-service.ts
 rm $r/ionic-beer/src/providers/beer-service.ts-e

ionic-beer/.gitignore

@@ -13,6 +13,7 @@ log.txt
 npm-debug.log*
 
 .idea/
+.sourcemaps/
 .sass-cache/
 .tmp/
 .versions/

ionic-beer/README.md

@@ -1,26 +0,0 @@
-This is a starter template for [Ionic](http://ionicframework.com/docs/) projects.
-
-## How to use this template
-
-*This template does not work on its own*. The shared files for each starter are found in the [ionic2-app-base repo](https://github.com/driftyco/ionic2-app-base).
-
-To use this template, either create a new ionic project using the ionic node.js utility, or copy the files from this repository into the [Starter App Base](https://github.com/driftyco/ionic2-app-base).
-
-### With the Ionic CLI:
-
-Take the name after `ionic2-starter-`, and that is the name of the template to be used when using the `ionic start` command below:
-
-```bash
-$ sudo npm install -g ionic cordova
-$ ionic start myTabs tabs
-```
-
-Then, to run it, cd into `myTabs` and run:
-
-```bash
-$ ionic cordova platform add ios
-$ ionic cordova run ios
-```
-
-Substitute ios for android if not on a Mac.
-

ionic-beer/config.xml

@@ -1,20 +1,17 @@
 <?xml version='1.0' encoding='utf-8'?>
 <widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
-    <name>MyApp</name>
+    <name>ionic-beer</name>
     <description>An awesome Ionic/Cordova app.</description>
     <author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
     <content src="index.html" />
     <access origin="*" />
-    <allow-navigation href="http://ionic.local/*" />
     <allow-intent href="http://*/*" />
     <allow-intent href="https://*/*" />
     <allow-intent href="tel:*" />
     <allow-intent href="sms:*" />
     <allow-intent href="mailto:*" />
     <allow-intent href="geo:*" />
-    <preference name="webviewbounce" value="false" />
-    <preference name="UIWebViewBounce" value="false" />
-    <preference name="DisallowOverscroll" value="true" />
+    <preference name="ScrollEnabled" value="false" />
     <preference name="android-minSdkVersion" value="16" />
     <preference name="BackupWebStorage" value="none" />
     <preference name="SplashMaintainAspectRatio" value="true" />
@@ -64,6 +61,7 @@
         <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
         <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
         <icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
+        <icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
         <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
         <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
         <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
@@ -76,13 +74,13 @@
         <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
         <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
         <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
+        <splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
     </platform>
-    <engine name="android" spec="^6.2.3" />
-    <engine name="ios" spec="^4.4.0" />
-    <plugin name="cordova-plugin-console" spec="^1.0.5" />
-    <plugin name="cordova-plugin-device" spec="^1.1.4" />
-    <plugin name="cordova-plugin-splashscreen" spec="^4.0.3" />
-    <plugin name="cordova-plugin-statusbar" spec="^2.2.2" />
-    <plugin name="cordova-plugin-whitelist" spec="^1.3.1" />
-    <plugin name="ionic-plugin-keyboard" spec="^2.2.1" />
+    <plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
+    <plugin name="cordova-plugin-device" spec="^2.0.1" />
+    <plugin name="cordova-plugin-splashscreen" spec="^5.0.2" />
+    <plugin name="cordova-plugin-ionic-webview" spec="^1.1.16" />
+    <plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
+    <engine name="ios" spec="4.5.4" />
+    <engine name="android" spec="~7.0.0" />
 </widget>

ionic-beer/ionic.config.json

@@ -1,5 +1,8 @@
 {
   "name": "ionic-beer",
   "app_id": "",
-  "type": "ionic-angular"
+  "type": "ionic-angular",
+  "integrations": {
+    "cordova": {}
+  }
 }

ionic-beer/package.json

@@ -1,62 +1,58 @@
 {
-    "name": "ionic-beer",
-    "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"
+  "name": "ionic-beer",
+  "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": "5.0.3",
+    "@angular/compiler": "5.0.3",
+    "@angular/compiler-cli": "5.0.3",
+    "@angular/core": "5.0.3",
+    "@angular/forms": "5.0.3",
+    "@angular/http": "5.0.3",
+    "@angular/platform-browser": "5.0.3",
+    "@angular/platform-browser-dynamic": "5.0.3",
+    "@ionic-native/core": "4.4.0",
+    "@ionic-native/splash-screen": "4.4.0",
+    "@ionic-native/status-bar": "4.4.0",
+    "@ionic/storage": "2.1.3",
+    "cordova-android": "7.0.0",
+    "cordova-ios": "4.5.4",
+    "cordova-plugin-device": "^2.0.1",
+    "cordova-plugin-ionic-keyboard": "^2.0.5",
+    "cordova-plugin-ionic-webview": "^1.1.16",
+    "cordova-plugin-splashscreen": "^5.0.2",
+    "cordova-plugin-whitelist": "^1.3.3",
+    "ionic-angular": "3.9.2",
+    "ionicons": "3.0.0",
+    "rxjs": "5.5.2",
+    "sw-toolbox": "3.6.0",
+    "zone.js": "0.8.18"
+  },
+  "devDependencies": {
+    "@ionic/app-scripts": "3.1.8",
+    "typescript": "2.4.2"
+  },
+  "description": "An Ionic project",
+  "cordova": {
+    "plugins": {
+      "cordova-plugin-whitelist": {},
+      "cordova-plugin-device": {},
+      "cordova-plugin-splashscreen": {},
+      "cordova-plugin-ionic-webview": {},
+      "cordova-plugin-ionic-keyboard": {}
     },
-    "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",
-        "cordova-android": "^6.2.3",
-        "cordova-ios": "^4.4.0",
-        "cordova-plugin-console": "^1.0.5",
-        "cordova-plugin-device": "^1.1.4",
-        "cordova-plugin-splashscreen": "^4.0.3",
-        "cordova-plugin-statusbar": "^2.2.2",
-        "cordova-plugin-whitelist": "^1.3.1",
-        "ionic-angular": "3.2.1",
-        "ionic-plugin-keyboard": "^2.2.1",
-        "ionicons": "3.0.0",
-        "rxjs": "5.1.1",
-        "sw-toolbox": "3.6.0",
-        "zone.js": "0.8.10"
-    },
-    "devDependencies": {
-        "@ionic/app-scripts": "1.3.7",
-        "@ionic/cli-plugin-cordova": "1.4.0",
-        "@ionic/cli-plugin-ionic-angular": "1.3.1",
-        "typescript": "2.2.1"
-    },
-    "description": "An Ionic project",
-    "cordova": {
-        "plugins": {
-            "cordova-plugin-console": {},
-            "cordova-plugin-device": {},
-            "cordova-plugin-splashscreen": {},
-            "cordova-plugin-statusbar": {},
-            "cordova-plugin-whitelist": {},
-            "ionic-plugin-keyboard": {}
-        },
-        "platforms": [
-            "android",
-            "ios"
-        ]
-    }
+    "platforms": [
+      "ios",
+      "android"
+    ]
+  }
 }

ionic-beer/resources/README.md

@@ -0,0 +1,8 @@
+These are Cordova resources. You can replace icon.png and splash.png and run
+`ionic cordova resources` to generate custom icons and splash screens for your
+app. See `ionic cordova resources --help` for details.
+
+Cordova reference documentation:
+
+- Icons: https://cordova.apache.org/docs/en/latest/config_ref/images.html
+- Splash Screens: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/

ionic-beer/src/app/app.module.ts

@@ -10,8 +10,9 @@ import { TabsPage } from '../pages/tabs/tabs';
 
 import { StatusBar } from '@ionic-native/status-bar';
 import { SplashScreen } from '@ionic-native/splash-screen';
+
 import { BeerPageModule } from '../pages/beer/beer.module';
-import { HttpModule } from '@angular/http';
+import { HttpClientModule } from '@angular/common/http';
 
 @NgModule({
   declarations: [
@@ -23,7 +24,7 @@ import { HttpModule } from '@angular/http';
   ],
   imports: [
     BrowserModule,
-    HttpModule,
+    HttpClientModule,
     IonicModule.forRoot(MyApp),
     BeerPageModule
   ],

ionic-beer/src/app/app.scss

@@ -1,4 +1,4 @@
-// http://ionicframework.com/docs/v2/theming/
+// http://ionicframework.com/docs/theming/
 
 
 // App Global Sass

ionic-beer/src/declarations.d.ts

@@ -1,14 +0,0 @@
-/*
-  Declaration files are how the Typescript compiler knows about the type information(or shape) of an object.
-  They're what make intellisense work and make Typescript know all about your code.
-
-  A wildcard module is declared below to allow third party libraries to be used in an app even if they don't
-  provide their own type declarations.
-
-  To learn more about using third party libraries in an Ionic app, check out the docs here:
-  http://ionicframework.com/docs/v2/resources/third-party-libs/
-
-  For more info on type definition files, check out the Typescript docs here:
-  https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html
-*/
-declare module '*';

ionic-beer/src/index.html

@@ -11,7 +11,11 @@
   <link rel="manifest" href="manifest.json">
   <meta name="theme-color" content="#4e8ef7">
 
-  <!-- cordova.js required for cordova apps -->
+  <!-- add to homescreen for ios -->
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+  <!-- cordova.js required for cordova apps (remove if not needed) -->
   <script src="cordova.js"></script>
 
   <script>
@@ -26,6 +30,9 @@
 
 </head>
 <body>
+<noscript>
+  <h1>You must enable JavaScript to view this page.</h1>
+</noscript>
 
   <!-- Ionic's root component and where the app will load -->
   <ion-app></ion-app>
@@ -33,7 +40,11 @@
   <!-- The polyfills js is generated during the build process -->
   <script src="build/polyfills.js"></script>
 
-  <!-- The bundle js is generated during the build process -->
+  <!-- The vendor js is generated during the build process
+       It contains all of the dependencies in node_modules -->
+  <script src="build/vendor.js"></script>
+
+  <!-- The main bundle js is generated during the build process -->
   <script src="build/main.js"></script>
 
 </body>

ionic-beer/src/pages/beer/beer-modal.ts

@@ -19,7 +19,7 @@ export class BeerModalPage {
               public toastCtrl: ToastController,
               public navCtrl: NavController) {
     if (this.params.data.id) {
-      this.beerService.get(this.params.get('id')).subscribe(beer => {
+      this.beerService.get(this.params.get('id')).subscribe((beer: any) => {
         this.beer = beer;
         this.beer.href = beer._links.self.href;
         this.giphyService.get(beer.name).subscribe(url => beer.giphyUrl = url);

ionic-beer/src/pages/beer/beer.module.ts

@@ -13,9 +13,6 @@ import { BeerModalPage } from './beer-modal';
   imports: [
     IonicPageModule.forChild(BeerPage),
   ],
-  exports: [
-    BeerPage
-  ],
   providers: [
     BeerService,
     GiphyService

ionic-beer/src/pages/contact/contact.html

@@ -10,7 +10,7 @@
   <ion-list>
     <ion-list-header>Follow us on Twitter</ion-list-header>
     <ion-item>
-      <ion-icon name="ionic" item-left></ion-icon>
+      <ion-icon name="ionic" item-start></ion-icon>
       @ionicframework
     </ion-item>
   </ion-list>

ionic-beer/src/pages/tabs/tabs.html

@@ -1,6 +1,6 @@
 <ion-tabs>
   <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
   <ion-tab [root]="tab2Root" tabTitle="Beer" tabIcon="beer"></ion-tab>
-  <ion-tab [root]="tab3Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
-  <ion-tab [root]="tab4Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
+  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
+  <ion-tab [root]="tab4Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
 </ion-tabs>

ionic-beer/src/pages/tabs/tabs.ts

@@ -9,7 +9,6 @@ import { BeerPage } from '../beer/beer';
   templateUrl: 'tabs.html'
 })
 export class TabsPage {
-
   tab1Root = HomePage;
   tab2Root = BeerPage;
   tab3Root = AboutPage;

ionic-beer/src/providers/beer-service.ts

@@ -1,39 +1,34 @@
 import { Injectable } from '@angular/core';
-import { Http, Response } from '@angular/http';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/catch';
 import { Observable } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
 
 @Injectable()
 export class BeerService {
-  public API = 'http://localhost:8080';
+  public API = 'http://192.168.1.48:8080';
   public BEER_API = this.API + '/beers';
 
-  constructor(public http: Http) {}
+  constructor(public http: HttpClient) {
+  }
 
   getGoodBeers(): Observable<any> {
-    return this.http.get(this.API + '/good-beers')
-      .map((response: Response) => response.json());
+    return this.http.get(this.API + '/good-beers');
   }
 
   get(id: string) {
-    return this.http.get(this.BEER_API + '/' + id)
-      .map((response: Response) => response.json());
+    return this.http.get(this.BEER_API + '/' + id);
   }
 
   save(beer: any): Observable<any> {
-    let result: Observable<Response>;
+    let result: Observable<Object>;
     if (beer['href']) {
       result = this.http.put(beer.href, beer);
     } else {
       result = this.http.post(this.BEER_API, beer)
     }
-    return result.map((response: Response) => response.json())
-      .catch(error => Observable.throw(error));
+    return result.catch(error => Observable.throw(error));
   }
 
   remove(id: string) {
-    return this.http.delete(this.BEER_API + '/' + id)
-      .map((response: Response) => response.json());
+    return this.http.delete(this.BEER_API + '/' + id);
   }
 }

ionic-beer/src/providers/giphy-service.ts

@@ -1,22 +1,22 @@
 import { Injectable } from '@angular/core';
-import { Http, Response } from '@angular/http';
-import { Observable } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+import 'rxjs/add/operator/map';
 
 @Injectable()
 // http://tutorials.pluralsight.com/front-end-javascript/getting-started-with-angular-2-by-building-a-giphy-search-application
 export class GiphyService {
 
-  giphyApi = 'https://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q=';
+  // Public beta key: https://github.com/Giphy/GiphyAPI#public-beta-key
+  giphyApi = 'https://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&limit=1&q=';
 
-  constructor(public http: Http) {
+  constructor(public http: HttpClient) {
   }
 
-  get(searchTerm): Observable<any> {
+  get(searchTerm) {
     const apiLink = this.giphyApi + searchTerm;
-    return this.http.request(apiLink).map((res: Response) => {
-      const results = res.json().data;
-      if (results.length > 0) {
-        return results[0].images.original.url;
+    return this.http.get(apiLink).map((response: any) => {
+      if (response.data.length > 0) {
+        return response.data[0].images.original.url;
       } else {
         return 'https://media.giphy.com/media/YaOxRsmrv9IeA/giphy.gif'; // dancing cat for 404
       }

ionic-beer/src/service-worker.js

@@ -1,5 +1,5 @@
 /**
- * Check out https://googlechrome.github.io/sw-toolbox/ for
+ * Check out https://googlechromelabs.github.io/sw-toolbox/ for
  * more info on how to use sw-toolbox to custom configure your service worker.
  */
 
@@ -15,6 +15,7 @@ self.toolbox.options.cache = {
 self.toolbox.precache(
   [
     './build/main.js',
+    './build/vendor.js',
     './build/main.css',
     './build/polyfills.js',
     'index.html',
@@ -23,7 +24,7 @@ self.toolbox.precache(
 );
 
 // dynamically cache any other local assets
-self.toolbox.router.any('/*', self.toolbox.cacheFirst);
+self.toolbox.router.any('/*', self.toolbox.fastest);
 
 // for any other requests go to the network, cache,
 // and then only use that cached resource if your user goes offline

ionic-beer/src/theme/variables.scss

@@ -1,7 +1,17 @@
 // Ionic Variables and Theming. For more info, please see:
-// http://ionicframework.com/docs/v2/theming/
+// http://ionicframework.com/docs/theming/
+
+// Font path is used to include ionicons,
+// roboto, and noto sans fonts
 $font-path: "../assets/fonts";
 
+
+// The app direction is used to include
+// rtl styles in your app. For more info, please see:
+// http://ionicframework.com/docs/theming/rtl-support/
+$app-direction: ltr;
+
+
 @import "ionic.globals";
 
 
@@ -10,7 +20,7 @@ $font-path: "../assets/fonts";
 // To customize the look and feel of this app, you can override
 // the Sass variables found in Ionic's source scss files.
 // To view all the possible Ionic variables, see:
-// http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/
+// http://ionicframework.com/docs/theming/overriding-ionic-variables/
 
 
 
@@ -66,7 +76,7 @@ $colors: (
 // Ionicons
 // --------------------------------------------------
 // The premium icon font for Ionic. For more info, please see:
-// http://ionicframework.com/docs/v2/ionicons/
+// http://ionicframework.com/docs/ionicons/
 
 @import "ionic.ionicons";
 

ionic-beer/tsconfig.json

@@ -17,10 +17,12 @@
     "src/**/*.ts"
   ],
   "exclude": [
-    "node_modules"
+    "node_modules",
+    "src/**/*.spec.ts",
+    "src/**/__tests__/*.ts"
   ],
   "compileOnSave": false,
   "atom": {
     "rewriteTsconfig": false
   }
-}
+}

server/pom.xml

@@ -56,7 +56,6 @@
     </dependencies>
 
     <build>
-        <defaultGoal>spring-boot:run</defaultGoal>
         <plugins>
             <plugin>
                 <groupId>org.springframework.boot</groupId>

server/src/main/java/com/example/demo/beer/BeerController.java

@@ -16,7 +16,7 @@ public class BeerController {
     }
 
     @GetMapping("/good-beers")
-    @CrossOrigin(origins = "http://localhost:4200")
+    @CrossOrigin(origins = {"http://localhost:8100","http://localhost:8080"})
     public Collection<Beer> goodBeers() {
 
         return repository.findAll().stream()

server/src/main/java/com/example/demo/beer/BeerRepository.java

@@ -2,7 +2,9 @@ package com.example.demo.beer;
 
 import org.springframework.data.jpa.repository.JpaRepository;
 import org.springframework.data.rest.core.annotation.RepositoryRestResource;
+import org.springframework.web.bind.annotation.CrossOrigin;
 
 @RepositoryRestResource
+@CrossOrigin(origins = {"http://localhost:8100","http://localhost:8080"})
 interface BeerRepository extends JpaRepository<Beer, Long> {
 }