离子 v2 html 根本不渲染（角度 2）

Question

My Problem:

I am writing an hybrid app with Ionic v2 and everything worked fine. I use ionic serve and my app just do what it should, so everthing work fine in the browser. But when I run the app on any android phone or the simulator with ionic run android I just get a blank screen with no error.

I now tried to remove every new created page and tried to comment all the code but it still just shows me a blank screen.

The weird thing about it is that I just see a blank screen but when I click on a input field (because I know where they are, i cant see them) my device opens the keyboard and I can write.

I even have the

cordova camera-preview plugin

installed and when I open this one it shows me the Camera but not the user-interface around it.

I just think the HTML is not rendered, but I just can't get it to work.

Ionic events like onViewDidEnter is entered and it displays an alert() but all my HTML is not rendered.

I would be glad about every little help

package.json

    {
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "2.1.1",
    "@angular/compiler": "2.1.1",
    "@angular/compiler-cli": "2.1.1",
    "@angular/core": "2.1.1",
    "@angular/forms": "2.1.1",
    "@angular/http": "2.1.1",
    "@angular/material": "^2.0.0-alpha.10",
    "@angular/platform-browser": "2.1.1",
    "@angular/platform-browser-dynamic": "2.1.1",
    "@angular/platform-server": "2.1.1",
    "@ionic/storage": "1.1.6",
    "@types/hammerjs": "^2.0.33",
    "ang2-parallax": "^1.0.2",
    "hammerjs": "^2.0.8",
    "ionic-angular": "2.0.0-rc.3",
    "ionic-native": "2.2.3",
    "ionicons": "3.0.0",
    "ng2-progressbar": "^1.0.3",
    "ng2-slim-loading-bar": "^2.0.4",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "0.0.45",
    "typescript": "2.0.6"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-statusbar",
    "cordova-plugin-console",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [],
  "description": "An Ionic project"
}

Answer 1

The Error:

I used "too many" variables in an array in an .scss-file.

I have this variable:

$colors: ( primary: #387ef5, secondary: #32db64, danger: #f53d3d, light: #f4f4f4, dark: #222, appcolor: #A717A5, tabscolor: #3441a5, progress: #a90329, NAVY-style: #001f3f, BLUE-style: #0074D9, AQUA-style: #7FDBFF, TEAL-style: #39CCCC, OLIVE-style:#3D9970, GREEN-style:#2ECC40, LIME-style: #01FF70, YELLOW-style:#FFDC00, ORANGE-style:#FF851B, RED-style: #FF4136, MAROON-style:#85144b, FUCHSIA-style:#F012BE, PURPLE-style:#B10DC9, BLACK-style:#111111, GRAY-style:#AAAAAA, SILVER-style:#DDDDDD magenta1 : #EE00EE, mediumorchid1: #7A378B, slategray1: #6C7B8B, skyblue1: #4A708B, springgreen1: #008B45, darkgreen1: #006400, yellow1: #8B8B00, warmgrey: #808069, orange1: #CD8500, lightsalmon1: #8B5742, olivedrab1: #8E8E38, dark-blue1: #07064c, purplelight1: #8e50d7, purple1: #8238a3, brown1: #771e10, brownorange1: #e38c2d, lightlight1: #dbdcff, darkbrown1: #230100, darkred1: #8e0400, rosa1: #f6546a, militargreen1: #313304, base1: #baa676, skin1: #c6a339, graay1: #4f5951, redlight1: #853b35, weirdgreen1: #515310, weirdergreen1: #c0bd6b, octablue1: #064a6c, hashgray1: #A9A9A9 );

And if this $colors-variable contains more than 29 colorvalues, my complete HTML-Rendering is skipped or just don't work. so I am just using a other way to keep this array under 29 elements.

That solved my problem.

Answer 2

Looking at your package.json you havent added android platform. First do

npm install -g cordova

You dont have cordova installed as global Then do the below steps.

ionic platform add android

An entry will be added in cordovaPlatforms[]

Build your app for android before run.

ionic build android