Ionic Serve loads blank page (Failed to load resouce)

Question

I have gone through all the similar issues but without any luck. I have an Ionic 2 project working on my old laptop with the following details:

Cordova CLI Version: 6.5.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v4.2.6
Xcode version: Not installed

After installing latest NPM and Ionic on my new laptop, I cloned the project through git. I faced a few issues that I resolved. At this point, when I run ionic serve, a blank page is loaded in my browser with the following errors in the console:

Failed to load resource: the server responded with a status of 404 (Not Found)

Here is what Ionic 2 looks like in my new laptop:

Cordova CLI: 6.5.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v7.9.0
Xcode version: Not installed

Any idea what the problem is or how can I go about debugging this?

UPDATE: ADDED package.json

      {
        "name": "ionic-hello-world",
        "author": "Ionic Framework",
        "homepage": "http://ionicframework.com/",
        "private": true,
        "scripts": {
          "clean": "ionic-app-scripts clean",
          "build": "ionic-app-scripts build",
          "ionic:build": "ionic-app-scripts build",
          "ionic:serve": "ionic-app-scripts serve"
        },
        "dependencies": {
          "@angular/common": "2.2.1",
          "@angular/compiler": "2.2.1",
          "@angular/compiler-cli": "2.2.1",
          "@angular/core": "2.2.1",
          "@angular/forms": "2.2.1",
          "@angular/http": "2.2.1",
          "@angular/platform-browser": "2.2.1",
          "@angular/platform-browser-dynamic": "2.2.1",
          "@angular/platform-server": "2.2.1",
          "@ionic-native/core": "^3.4.4",
          "@ionic-native/in-app-browser": "^3.4.4",
          "@ionic/storage": "1.1.7",
          "ionic-angular": "2.0.0-rc.4",
          "ionic-native": "2.2.11",
          "ionicons": "3.0.0",
          "rxjs": "5.0.0-beta.12",
          "zone.js": "0.6.26"
        },
        "devDependencies": {
          "@ionic/app-scripts": "0.0.47",
          "typescript": "2.0.9"
        },
        "cordovaPlugins": [
          "cordova-plugin-whitelist",
          "cordova-plugin-console",
          "cordova-plugin-statusbar",
          "cordova-plugin-device",
          "cordova-plugin-splashscreen",
          "ionic-plugin-keyboard"
        ],
        "cordovaPlatforms": [],
        "description": "mnmreporting: An Ionic project"
      }

Can you show the `package.json` file? – Sampath Apr 21 '17 at 16:17 — Sampath, Apr 21 '17 at 16:17
@Sampath the file added to the updated post above – Muhammad Apr 21 '17 at 18:10 — Muhammad, Apr 21 '17 at 18:10

score 0 · Answer 1 · answered Apr 21 '17 at 18:20

You have a clear issue with your package.json file.You must update it to latest packages as shown below.

 "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/in-app-browser": "3.4.2",
    "@ionic-native/splash-screen": "3.4.2",
    "@ionic-native/status-bar": "3.4.2",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.0.1",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.2.4",
    "typescript": "~2.2.1"
  },

Please see the offical file here.

score 0 · Accepted Answer · edited May 23 '17 at 12:34

0

OK, so I solved this myself. I basically had to migrate my app from Ionic 2 to Ionic 3. This can be done by following the instructions here:

https://dzone.com/articles/migrating-an-ionic-2-project-to-ionic-3

Nevertheless, after this I got an error with Storage. I fixed this using the answer here:

Can't resolve all parameters for Storage: (?)

Hope this helps someone else.

edited May 23 '17 at 12:34

Community

1
1

answered Apr 21 '17 at 20:26

Muhammad

335
7
27

Ionic Serve loads blank page (Failed to load resouce)

2 Answers2