Ionic 2 beta45 - ReferenceError: Zone is not defined

Ionic Framework ionic-v3
1

Hi chaps,

updated to Ionic2-beta44 and Angular2-beta0.

Getting this error on a fresh install:

ReferenceError: Zone is not defined

Could it be that the angular2-polyfills.js file is not being included somewhere in the dependencies?

Anyone stubmled on this problem? :smile: Thanks chaps!

2

2 things:

  1. Ionic 2 current version is alpha.45, CLI is beta.15
  2. Can you put your package.json, ionic.config.js, webpack.config.js in pastebin to debug?
3

Thanks for the interest!
Ok, Just updated everything to latest as suggested.

I’m going through everything again, looks like the TypeScript version of the starter app is not ready yet.

https://github.com/driftyco/ionic2-starter-tabs/tree/typescript

I’m copying the configs across and moved the “app” folder out of “www”.

This is my latest achievement :smile:

GET http://localhost:8100/app/app.html 404 (Not Found)

Guess there is something I’ve missed.

4

package.json

{
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "es6-promise": "3.0.2",
    "es6-shim": "0.33.13",
    "ionic-framework": "2.0.0-alpha.45",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "awesome-typescript-loader": "^0.15.9",
    "strip-sourcemap-loader": "0.0.1",
    "typescript": "^1.7.3"
  },
  "name": "ionic2-test",
  "description": "ionic2-test: An Ionic project"
}

webpack.config.js

var path = require('path');

module.exports = {
  entry: [
    path.normalize('es6-shim/es6-shim.min'),
    'reflect-metadata',
    'web-animations.min',
    path.normalize('zone.js/dist/zone-microtask'),
    path.resolve('app/app')
  ],
  output: {
    path: path.resolve('www/build/js'),
    filename: 'app.bundle.js',
    pathinfo: false // show module paths in the bundle, handy for debugging
  },
  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'awesome-typescript',
        query: {
          'doTypeCheck': false
        },
        include: path.resolve('app'),
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        include: path.resolve('node_modules/angular2'),
        loader: 'strip-sourcemap'
      }
    ],
    noParse: [
      /es6-shim/,
      /reflect-metadata/,
      /web-animations/,
      /zone\.js(\/|\\)dist(\/|\\)zone-microtask/
    ]
  },
  resolve: {
    alias: {
      'web-animations.min': path.normalize('ionic-framework/js/web-animations.min')
    },
    extensions: ["", ".js", ".ts"]
  }
};

ionic.config.js

module.exports = {
  proxies: null,

  paths: {
    html : {
      src: ['app/**/*.html'],
      dest: "www/build"
    },
    sass: {
      src: ['app/app.+(ios|md).scss'],
      dest: 'www/build/css',
      include: ['node_modules/ionic-framework']
    },
    fonts: {
      src: ['node_modules/ionic-framework/fonts/**/*.ttf'],
      dest: "www/build/fonts"
    },
    watch: {
      sass: ['app/**/*.scss'],
      html: ['app/**/*.html'],
      livereload: [
        'www/build/**/*.html',
        'www/build/**/*.js',
        'www/build/**/*.css'
      ]
    }
  },

  autoPrefixerOptions: {
    browsers: [
      'last 2 versions',
      'iOS >= 7',
      'Android >= 4',
      'Explorer >= 10',
      'ExplorerMobile >= 11'
    ],
    cascade: false
  },

  // hooks execute before or after all project-related Ionic commands
  // (so not for start, docs, but serve, run, etc.) and take in the arguments
  // passed to the command as a parameter
  //
  // The format is 'before' or 'after' + commandName (uppercased)
  // ex: beforeServe, afterRun, beforePrepare, etc.
  hooks: {
    beforeServe: function(argv) {
      //console.log('beforeServe');
    }
  }
};
5

I have the same issue here since I upgraded the CLI and framework :frowning:

I am also using TS

6

Hey @jamespaxi, here what I did to fix the Zone issue

webpack.config.js

var path = require('path');
var paths = require('./ionic.config').paths;

module.exports = {
  entry: [
    'es6-shim/es6-shim.min',
    'reflect-metadata',
    'web-animations.min',
    path.normalize('zone.js/dist/zone-microtask'),//'zone.js',
    path.join(__dirname, paths.wwwDir, paths.appDir, paths.appSrcModule)
  ],
output: {
    path: path.join(__dirname, paths.wwwDir, paths.buildDir, paths.buildJSDir),
    filename: paths.appBuildBundle,
    publicPath: path.join(paths.buildDir, paths.buildJSDir),
    pathinfo: false // show module paths in the bundle, handy for debugging
},
module: {
   loaders: [
    {
      test: /\.ts$/,
      loader: 'awesome-typescript',
      query: {
        'doTypeCheck': false
      },
      include: [path.join(__dirname, paths.wwwDir)],
      exclude: /node_modules/
    },
    {
      test: /\.js$/,
      include: /node_modules\/angular2/,
      loader: 'strip-sourcemap'
    }
  ]
},
resolve: {
  alias: {
    'web-animations.min': 'ionic-framework/js/web-animations.min',
  },
  extensions: ["", ".js", ".ts"]
}
};
7

Another suggestion is to create a new ionic 2 project and use the new released webpack.

8

Thanks @icarus_31!

I’ve managed to sort it finally fixing the last few files the other day. Great help!

I’ll check the new released version with webpack. Kudos!