Issue after updating to IONIC2 v10

[HamzaLJ]

I am getting the following error when I updated today to the latest ionic framework version:

app.js:21 Uncaught TypeError: Cannot set property '_config' of undefined

Cordova CLI: 6.2.0 Ionic Framework Version: 2.0.0-beta.10 Ionic CLI Version: 2.0.0-beta.32 Ionic App Lib Version: 2.0.0-beta.18 ios-deploy version: 1.8.6 ios-sim version: 5.0.8 OS: Mac OS X El Capitan Node Version: v5.9.0 Xcode version: Xcode 7.3.1 Build version 7D1014

Can you please tell me how to solve it? Everything was working perfectly before, I just got the error and it's stopping all my activity.

[brandyscarney]

Which version did you update from? beta 9? Can you paste the code on line 21 of app.js?

[HamzaLJ]

@brandyscarney thanks for the quick reply. I updated from beta 7. Here is the line: this._config = _config;

[brandyscarney]

Ok so a lot has changed since beta 7. :smile: Could you go through the upgrade steps for each release and make sure you have everything up to date:

Changelog: https://github.com/driftyco/ionic/blob/master/CHANGELOG.md Upgrade to beta 8: https://github.com/driftyco/ionic/blob/master/CHANGELOG.md#steps-to-upgrade-to-beta-8 Upgrade to beta 10: https://github.com/driftyco/ionic/blob/master/CHANGELOG.md#steps-to-upgrade-to-beta-10

You may also want to take a look at the conference app for reference: https://github.com/driftyco/ionic-conference-app

[HamzaLJ]

Okay then, I'll follow all the steps from 8 to 10 and let you know if the error disappeared. Thank you for the reply.

[HamzaLJ]

@brandyscarney I followed all the steps, and now I am getting a blank page only, no error whatsoever, what should I do?

[brandyscarney]

@HamzaLJ Are there any errors in the command prompt/terminal where you are running ionic serve? Can you try running gulp clean, then remove the node_modules folder and run npm install please. Then try ionic serve again.

[HamzaLJ]

I haven't seen any error in the terminal when running ionic serve

I've done it; however, I received some warning on the terminal after I deleted the node_modules folder and run mpm install and got the following warnings:

npm WARN @angular/http@2.0.0-rc.3 requires a peer of rxjs@5.0.0-beta.6 but none was installed. npm WARN @angular/core@2.0.0-rc.3 requires a peer of rxjs@5.0.0-beta.6 but none was installed. npm WARN angular2@2.0.0-beta.9 requires a peer of es6-shim@^0.33.3 but none was installed. npm WARN angular2@2.0.0-beta.9 requires a peer of reflect-metadata@0.1.2 but none was installed. npm WARN angular2@2.0.0-beta.9 requires a peer of rxjs@5.0.0-beta.2 but none was installed. npm WARN angular2@2.0.0-beta.9 requires a peer of zone.js@0.5.15 but none was installed.

Until now, when I run ionic serve I still see a blank page.

I really don't know what to do :(

[jgw96]

Hello @HamzaLJ , if you look in your www/build/js folder do you see a file named app.bundle.js?

[HamzaLJ]

@jgw96 I have it, it's a very large file

[brandyscarney]

@HamzaLJ Can you copy the dependencies from the starter app here into your own package.json: https://github.com/driftyco/ionic2-app-base/blob/master/package.json#L3-L15

(Make sure to remove the angular2 entry)

Then repeat the steps to remove the node_modules and run npm install again? You could also create a new project and copy over your www/ and app/ folders if that's easier but we've switched the starters to use TypeScript and I'm not sure if you're using it.

[brandyscarney]

Also, are you checking the console in developer tools for errors? If you're using Chrome: https://developers.google.com/web/tools/chrome-devtools/?hl=en

[HamzaLJ]

@brandyscarney I've copied the dependencies as you recommended, now package.json looks like the following:

{ { "dependencies": { "@angular/common": "2.0.0-rc.3", "@angular/compiler": "2.0.0-rc.3", "@angular/core": "2.0.0-rc.3", "@angular/platform-browser": "2.0.0-rc.3", "@angular/platform-browser-dynamic": "2.0.0-rc.3", "@angular/http": "2.0.0-rc.3", "es6-shim": "^0.35.0", "ionic-angular": "2.0.0-beta.10", "ionic-native": "1.2.4", "ionicons": "3.0.0", "reflect-metadata": "^0.1.3", "rxjs": "5.0.0-beta.6", "zone.js": "^0.6.12" }, "devDependencies": { "del": "2.2.0", "gulp": "3.9.1", "gulp-watch": "4.3.5", "ionic-gulp-browserify-es2015": "^1.0.2", "ionic-gulp-fonts-copy": "^1.0.0", "ionic-gulp-html-copy": "^1.0.0", "ionic-gulp-sass-build": "^1.0.0", "ionic-gulp-scripts-copy": "^2.0.0", "run-sequence": "1.1.5" }, "cordovaPlugins": [ "cordova-plugin-statusbar", "cordova-plugin-whitelist", "cordova-plugin-splashscreen", "cordova-plugin-device", "cordova-plugin-console", "ionic-plugin-keyboard" ], "cordovaPlatforms": [ "ios", { "platform": "ios", "version": "", "locator": "ios" }, "android" ], "name": "flavor", "description": "flavor: An Ionic project" }

I repeated the steps, and still when running ionic serve I still have a blank page. My project is in JS not TS. Any ideas on what's going on?

[HamzaLJ]

I am already checking the console in developer tools for errors, it's blank!

[brandyscarney]

@HamzaLJ Sorry it's hard to help without seeing the code or being able to reproduce it. Is there any chance you aren't using an ion-nav or maybe you are setting your root page to something that doesn't exist?

[mhartington]

Hmm, there could any number of things going on here. @HamzaLJ because it's JS, we can't fully get a good output on what the error could be. Could be a small error in the build, could be an incorrect root component, or a number of things

What I recommend is upgrading your project based on a new TypeScript starer. This will give you the benefits of a typescript setup, and also a chance to look over your project.

[HamzaLJ]

@brandyscarney I have commented the JS of the root page and also the whole HTML file, I only added the following to see if that will appear:

Should show here some content

However, here is my app.js

    import 'es6-shim';
    import {Component} from '@angular/core';
    import {ionicBootstrap, Platform} from 'ionic-angular';
    import {StatusBar, Push} from 'ionic-native';
    import {HomePage} from './pages/home/home';

    @Component({
      template: '<ion-nav [root]="rootPage"></ion-nav>'
    })
    export class MyApp {
      static get parameters() {
        return [[Platform]];
      }

      constructor(platform) {
        this.rootPage = HomePage;
        platform.ready().then(() => {
          StatusBar.styleDefault();
        });
      }
    }

Maybe, I have a problem in my app.js please check it out and let me know if that in a correct format.

@mhartington I can't convert to TypeScript as I almost finished the whole project which is pretty big, and also I have zero knowledge in TypeScript. So, basically, it's not a convenient solution for me.

[HamzaLJ]

Guys, thanks a lot for your help, after some debugging, I found that I am missing the following line by the end of app.js

ionicBootstrap(MyApp);

Please add more details in the documentation concerning the updates from version to version, so other users will not face difficulties. Furthermore, please support the JS more than that, as the majority of developers have a solid background in the that language.

[jgw96]

Hello @HamzaLJ im glad you figured out what was wrong! To see the changes and update instructions for each release you can always check out the changelog. We like to keep our docs focused on how to use our components, how to get started etc and use the changelog to list changes in each release and how to update your app for them. On the topic of using JavaScript for an Ionic app we have decided to go all in with TypeScript and not provide official support for ES6 anymore. Because of the immense benefits that TypeScript gives you as an Ionic 2 developer including Intellisense, which gives you helpful hints on how to use our api's as your actually typing, optional typing (the key being that they are totally optional) which can help show you potential errors in your code before you even run it, and less boilerplate code (especially when injecting services etc in your ionic 2 project), we have decided to make Typescript the defacto language to write Ionic 2 apps. I urge you to give TypeScript a try as it is just a superset of JavaScript. This means if you know Javscript, you already know TypeScript! (: Also, while you can still technically use javascript we will not be providing any official support for it. Thanks for using Ionic and have fun on your future ionic adventures!