Hugh Hou
Hugh Hou

Reputation: 2384

Upgrade from Ionic 2.2.0 to 3.0.1 break everything. Strange error

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

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:91192:7)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:90791:73)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:161802: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 App Scripts: 1.3.4
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

For reference. Here is my package.json file:

"dependencies": {
    "@angular/animations": "4.0.0",
    "@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",
    "@angular/platform-server": "4.0.0",
    "@ionic-native/core": "^3.4.2",
    "@ionic-native/google-plus": "^3.4.4",
    "@ionic-native/in-app-browser": "^3.5.0",
    "@ionic-native/keyboard": "^3.5.0",
    "@ionic-native/social-sharing": "^3.5.0",
    "@ionic-native/splash-screen": "3.4.2",
    "@ionic-native/status-bar": "^3.4.2",
    "@ionic/storage": "2.0.1",
    "angular2-elastic": "^0.13.0",
    "angularfire2": "^2.0.0-beta.8",
    "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",
    "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.4",
    "typescript": "2.2.2"
  },

I suspend the error is causing by AngularFire b/c it has this warning when running npm install :

npm WARN [email protected] requires a peer of @angular/common@^2.0.0 but none was installed.
npm WARN [email protected] requires a peer of @angular/compiler@^2.0.0 but none was installed.
npm WARN [email protected] requires a peer of @angular/core@^2.0.0 but none was installed.
npm WARN [email protected] requires a peer of @angular/platform-browser@^2.0.0 but none was installed.
npm WARN [email protected] requires a peer of @angular/platform-browser-dynamic@^2.0.0 but none was installed.

But I don't know what is keep refering the di file which is not in Angular 4!! Please help!

Upvotes: 0

Views: 430

Answers (2)

Hugh Hou
Hugh Hou

Reputation: 2384

After all night debugging, I found the issue. Here is the cause of this problem: IDE auto import statement. I use Webstorm, and it auto import everything for me. And since they collapse and hide the import for big project, I am missing the problem. So if you have a similar import issue (it can be anything, not just metadata/di, it happens on my @angular/form/... as well), do a full project search on the problem statement. For me it is this line:

import {ViewChild} from "../../node_modules/@angular/core/src/metadata/di"

After I changed it to

import {ViewChild} from "@angular/core"

The error goes away. Hope this help other moving their project from Angular 2.x to Angular 4.x.

Upvotes: 1

Suraj Rao
Suraj Rao

Reputation: 29625

I believe the issue is your ionic-image-loader package which is currently in 1.7.2. According to the changelog here, the current version in npm is 3.1.1.

It was upgraded to use ionic-native version 3 in 2.0.0. Try upgrading this package.

The package ng2-validation also moved to angular 4 in 3.9.0.

You may have to refactor your app according to the changelog.

Upvotes: 1

Related Questions