Ionic 2 Projects: updating to beta.4


#1

Hello Ionites!

There have been some changes to Ionic 2 projects in the last few weeks. If you’re updating an existing project and running into issues, you have a couple of options. If you have made few changes to your app’s build setup, you can use the CLI to start a new project and copy in the relevent source files (your app directory by default, but you may have added other assets or sources).

If that doesn’t work, forum member @iignatov created an excellent guide on steps to update your project to work with the latest changes:

  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 (UPDATE) es6-shim as well :

<!-- Polyfill needed for platforms without Promise and Collection support -->
<script src="build/js/es6-shim.min.js"></script>
<!-- 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. (UPDATE) Import es6-shim in app.ts/app.js, i.e. add the following line at the top: You should load es6-shim in a script tag before angular2-polyfills, otherwise it will define Promises without Zone having patched them, breaking change detection.

  2. Remove the following files: ionic.config.js, ionic.project and webpack.config.js.

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

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

  5. 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).


Browserify vs. webpack

By default, the starters now use Browserify to create your app bundle. If you’re just getting started, we find Browserify to be easier to work with, but if you would like to use webpack, here are the steps to switch.

  1. Update your gulpfile
-var buildBrowserify = require('ionic-gulp-browserify-es2015');
+var buildWebpack = require('ionic-gulp-webpack');

gulp.task('watch', ['clean'], function(done){
     function(){
       gulpWatch('app/**/*.scss', function(){ gulp.start('sass'); });
       gulpWatch('app/**/*.html', function(){ gulp.start('html'); });
-      buildBrowserify({ watch: true }).on('end', done);
+      buildWebpack({ watch: true }).then(done);
     }
   );
 });

gulp.task('build', ['clean'], function(done){
   runSequence(
     ['sass', 'html', 'fonts', 'scripts'],
     function(){
-      buildBrowserify().on('end', done);
+      buildWebpack().then(done);
     }
   );
 });

2. Create a webpack.config.js file.

  • For JS projects, you can use this gist as a starting point

  • For TypeScript, try this one

3. Install the correct dependencies

  • If you’re using JS, do npm install --save-dev ionic-gulp-webpack babel-loader babel-core babel-plugin-transform-decorators-legacy babel-preset-es2015

  • If you’re using TypeScript, do npm install --save-dev ionic-gulp-webpack awesome-typescript-loader typescript

And that’s it. Thanks for hanging in there, we are still exploring the best way to make getting started with different configurations as easy as possible :rocket:


Ionic 2.0.0-beta.25
Testing ionic 2 apps
JS project to TS
Update beta.3 -> beta.4 error Maximum call stack exceeded?
ATTENTION: Upcoming Ionic 2 Starter Changes
M.values is not a function V2 Android
Why not "webpack.config.js" in my ionic2's project?
Dynamic button color
Since the Beta 4, my views don't update
Missing TypeScript source files when using Browserify in Android
Upgrading to beta8 without a project?
Ionic 2 Projects: updating to beta.6
#2

#3

Hi @tim, i’m having this error when trying to update to beta.4 in a webpack project, followed all your instructions in this post, however the error still persists:


#4

Since the update i cannot change to any new views. I used the tutorial starter template with TS, and added a new Page, contents copied from the HelloIonicPage. Others encountered this problem as well. Shall I open an issue for this? Is there any workaround/fix?

My ionic info output:

`$ ionic info

Your system information:

Cordova CLI: Not installed
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.4
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Mac OS X El Capitan
Node Version: v4.4.3
Xcode version: Xcode 7.3 Build version 7D175
`


#5

There’s 2 things to take in account when updating that there’s not in this guide:

  1. The ones of us that doesn’t use the angular2-polyfills but include manually the files, zone.js/dist/zone-microtask doesn’t exist any more in version 0.6.6, now we import with zone.js/dist/zone.

  2. Since the update i have to be careful to finish my last promise then or catch without return Promise.resolve(res) nor return Promise.reject(err) or else… well the app randomly breaks without any error, however this seems to fix that.


#6

Hi,

Thanks for these instructions. However, I find the remark about adding angular2-polyfills to index.html confusing. Does it only apply when building with browserify?

I build with webpack and including polyfills resulted in the same error as @luchillo17 mentioned. This broke some functionality of my app (Google Maps would not work for example). When omitting angular2-polyfills everything works as intended.

/David


#7

@dkoch If it’s about the second error about promises it can’t be avoided, however if about the first one check the version of Ng2 y Zone.js, maybe they missmatch, in case it doesn’t idk why happens with webpack but it shouldn’t, however i doesn’t have that issue since i’m using core.js instead of the polyfills.


#8

I’ve updated the original post to match Ionic 2 Projects: updating to beta.6.

angular2-polyfills contains reflect-metadata and zone.js, meaning you need to load es6-shim before you load angular2-polyfills, otherwise change detection for Promises will break. Things can also get messed up if Zone is loaded twice, so if you do add angular2-polyfills make sure to remove reflect-metadata and zone.js from your entries in your webpack config.