Update from 2.2.0 to 3.0.1 break everything

Hughred22 · April 21, 2017, 11:36pm

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

LoLStats · April 21, 2017, 11:39pm

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

rapropos · April 21, 2017, 11:39pm

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

Hughred22 · April 21, 2017, 11:41pm

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

rapropos · April 21, 2017, 11:42pm

Did you completely clear node_modules first?

Hughred22 · April 21, 2017, 11:43pm

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

Hughred22 · April 21, 2017, 11:46pm

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.

Hughred22 · April 21, 2017, 11:46pm

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"
  ],

rapropos · April 21, 2017, 11:50pm

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?

Hughred22 · April 21, 2017, 11:52pm

How to clear npm cache you know?

rapropos · April 21, 2017, 11:55pm

$ npm cache clean.

Hughred22 · April 22, 2017, 12:05am

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?

rapropos · April 22, 2017, 12:11am

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

Hughred22 · April 22, 2017, 12:54am

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”

ajhowaboutsales · April 22, 2017, 8:23am

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.

rapropos · April 22, 2017, 9:07am

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

Hughred22 · April 22, 2017, 4:37pm

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.

Hughred22 · April 22, 2017, 4:56pm

@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’.

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

ajhowaboutsales · April 22, 2017, 4:58pm

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

Amoun · November 12, 2017, 1:12pm

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