Can't start Android app after updating to beta.4

I get the following error in the console: Uncaught reflect-metadata shim is required when using class decorators
reflect-metadata is installed alongside the other npm packages, but the apps through that error while starting and stays on Splash loop.

Your system information:

Cordova CLI: 6.1.1
Ionic Version: 2.0.0-beta.4
Ionic CLI Version: 2.0.0-beta.23
Ionic App Lib Version: 2.0.0-beta.13
ios-deploy version: 1.8.5
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v4.3.0
Xcode version: Xcode 7.3 Build version 7D175

Thanks!

1 Like

I just upgraded my project to beta.4 and I faced the same problem. It turned out that I missed one update in the index.html (which I found out thanks to this post). Here are the updates that you need to perform in order to upgrade to beta.4:

  1. Update the Ionic CLI to the latest version:
npm install -g ionic@beta
  1. Copy the appropriate gulpfile.js to your project (for TS or for JS).

  2. Update your package.json using the one in ionic2-base-app as reference (for TS or for JS).

  3. Add angular2-polyfill.js before app.bundle.js in the index.html file:

<!-- Zone.js and Reflect-metadata  -->
<script src="build/js/angular2-polyfills.js"></script>
<!-- the bundle which is built from the app's source code -->
<script src="build/js/app.bundle.js"></script>
  1. Import es6-shim in app.ts/app.js, i.e. add the following line at the top:
import 'es6-shim';
  1. Remove the following files: ionic.config.js, ionic.project and webpack.config.js.

  2. Create a ionic.config.json file using this one as a reference and update it accordingly.

  3. From inside of your project’s folder run npm install to install the new packages.

  4. If you’re using a release of Ionic framework older than beta.3 in your project you also need to change the imports in all .ts/.js files from ionic-framework to ionic-angular.

NOTE: Depending on the version of the Ionic-CLI that you were using when you created your project some of the steps might be not needed (i.e. already completed).


EDIT: [2016-04-11] Added 2 additional steps suggested by @beachy.

11 Likes

Hello and thanks for the detailed info!

I recreate the project and now seems to be working, but I’m using the workaround posted here: https://github.com/driftyco/ionic/issues/5071

To be able to use back button on android while this feature still in development, but I’m getting this error:
✗ SyntaxError: /path_to_my_app/app/app.js: Unexpected token (26:35) while parsing file: /path_to_my_app/app/app.js

regarding this line:
@ViewChild('rootNavController') nav:NavController;

Any advice on that?

Assuming that you created a new JS project from scratch with the latest beta and then updated the files as in the workaround from the link that you provided, then I would suggest you to make sure that you imported es6-shim in app.js (see step 4 above), i.e. make sure to add the following line at the top of app.js:

import 'es6-shim';

Indeed, I check by step but it doesn’t work on those lines. And I don’t know any other way to enable back button hardware on android.

It turns out that the error is caused by the type annotations in the code, I filed an issue, although I’m not sure if that is supported in the Ionic 2 JS projects at all (because I’m using TypeScript):

To fix it you could remove the type annotations and the issue should disappear.

If you want to use the type annotations the workaround is to update your gulpfile.js:

// Change: `buildBrowserify({ watch: true }).on('end', done);` to:
buildBrowserify({
  babelifyOptions: {
    plugins: [
      'transform-decorators-legacy',
      'transform-class-properties',
      'transform-flow-strip-types'
    ]
  },
  watch: true
}).on('end', done);

and install some additional npm packages:

npm install babel-plugin-transform-class-properties --save
npm install babel-plugin-transform-flow-strip-types --save
1 Like

@iignatov thanks for the awesome troubleshooting!

@ZiFFeL sorry you’re having issues, previous JS starters used the TypeScript compiler for transpilation, which meant that types (which are invalid syntax in JS) didn’t error, even though they should have.

You can most likely get rid of that error by removing the :NavController from nav:NavController.

1 Like

Thanks @tim !

I have done what you told me and now I get the following error:
✗ SyntaxError: /path/app/app.js: Missing class properties transform. while parsing file: /path/Shutt/app/app.js

I guess that you have to move the declaration of the class properties to the constructor. Below I made some changes to the code of the workaround that you’re using that might resolve the issue. Make sure to accordingly update the other files in your project too.

// app.js
// ...
export class SomeApp {
  // This is not a valid JS syntax and have to be moved to the constructor.
  //@ViewChild('rootNavController') nav:NavController;
  
  // Specify the types of the constructor parameters here
  // so that Angular 2 knows which providers to inject.
  static get parameters() {
    return [[Platform], [NavController]];
  }

  constructor(platform, @ViewChild('rootNavController') nav) {
    this.nav = nav;
    this.root = RootPage;
    // ...
  }
}

great help in this thread!

I may add for reference as for proxies defined in ionic.config.js they can be just moved to ionic.config.json

while the app works now, I wonder also about as I see a lot of this error in the build logs…
Error TS2304: Cannot find name 'Promise'

@iignatov thanks for the guide!! maybe this should be in the release notes?? I would add a few notes based on what I ran in to.

  1. My ionic CLI was out of date, I would advise updating to the latest before starting. It does not warn you it’s outdated at least for me.
  2. Change ionic-framework imports to ionic-android.

Also I had some gulp issues with live reload and CPU usage… I uninstalled my outdated global gulp and seemed to be okay after.

1 Like

@beachy Thanks for the feedback! I already had the latest Ionic CLI so I forgot to add it a prerequisite. I updated the post with your suggestions.

Hey guys,

I followed all the steps above, but for some reason, when I install the app in android, I only get a white screen.

I ran it with ionic serve and ionic emulate ios, and those work fine, the issue is only happening in the actual android device.

The only things that appear on the console are the following:

No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin.(anonymous function) @ whitelist.js:24
Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode. app.bundle.js:28147
DEVICE READY FIRED AFTER 516 ms app.bundle.js:65018

I added the to the index.html head section and the ‘Content-Security-Policy’ warning went away.

Any help is appreciated. Thanks.

@joe81 Check out the following topic, maybe it’s related to the problem you’re experiencing: