How to update to Ionic Beta7 (Angular2 RC1)

Ionic Framework ionic-v3
1

Ionic2 Beta7 was released May 19, 2016 CHANGELOG
There is an official upgrade guide on the changelog, just scroll down.
This updates Angular to 2.0.0-rc.1 CHANGELOG

Edit: I missed the official guide when writing this post last night. Somehow I just skimmed the changelog and never scrolled down to the guide.

The one thing not mentioned by the official guide that I noticed with my diff, is that index.html changed the order of the lang attribute (moved to the beginning), and meta moved above title. I’m not sure if this is some kind of localization and/or encoding bug fix (does HTML require these to be first?), but I decided to make the changes.

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Ionic</title>

Original Post:
This was my approach to updating:

  1. Create a fresh Ionic2 project with ionic start
  2. Do a directory diff against your project (in Linux I recommend Kompare or Meld)
    Tip: Set your tool to ignore: node_modules/ www/build/ platforms/ plugins/
    (You could just skip the directory diff and just compare package.json, index.html, and app.ts)
  3. You should make the following changes:

package.json
Update your dependencies to match the starter project.
rm -rf node_modules
npm install

www/index.html
html lang attribute and meta tag reordered to be first.
Add:

  <script src="build/js/Reflect.js"></script>
  <script src="build/js/zone.js"></script>

TypeScript files
Change imports to use '@angular/’ instead of 'angular2/'
For example:

import { Injectable } from '@angular/core';

IonicApp.getComponent(‘nav’) seems to be deprecated
Use nav: Nav in your App and nav: NavController everywhere else. (see sidemenu starter project)

ngFor deprecated hash variable syntax
You’ll notice a warning about using let instead of #myvar

Issues
I encountered a TypeScript error relating to Observable.map, and Geolocation.watchPosition().map was no longer present, but that’s the only problem I had.

2 Likes
2

There’s quite comprehensive upgrade-guide in the changelog. That might be easier to implement than starting a new project when you already have a larger code-base (like me)

edit: Used that on my project and i was done in under 10 minutes (including waiting for the NPM Installs)

3 Likes
3

Here is the official guide mentioned in the changelog: Upgrade to Beta 7

2 Likes
4

Hi bengtler. We upgrade beta6 to beta7 with the changelog details but when serve the project → > Error: Uncaught (in promise): EXCEPTION: Error in :0:0

ORIGINAL EXCEPTION: No provider for NavController!

My app.ts contains this code:

import {App, Platform, MenuController, Events, NavController} from ‘ionic-angular’;
import {StatusBar} from ‘ionic-native’;
import {Inject, ViewChild} from ‘@angular/core’;
import {TabsPage} from ‘./pages/tabs/tabs’;
import {AboutPage} from ‘./pages/info/aboutPage/aboutPage’;

@App({
template: <ion-menu type="overlay" [content]="content"> <ion-toolbar> <ion-title>Academic</ion-title> </ion-toolbar> <ion-content> <ion-list> <button ion-item (click)="openPage(AboutPage)"> Información </button> </ion-list> </ion-content> </ion-menu> <ion-nav id="nav" #content [root]="rootPage"></ion-nav>,
config: {
backButtonText: ‘Volver’,
ApiEndpoint: ‘/api’,
menuType: ‘push’,
platforms: {
ios: {
menuType: ‘overlay’,
}
}
}
})
export class MyApp {
rootPage: any = TabsPage;

constructor(
    public events: Events,
    public menu: MenuController,
    public nav: NavController,
    platform: Platform
) {
    this.nav = nav;
    this.menu = menu;
    platform.ready().then(() => {
        StatusBar.styleDefault();
    });
}

openPage(page) {     
    // Reset the nav controller to have just this page
    this.nav.setRoot(page);
  
    // close the menu when clicking a link from the menu
    this.menu.close();
}

}

5

read the upgrade changelog and docs carefully…there is no getComponent function anymore and you can only inject NavController to your pages and not your APP!

use Nav instead of NavController in @App

6

What about Observable.map?
And my Modals is inset now. How create a fullscreen modal?

Upgrade: I found it in code source

$modal-inset-height-small: 100%;
$modal-inset-height-large: 100%;
$modal-inset-width: 100%;
1 Like
7

and you need to import all additional rxjs operators by yourself

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
8

Thanks for your help!

9

I had a shared Observable derived from Geolocation.watchPosition() like this:

import {Geolocation} from 'ionic-native';
import {Observable} from "rxjs/Rx";
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/share';

Shared Observable I create; this.myObs$ is returned from my service.
I simplified the code, Position is an interface I created.

this.myObs$ = Geolocation.watchPosition({maximumAge: 30000, enableHighAccuracy: true}).map(position => {
      let newPosition: Position = {};
      // processing done here
      return newPosition;
    }).share();

This code, which worked previously (Ionic beta6), now has this TypeScript error:

Error:(37, 5) TS2322: Type 'Observable<Position>' is not assignable to type 'Observable<Position>'.
 Property 'source' is protected but type 'Observable<T>' is not a class derived from 'Observable<T>'.

I tried bumping rxjs to 5.0.0-beta.7 (from beta.6), but this didn’t resolve the TypeScript error.
In any case, TypeScript still compiles with the error, so it’s more of a warning.

However, when running the app. I get a runtime error:

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in :0:0
ORIGINAL EXCEPTION: TypeError: ionic_native_1.Geolocation.watchPosition(...).map is not a function

I searched for the error; other Angular2/rxjs projects have encountered it, but the fix seems to be adjusting your dependencies and I wanted to stick with what Ionic2 has tested against. So I decided to just rework my code as a custom Observable and avoid using map.

This does not affect all Observables. For example, this works just fine:

      Observable.interval(500).map(num => num**2).subscribe(val => {
        console.log('val', val);
      });

Maybe ionic-native needs to be updated?
I created ionic-native issue #170 regarding this problem.

10

I have problem with beta7. My tempate is based on ConferenceApp. Now it gives error on loading homepage. It seems related ionic-native/googlemap?

googlemaps.js:15Uncaught ReferenceError: plugin is not defined459…/plugin @ googlemaps.js:15s @ _prelude.js:1(anonymous function) @ _prelude.js:1425…/ng1 @ index.js:70s @ _prelude.js:1(anonymous function) @ _prelude.js:11…/pages/account/account @ app.ts:3s @ _prelude.js:1e @ _prelude.js:1(anonymous function) @ _prelude.js:1

exports.GoogleMapsEvent = {
MAP_READY: plugin.google.maps.event.MAP_READY,
MAP_CLICK: plugin.google.maps.event.MAP_CLICK,
MAP_LONG_CLICK: plugin.google.maps.event.MAP_LONG_CLICK,
MY_LOCATION_BUTTON_CLICK: plugin.google.maps.event.MY_LOCATION_BUTTON_CLICK,
CAMERA_CHANGE: plugin.google.maps.event.CAMERA_CHANGE,
CAMERA_IDLE: plugin.google.maps.event.CAMERA_IDLE,
MAP_LOADED: plugin.google.maps.event.MAP_LOADED,
MAP_WILL_MOVE: plugin.google.maps.event.MAP_WILL_MOVE,
MAP_CLOSE: plugin.google.maps.event.MAP_CLOSE,
MARKER_CLICK: plugin.google.maps.event.MARKER_CLICK,
INFO_CLICK: plugin.google.maps.event.INFO_CLICK,
MARKER_DRAG: plugin.google.maps.event.MARKER_DRAG,
MARKER_DRAG_START: plugin.google.maps.event.MARKER_DRAG_START,
MARKER_DRAG_END: plugin.google.maps.event.MARKER_DRAG_END,
OVERLAY_CLICK: plugin.google.maps.event.OVERLAY_CLICK
};
/**

11

Same problem here. Temporary fix is comment this code lines after build buit this i snot a solution because we stay unable to deploy to a device or a emulator because doing that will generate anather app.bundle.js.
E think frameqork team need to revise this problem quickly.

12

i went to older ionic-native

npm rm ionic-native

npm ins ionic-native@1.2.2

4 Likes
13

is working now thanks :wink:

14

It works. It saved my day

15

Thanks @jorgercosta It works :thumbsup: