Upgrade to latest Ionic and Angular

ionic.config.json

@@ -1,6 +1,6 @@
 {
  "name": "ionic2-reddit-reader",
  "app_id": "",
- "v2": true,
- "typescript": true
+ "type": "ionic-angular",
+ "integrations": {}
 }

package.json

@@ -4,31 +4,35 @@
  "version": "1.0.0",
  "private": false,
  "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": "2.1.1",
- "@angular/compiler": "2.1.1",
- "@angular/compiler-cli": "2.1.1",
- "@angular/core": "2.1.1",
- "@angular/forms": "2.1.1",
- "@angular/http": "2.1.1",
- "@angular/platform-browser": "2.1.1",
- "@angular/platform-browser-dynamic": "2.1.1",
- "@angular/platform-server": "2.1.1",
- "@ionic/storage": "1.1.6",
- "angular2-moment": "^1.0.0-beta.rc.1",
- "ionic-angular": "2.0.0-rc.3",
- "ionic-native": "2.2.3",
+ "@angular/common": "5.1.0",
+ "@angular/compiler": "5.1.0",
+ "@angular/compiler-cli": "5.1.0",
+ "@angular/core": "5.1.0",
+ "@angular/forms": "5.1.0",
+ "@angular/http": "5.1.0",
+ "@angular/platform-browser": "5.1.0",
+ "@angular/platform-browser-dynamic": "5.1.0",
+ "@ionic-native/core": "4.5.0",
+ "@ionic-native/splash-screen": "4.5.0",
+ "@ionic-native/status-bar": "4.5.0",
+ "@ionic/storage": "2.1.3",
+ "angular2-moment": "^1.7.0",
+ "ionic-angular": "3.9.2",
  "ionicons": "3.0.0",
- "rxjs": "5.0.0-beta.12",
-"sw-toolbox": "3.4.0",
- "zone.js": "0.6.26"
+ "rxjs": "5.5.5",
+ "sw-toolbox": "3.6.0",
+ "zone.js": "0.8.18"
  },
  "devDependencies": {
- "@ionic/app-scripts": "1.0.0",
- "typescript": "2.0.9"
+ "@ionic/app-scripts": "3.1.5",
+ "typescript": "2.6.2"
  },
  "cordovaPlugins": [
  "cordova-plugin-whitelist",

src/app/app.component.ts

@@ -1,22 +1,23 @@
 import { Component } from '@angular/core';
 import { Platform } from 'ionic-angular';
-import { StatusBar, Splashscreen } from 'ionic-native';
+import { StatusBar } from '@ionic-native/status-bar';
+import { SplashScreen } from '@ionic-native/splash-screen';
 
 import { PostsPage } from '../pages/posts/posts';
 
 
 @Component({
- template: `<ion-nav [root]="rootPage"></ion-nav>`
+ templateUrl: 'app.html'
 })
 export class RedditReaderApp {
  rootPage = PostsPage;
 
- constructor(platform: Platform) {
+ constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
  platform.ready().then(() => {
  // Okay, so the platform is ready and our plugins are available.
  // Here you can do any higher level native things you might need.
- StatusBar.styleDefault();
- Splashscreen.hide();
+ statusBar.styleDefault();
+ splashScreen.hide();
  });
  }
 }

src/app/app.html

@@ -0,0 +1 @@
+<ion-nav [root]="rootPage"></ion-nav>

src/app/app.module.ts

@@ -5,6 +5,11 @@ import { RedditReaderApp } from './app.component';
 import { PostsPage } from '../pages/posts/posts';
 import { CommentsPage } from '../pages/comments/comments'
 import { CommentsList } from '../pages/comments/commentsList/commentsList'
+import { RedditApiService } from "../providers/reddit-api-service";
+import { SplashScreen } from '@ionic-native/splash-screen';
+import { StatusBar } from '@ionic-native/status-bar';
+import { BrowserModule } from "@angular/platform-browser";
+import {HttpClientModule} from "@angular/common/http";
 
 @NgModule({
  declarations: [
@@ -14,6 +19,8 @@ import { CommentsList } from '../pages/comments/commentsList/commentsList'
  CommentsList
  ],
  imports: [
+ BrowserModule,
+ HttpClientModule,
  IonicModule.forRoot(RedditReaderApp),
  MomentModule
  ],
@@ -23,6 +30,10 @@ import { CommentsList } from '../pages/comments/commentsList/commentsList'
  PostsPage,
  CommentsPage
  ],
- providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
+ providers: [
+ RedditApiService,
+ StatusBar,
+ SplashScreen,
+ {provide: ErrorHandler, useClass: IonicErrorHandler}]
 })
 export class AppModule {}

src/app/app.scss

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

src/index.html

@@ -3,24 +3,27 @@
 <head>
  <meta charset="UTF-8">
  <title>Ionic App</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+ <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
- <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-eval' 'unsafe-inline' *; object-src 'self'; style-src 'self' 'unsafe-inline'; media-src *">
 
  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <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>
 
  <!-- un-comment this code to enable service worker
  <script>
  if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('service-worker.js')
  .then(() => console.log('service worker installed'))
- .catch(err => console.log('Error', err));
+ .catch(err => console.error('Error', err));
  }
  </script>-->
 
@@ -35,7 +38,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>

src/pages/comments/comments.html

@@ -1,9 +1,3 @@
-<!--
- Generated template for the Comments page.
-
- See http://ionicframework.com/docs/v2/components/#navigation for more info on
- Ionic pages and navigation.
--->
 <ion-header>
 
  <ion-navbar color="primary">

src/pages/comments/comments.ts

@@ -1,26 +1,20 @@
 import { Component } from '@angular/core';
-import { NavController, NavParams } from 'ionic-angular';
+import { NavParams } from 'ionic-angular';
 
 import { RedditApiService } from '../../providers/reddit-api-service';
 
-/*
- Generated class for the Comments page.
-
- See http://ionicframework.com/docs/v2/components/#navigation for more info on
- Ionic pages and navigation.
-*/
 @Component({
  selector: 'page-comments',
- templateUrl: 'comments.html',
- providers: [RedditApiService],
+ templateUrl: 'comments.html'
 })
 export class CommentsPage {
  post;
  comments;
  loadCompleted: boolean = false;
 
- constructor(public navCtrl: NavController, public redditApi: RedditApiService, public params: NavParams) {
- this.post = this.params.get('post');
+ constructor(private redditApi: RedditApiService,
+ params: NavParams) {
+ this.post = params.get('post');
  this.load();
  }
 
@@ -29,7 +23,6 @@ export class CommentsPage {
  // comments.sort((a,b) => b.score - a.score);
  this.comments = comments;
  this.loadCompleted = true;
- console.log(this.comments)
  })
  }
 }

src/pages/comments/commentsList/commentsList.ts

@@ -2,8 +2,7 @@ import { Component, Input } from '@angular/core';
 
 @Component({
  selector: 'comments-list',
- templateUrl: 'commentsList.html',
- providers: [],
+ templateUrl: 'commentsList.html'
 })
 export class CommentsList {
  @Input() comments;

src/pages/posts/posts.ts

@@ -6,8 +6,7 @@ import { CommentsPage } from '../comments/comments'
 
 @Component({
  selector: 'page-posts',
- templateUrl: 'posts.html',
- providers: [RedditApiService]
+ templateUrl: 'posts.html'
 })
 export class PostsPage {
  loadCompleted: boolean = false;
@@ -16,16 +15,17 @@ export class PostsPage {
  posts: Array<any>;
  commentsPage = CommentsPage;
 
- constructor(public navCtrl: NavController, public redditApi: RedditApiService, public navParams: NavParams) {
- this.subreddit = this.navParams.get('subreddit');
+ constructor(private navCtrl: NavController,
+ private redditApi: RedditApiService,
+ navParams: NavParams) {
+ this.subreddit = navParams.get('subreddit');
  this.load(this.subreddit);
  }
 
  load(url?) {
  this.redditApi.fetch(url).subscribe((posts) => {
  this.posts = posts;
  this.loadCompleted = true;
- console.log(posts)
  })
  }
 

src/providers/reddit-api-service.ts

@@ -1,36 +1,38 @@
 import { Injectable } from '@angular/core';
-import { Http } from '@angular/http';
-import 'rxjs/add/operator/map';
+import { map } from 'rxjs/operators/map';
+import {HttpClient} from "@angular/common/http";
 
 const BASE_URL: string = 'https://www.reddit.com/';
 const JSON_POSTFIX: string = '.json';
 
 @Injectable()
 export class RedditApiService {
 
- constructor(public http: Http) {}
+ constructor(private http: HttpClient) {}
 
  fetch(url?: string) {
  return url ?
  this.http.get(BASE_URL + '/r/' + url + JSON_POSTFIX)
- .map(this.redditCollectionToJson) :
+ .pipe(map(this.redditCollectionToJson)) :
  this.http.get(BASE_URL + JSON_POSTFIX)
- .map(this.redditCollectionToJson)
+ .pipe(map(this.redditCollectionToJson));
  }
 
  fetchNext(lastPostName: string, url?: string) {
  return url ?
  this.http.get(BASE_URL + '/r/' + url + JSON_POSTFIX + '?count=' + 25 + '&after=' + lastPostName)
- .map(this.redditCollectionToJson) :
+ .pipe(map(this.redditCollectionToJson)) :
  this.http.get(BASE_URL + JSON_POSTFIX + '?count=' + 25 + '&after=' + lastPostName)
- .map(this.redditCollectionToJson)
+ .pipe(map(this.redditCollectionToJson));
  }
 
  fetchComments(post) {
  let url: string = BASE_URL + post.permalink + JSON_POSTFIX;
  return this.http.get(url)
- .map(res => res.json()[1].data.children.map(c => c.data).filter(c => c.body))
- .map(this.beautifyReplies.bind(this))
+ .pipe(
+ map(res => res[1].data.children.map(c => c.data).filter(c => c.body)),
+ map(this.beautifyReplies.bind(this)));
+
  }
 
  beautifyReplies(comments) {
@@ -42,6 +44,6 @@ export class RedditApiService {
  }
 
  redditCollectionToJson(response) {
- return response.json().data.children.map(c => c.data)
+ return response.data.children.map(c => c.data)
  }
 }