Ionic 2 Projects: updating to beta.4

@tim wrote:

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

2. Copy the appropriate gulpfile.js to your project (for TS or for JS).

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

4. 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>

5. Import es6-shim in app.ts/app.js, i.e. add the following line at the top:
   

   import 'es6-shim';

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

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

8. From inside of your project's folder run npm install to install the new packages.

9. 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

Posts: 2

Participants: 1

Read full topic