After npm update web-animation and zone.js problem

Ionic Framework ionic-v3
1

package.json

{
  "dependencies": {
    "angular2": "2.0.0-beta.11",
    "es6-promise": "3.1.2",
    "es6-shim": "0.35.0",
    "ionic-framework": "2.0.0-beta.2",
    "ionic-native": "^1.0.9",
    "ionicons": "3.0.0-alpha.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.6.4"
  },
  "devDependencies": {
    "awesome-typescript-loader": "^0.16.2",
    "strip-sourcemap-loader": "0.0.1",
    "typescript": "^1.7.5"
  },
  "name": "cutepuppypics",
  "description": "cutePuppyPics: An Ionic project",
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard",
    "phonegap-plugin-push",
    "cordova-plugin-geolocation",
    "cordova-plugin-camera",
    "cordova-plugin-file-transfer",
    "cordova-plugin-actionsheet"
  ],
  "cordovaPlatforms": [
    "android",
    "ios"
  ]
}

webpack.config.js is

var path = require('path');


module.exports = {
  entry: [
    path.resolve('bower_components/ionic-platform-web-client/dist/ionic.io.bundle'),
    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: /\.js$/,
        loader: 'awesome-typescript',
        query: {
          doTypeCheck: false,
          useWebpackText: true
        },
        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: {
      'ionic': 'ionic-framework',
    },
    extensions: ['', '.js']
  }
};

on terminal after ionic serve -d

Module not found: Error: Cannot resolve module 'web-animations.min' in /Users/ceyhun23/Desktop/zupapp
resolve module web-animations.min in /Users/ceyhun23/Desktop/zupapp
  looking for modules in /Users/ceyhun23/Desktop/zupapp/node_modules
    /Users/ceyhun23/Desktop/zupapp/node_modules/web-animations.min doesn't exist (module as directory)
    resolve 'file' web-animations.min in /Users/ceyhun23/Desktop/zupapp/node_modules
      resolve file
        /Users/ceyhun23/Desktop/zupapp/node_modules/web-animations.min doesn't exist
        /Users/ceyhun23/Desktop/zupapp/node_modules/web-animations.min.js doesn't exist
...

if i comment web-animaton.min row on package.json

multi main
Module not found: Error: Cannot resolve module ‘zone.js/dist/zone-microtask’ in /Users/ceyhun23/Desktop/zupapp
resolve module zone.js/dist/zone-microtask in /Users/ceyhun23/Desktop/zupapp
looking for modules in /Users/ceyhun23/Desktop/zupapp/node_modules
resolve ‘file’ or ‘directory’ dist/zone-microtask in /Users/ceyhun23/Desktop/zupapp/node_modules/zone.js
resolve file
/Users/ceyhun23/Desktop/zupapp/node_modules/zone.js/dist/zone-microtask doesn’t exist
/Users/ceyhun23/Desktop/zupapp/node_modules/zone.js/dist/zone-microtask.js doesn’t exist
resolve directory
/Users/ceyhun23/Desktop/zupapp/node_modules/zone.js/dist/zone-microtask doesn’t exist (directory default file)
/Users/ceyhun23/Desktop/zupapp/node_modules/zone.js/dist/zone-microtask/package.json doesn’t exist (directory description file)
[/Users/ceyhun23/Desktop/zupapp/node_modules/zone.js/dist/zone-microtask]
[/Users/ceyhun23/Desktop/zupapp/node_modules/zone.js/dist/zone-microtask.js]
@ multi main (CLI v2.0.0-beta.17)

Please, help me. What should I do ?

2

I had the same problem and downgraded to "angular2": "2.0.0-beta.9" for the time being to fix it.

3

Renamed:

path.normalize(‘zone.js/dist/zone’),

4

I did this. But then Zone is not defined error showing on chrome console.

5

Yes, I think I should do too. Thank you!

6

Ionic 2 is currently in beta, which means that things may change and break between the releases (and in fact there are a lot of changes with a few breaking from time to time).

I would recommend you after every update to a newer release of Ionic 2 to create a new blank project (ionic start Test blank --v2, if you use TypeScript add also --ts) and copy the config files from there (or even better - perform a merge if you’ve made changes to them).

Alternatively check the latest config files in the ionic2-app-base repo (when using TypeScript, make sure to check the typescript branch) and update your config files accordingly.

1 Like
7

Hey yall, sorry for some the growing pains with ionic2 packages.

I have to agree with @iignatov for now. Between releases, until we finalize things, it’s always best to just start a new project and migrate your app/ directory over. This will make the process much easier until our build and setup get more stabilized

1 Like