Ionic Serve 加载空白页面（加载资源失败）答案

【问题标题】：Ionic Serve loads blank page (Failed to load resouce)Ionic Serve 加载空白页面（加载资源失败）
【发布时间】：2017-04-21 15:13:31
【问题描述】：

我已经经历了所有类似的问题，但没有任何运气。我的旧笔记本电脑上有一个 Ionic 2 项目，其中包含以下详细信息：

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

在我的新笔记本电脑上安装最新的 NPM 和 Ionic 后，我通过 git 克隆了该项目。我遇到了一些我解决的问题。此时，当我运行 ionic serve 时，我的浏览器中加载了一个空白页面，控制台中出现以下错误：

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

这是 Ionic 2 在我的新笔记本电脑中的样子：

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

知道问题出在哪里，或者我该如何调试它？

更新：添加 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"
      }

【问题讨论】：

你能显示package.json文件吗？
@Sampath 添加到上面更新帖子中的文件

标签： ionic-framework ionic2

【解决方案1】：

您的package.json 文件存在明显问题。您必须将其更新为最新的软件包，如下所示。

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

请查看offical file here。

【讨论】：

【解决方案2】：

好的，所以我自己解决了这个问题。我基本上不得不将我的应用程序从 Ionic 2 迁移到 Ionic 3。这可以按照此处的说明完成：

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

不过，在此之后，我的存储出现错误。我在这里使用答案解决了这个问题：

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

希望这对其他人有所帮助。

【讨论】：