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:
- Update the Ionic CLI to the latest version:
npm install -g ionic@beta
-
Copy the appropriate
gulpfile.jsto your project (for TS or for JS). -
Update your
package.jsonusing the one inionic2-base-appas reference (for TS or for JS). -
Add
angular2-polyfill.jsbeforeapp.bundle.jsin theindex.htmlfile (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>
-
(UPDATE)
ImportYou should load es6-shim in a script tag before angular2-polyfills, otherwise it will define Promises without Zone having patched them, breaking change detection.es6-shiminapp.ts/app.js, i.e. add the following line at the top: -
Remove the following files:
ionic.config.js,ionic.projectandwebpack.config.js. -
Create a
ionic.config.jsonfile using this one as a reference and update it accordingly. -
From inside of your project’s folder run
npm installto install the new packages. -
If you’re using a release of Ionic framework older than
beta.3in your project you also need to change the imports in all .ts/.js files fromionic-frameworktoionic-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.
- 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.
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 
