Update from 2.2.0 to 3.0.1 break everything

So I follow the instruction here: https://github.com/driftyco/ionic/blob/master/CHANGELOG.md#steps-to-upgrade

After I upgraded and made sure I am on latest CLI beta, when I type Ionic serve, this is the error:

Runtime Error
Cannot find module "../../node_modules/@angular/core/src/metadata/di"
Stack
Error: Cannot find module "../../node_modules/@angular/core/src/metadata/di"
    at g (http://localhost:8100/build/polyfills.js:3:7133)
    at Object.<anonymous> (http://localhost:8100/build/main.js:137034:7)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:110498:73)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:180951:70)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.defineProperty.value (http://localhost:8100/build/main.js:66:18)
    at http://localhost:8100/build/main.js:69:10

Ionic Framework: 3.0.1
Ionic Native: 2.4.1
Ionic App Scripts: 1.3.0
Angular Core: 4.0.0
Angular Compiler CLI: 4.0.0
Node: 7.5.0
OS Platform: macOS Sierra
Navigator Platform: MacIntel
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36

Try it with the latest stable CLI 2.2.3. CLI 3 has nothing to do with Ionic 3 and is still in Beta.
Did you run npm install after updating your package.json? It looks like your Angular packages are still on 2.x

1 Like

Don’t use prerelease software unless you are prepared to deal with “break everything”. Go back to using the stable CLI (2.2.3, I believe).

Yes I did. Both CLI 2.2.3 and CLI 3 has the same issue. I ran npm install many time…

Did you completely clear node_modules first?

Yes. I drag the complete folder into the trash can…

After npm install, there are these warning:

npm WARN angularfire2@2.0.0-beta.8 requires a peer of @angular/common@^2.0.0 but none was installed.
npm WARN angularfire2@2.0.0-beta.8 requires a peer of @angular/compiler@^2.0.0 but none was installed.
npm WARN angularfire2@2.0.0-beta.8 requires a peer of @angular/core@^2.0.0 but none was installed.
npm WARN angularfire2@2.0.0-beta.8 requires a peer of @angular/platform-browser@^2.0.0 but none was installed.
npm WARN angularfire2@2.0.0-beta.8 requires a peer of @angular/platform-browser-dynamic@^2.0.0 but none was installed.
npm WARN angular2-jwt@0.1.28 requires a peer of @angular/core@^2.0.0 but none was installed.
npm WARN angular2-jwt@0.1.28 requires a peer of @angular/http@^2.0.0 but none was installed.
npm WARN @ionic/cli-plugin-ionic-angular@0.0.6 requires a peer of @ionic/app-scripts@^1.3.1 but none was installed.

Here is my Package.json file:

  "dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/compiler-cli": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@ionic-native/core": "3.4.2",
    "@ionic-native/google-plus": "^3.4.4",
    "@ionic-native/splash-screen": "3.4.2",
    "@ionic-native/status-bar": "3.4.2",
    "@ionic/storage": "2.0.1",
    "@types/jasmine": "^2.5.38",
    "angular2-elastic": "^0.13.0",
    "angular2-jwt": "^0.1.23",
    "angularfire2": "^2.0.0-beta.8",
    "auth0-lock": "^10.4.0",
    "firebase": "^3.8.0",
    "font-awesome": "^4.7.0",
    "imgcache.js": "^1.0.0",
    "ionic-angular": "3.0.1",
    "ionic-image-loader": "^1.7.2",
    "ionic-native": "2.4.1",
    "ionicons": "^3.0.0",
    "ng2-cordova-oauth": "0.0.8",
    "ng2-validation": "^3.8.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.0",
    "@ionic/cli-build-ionic-angular": "0.0.3",
    "@ionic/cli-plugin-cordova": "0.0.9",
    "typescript": "~2.2.1"
  },
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard"
  ],

This smells like you still haven’t gotten rid of the v3 CLI. I would get rid of all the cli-* stuff in devDependencies. I don’t use either angularfire2 or angular2-jwt, but if those are relatively recent versions they should be OK with Angular 4, and yours don’t seem to be. Perhaps clearing npm’s cache might do something?

How to clear npm cache you know?

$ npm cache clean.

I clear my npm caches and still having the same issue. This error: Cannot find module “…/…/node_modules/@angular/core/src/metadata/di”

I google around there is no reference of this error. I am so stuck with the 3.0.1. Do I need to anything else beside follow the official changelog… Do I need to somehow install global Angualr2 update or something crazy?

1 Like

I just noticed you have “ionic-native” still installed. Get rid of that, it’s probably poisoning things.

Awwww… I remove the ionic-native and replace everything to use the brand new ionic native. Then the same error is there: This error: Cannot find module “…/…/node_modules/@angular/core/src/metadata/di”

I had the same issue.

Probably your ide has auto imported classes with the full path instead of only ‘@angular/core’. That breaks in angular4.

Do a find on “@angular/core/src/metadata/di” and replace it with just “@angular/core” in your import statements.

3 Likes

That’s a great find. I wonder whether this was the root cause of the problems in here as well.

I use webstorm and they have auto imported classes. I will def try that to see if I can fix the issue. OMG, I have not sleep since last night banging my head on my computer all night to try to find out solution lol.

@ajhowaboutsales YES YES YES. You are a life saver!! Here is WebStorm evil import: import {ViewChild} from “…/…/node_modules/@angular/core/src/metadata/di” After I get rid of it. The error go away… But now more issues tho for 3.0…

Now ion-slider being crazy and throw massive error:

polyfills.js:3 Unhandled Promise rejection: Template parse errors:
Can’t bind to ‘options’ since it isn’t a known property of ‘ion-slides’.

  1. If ‘ion-slides’ is an Angular component and it has ‘options’ input, then verify that it is part of this module.
  2. If ‘ion-slides’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
  3. To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component. ("

Take a look at the changelog from your first post. The options in slides is removed.

Hello I find the same solution,
after using the framwork, I find this

Error: Uncaught (in promise): Error: Cannot find module "@angular/core/src/metadata/di"
Error: Cannot find module "@angular/core/src/metadata/di"
    at Object.277 (http://localhost:8100/build/4.js:48:7)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
    at Object.271 (http://localhost:8100/build/4.js:11:64)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
    at http://localhost:8100/build/main.js:54:10
    at t.invoke (http://localhost:8100/build/polyfills.js:3:14976)
    at Object.onInvoke (http://localhost:8100/build/vendor.js:4979:33)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:14916)
    at r.run (http://localhost:8100/build/polyfills.js:3:10143)
    at http://localhost:8100/build/polyfills.js:3:20242
    at c (http://localhost:8100/build/polyfills.js:3:19752)
    at Object.reject (http://localhost:8100/build/polyfills.js:3:19174)
    at NavControllerBase._fireError (http://localhost:8100/build/vendor.js:48008:16)
    at NavControllerBase._failed (http://localhost:8100/build/vendor.js:48001:14)
    at http://localhost:8100/build/vendor.js:48048:59
    at t.invoke (http://localhost:8100/build/polyfills.js:3:14976)
    at Object.onInvoke (http://localhost:8100/build/vendor.js:4979:33)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:14916)
    at r.run (http://localhost:8100/build/polyfills.js:3:10143)
    at http://localhost:8100/build/polyfills.js:3:20242
Ionic Framework: 3.9.2
Ionic App Scripts: 3.1.0
Angular Core: 5.0.0
Angular Compiler CLI: 5.0.0
Node: 6.5.0

How can I fix it

thank you