Plugin error: possible app.bundle.js issue might be the cause?

pmcgee556 · June 8, 2017, 6:39pm

Okay so I’ve hit an uncanny problem with my Ionic framework project. I’ve been working at this error for a day and a half with no results aside from knowing what the problem might be.

My nativeGeocoder, facebookLogin, and googleLogin plugins are not working at all.

However, my Camera plugin, and Geolocation plugin works.

I get the following errors from Ionic serve to browser:

The resource from “http://localhost:8100/build/js/app.bundle.js” was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).

Which means that for some reason, my app.bundle.js is not generating when I build. I am assuming that this may be the primary cause of the problem, but I also get a few other errors on browser as well.

Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator  main.js:45448:9
Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator

Which seems to tell me to run the code on a device, however, this doesn’t quite explain why geolocation works on browser despite it being a cordova plugin, and when I run the code on an android device, and use the android debug mode to grab logs, I get this error from the android device.

android device:

I/chromium( 5892): [INFO:CONSOLE(45432)] "Native: tried calling NativeGeocoder.forwardGeocode, but the NativeGeocoder plugin is not installed.", source: file:///data/data/com.ionic.viewapp/files/files//4715e941/build/main.js (45432)
D/SystemWebChromeClient( 5892): file:///data/data/com.ionic.viewapp/files/files//4715e941/build/main.js: Line 45438 : Install the NativeGeocoder plugin: 'ionic plugin add cordova-plugin-nativegeocoder'
I/chromium( 5892): [INFO:CONSOLE(45438)] "Install the NativeGeocoder plugin: 'ionic plugin add cordova-plugin-nativegeocoder'", source: file:///data/data/com.ionic.viewapp/files/files//4715e941/build/main.js (45438)


D/SystemWebChromeClient( 5892): file:///data/data/com.ionic.viewapp/files/files//4715e941/build/main.js: Line 45432 : Native: tried calling Facebook.login, but the Facebook plugin is not installed.
I/chromium( 5892): [INFO:CONSOLE(45432)] "Native: tried calling Facebook.login, but the Facebook plugin is not installed.", source: file:///data/data/com.ionic.viewapp/files/files//4715e941/build/main.js (45432)
D/SystemWebChromeClient( 5892): file:///data/data/com.ionic.viewapp/files/files//4715e941/build/main.js: Line 45438 : Install the Facebook plugin: 'ionic plugin add cordova-plugin-facebook4'
I/chromium( 5892): [INFO:CONSOLE(45438)] "Install the Facebook plugin: 'ionic plugin add cordova-plugin-facebook4'", source: file:///data/data/com.ionic.viewapp/files/files//4715e941/build/main.js (45438)
D/SystemWebChromeClient( 5892): file:///data/data/com.ionic.viewapp/files/files//4715e941/build/main.js: Line 45357 : Error logging into Facebook

I/chromium( 5892): [INFO:CONSOLE(45432)] "Native: tried calling GooglePlus.login, but the GooglePlus plugin is not installed.", source: file:///data/data/com.ionic.viewapp/files/files//4715e941/build/main.js (45432)
D/SystemWebChromeClient( 5892): file:///data/data/com.ionic.viewapp/files/files//4715e941/build/main.js: Line 45438 : Install the GooglePlus plugin: 'ionic plugin add cordova-plugin-googleplus'
I/chromium( 5892): [INFO:CONSOLE(45438)] "Install the GooglePlus plugin: 'ionic plugin add cordova-plugin-googleplus'", source: file:///data/data/com.ionic.viewapp/files/files//4715e941/build/main.js (45438)

Again noting, the camera and geolocation plugins from Cordova work, while these plugins are not even detected by the device.

Is this because of the bundle.js error? Are plugins recognized through that file? I thought it was all processed through cordova.js.

The steps I took for debugging this were the following:

1. tried uninstalling plugins I’ve had installed but didn’t use. Also going into package.json to delete their calls.

2. tried reordering plugin order in config.xml

3. uninstalled and reinstall geocoding plugin.

4. generally tried having as few plugins loading up as possible to try to rule out any possible plugin conflicts.

None of these solutions have worked for me, and bundle.js is still not generating, which, to my guess, may be the cause for the problems.

The problem appears to come from either the config.xml, package.json, or index.html I will post the code that I have for all three of these files.

My index.html loads like this:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Ionic App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">

  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>
  <!-- Polyfill needed for platforms without Promise and Collection support -->
 <!-- The bundle which is built from the app's source code -->
 <script src="build/js/app.bundle.js"></script>

  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.error('Error', err));
    }
  </script>-->

  <link href="build/main.css" rel="stylesheet">
</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>
</html>

My package.json loads up like this:

{
    "name": "projname",
    "version": "0.0.1",
    "author": "Ionic Framework",
    "homepage": "http://ionicframework.com/",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@angular/common": "4.1.2",
        "@angular/compiler": "4.1.2",
        "@angular/compiler-cli": "4.1.2",
        "@angular/core": "4.1.2",
        "@angular/forms": "4.1.2",
        "@angular/http": "4.1.2",
        "@angular/platform-browser": "4.1.2",
        "@angular/platform-browser-dynamic": "4.1.2",
        "@ionic-native/camera": "^3.10.3",
        "@ionic-native/core": "^3.10.2",
        "@ionic-native/facebook": "^3.10.3",
        "@ionic-native/geolocation": "^3.10.3",
        "@ionic-native/google-plus": "^3.10.3",
        "@ionic-native/image-picker": "^3.10.3",
        "@ionic-native/location-accuracy": "^3.12.1",
        "@ionic-native/native-geocoder": "^3.12.1",
        "@ionic-native/splash-screen": "3.10.2",
        "@ionic-native/status-bar": "3.10.2",
        "@ionic/storage": "2.0.1",
        "cordova-android": "^6.2.3",
        "cordova-browser": "^4.1.0",
        "cordova-ios": "^4.4.0",
        "cordova-plugin-add-swift-support": "^1.6.0",
        "cordova-plugin-camera": "^2.4.1",
        "cordova-plugin-compat": "^1.1.0",
        "cordova-plugin-console": "^1.0.5",
        "cordova-plugin-device": "^1.1.4",
        "cordova-plugin-facebook4": "^1.9.0",
        "cordova-plugin-geolocation": "^2.4.3",
        "cordova-plugin-googleplus": "^5.1.1",
        "cordova-plugin-image-picker": "^1.1.3",
        "cordova-plugin-nativegeocoder": "^1.0.2",
        "cordova-plugin-request-location-accuracy": "^2.2.1",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.2.2",
        "cordova-plugin-whitelist": "^1.3.1",
        "ionic-angular": "3.3.0",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "keywords": "^0.1.2",
        "rxjs": "5.1.1",
        "sass": "^0.5.0",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.11"
    },
    "devDependencies": {
        "@ionic/app-scripts": "1.3.7",
        "@ionic/cli-plugin-cordova": "1.2.1",
        "@ionic/cli-plugin-ionic-angular": "1.2.0",
        "typescript": "2.3.3"
    },
    "description": "An Ionic project",
    "cordova": {
        "plugins": {
            "cordova-plugin-camera": {},
            "cordova-plugin-geolocation": {},
            "cordova-plugin-request-location-accuracy": {},
            "cordova-plugin-nativegeocoder": {},
            "cordova-plugin-googleplus": {
                "REVERSED_CLIENT_ID": "myreversedclientid"
            },
            "keywords": [
                "latitude",
                "longitude",
                "city",
                "location",
                "geo",
                "latlon",
                "position"
            ],
            "cordova-plugin-image-picker": {},
            "cordova-plugin-facebook4": {
                "APP_ID": "166628403873954",
                "APP_NAME": "projname"
            },
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {}
        },
        "platforms": [
            "android",
            "ios"
        ]
    }
}

My config.xml loads up like this:

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.projname.id" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>MyApp</name>
    <description>An awesome Ionic/Cordova app.</description>
    <author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
    <content src="index.html" />
    <access origin="*" />
    <allow-navigation href="http://ionic.local/*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="android-minSdkVersion" value="16" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreenDuration" value="300" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenDelay" value="3000" />
    <platform name="android">
        <allow-intent href="market:*" />
        <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
        <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
        <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
        <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
        <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
        <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
        <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
        <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
        <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
        <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
        <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
        <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
        <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
        <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
        <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
        <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
        <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
        <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <icon height="57" src="resources/ios/icon/icon.png" width="57" />
        <icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
        <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
        <icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
        <icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
        <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
        <icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
        <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
        <icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
        <icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
        <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
        <icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
        <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
        <icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
        <icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
        <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
        <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
        <icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
        <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
        <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
        <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
        <splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
        <splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
        <splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
        <splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
        <splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
        <splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
        <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
        <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
        <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
    </platform>
    <engine name="android" spec="^6.2.3" />
    <engine name="ios" spec="^4.4.0" />
    <plugin name="ionic-plugin-keyboard" spec="^2.2.1" />
    <plugin name="keywords" spec="^0.1.2">
    <plugin name="cordova-plugin-camera" spec="^2.4.1" />
    <plugin name="cordova-plugin-image-picker" spec="^1.1.3" />
    <plugin name="cordova-plugin-nativegeocoder" spec="^1.0.2" />
    <plugin name="cordova-plugin-request-location-accuracy" spec="^2.2.1" />
    <plugin name="cordova-plugin-splashscreen" spec="^4.0.3" />
    <plugin name="cordova-plugin-statusbar" spec="^2.2.2" />
    <plugin name="cordova-plugin-whitelist" spec="^1.3.1" />
    <plugin name="cordova-plugin-console" spec="^1.0.5" />
    <plugin name="cordova-plugin-device" spec="^1.1.4" />
    <plugin name="cordova-plugin-facebook4" spec="^1.9.0">
        <variable name="APP_ID" value="166628403873954" />
        <variable name="APP_NAME" value="projname" />
    </plugin>
    <plugin name="cordova-plugin-geolocation" spec="^2.4.3" />
    </plugin>
    <plugin name="cordova-plugin-googleplus" spec="^5.1.1">
        <variable name="REVERSED_CLIENT_ID" value="myreversedclientid" />
    </plugin>
</widget>

Any possible solutions here? Is there are least any way I could “reset” my config/package files and plugins back to default when I first generated the project? Is there anything wrong with how my index.html is loaded?

Is there any explanation as to why some plugins may load while others won’t?

Thanks! Any feedback is highly appreciated, I really want to continue making progress on this project.

rapropos · June 8, 2017, 7:35pm

The app.bundle.js stuff should go away. Your index.html is really old. That part of it was removed in this commit 9 months ago. Probably the safest thing to do is to generate a new project and inject your app’s code into it.

pmcgee556 · June 9, 2017, 4:29pm

I’ve tried loading up a new project. Getting the same errors as before when I try to use geocoding. I believe that code was there because I was referencing another solution that was using outdated code. So getting rid of that did take care of a few errors. It might be just in how I have it coded I suppose.

Here is an example of what I try to do with the geocoding plugin:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { NativeGeocoder, NativeGeocoderReverseResult, NativeGeocoderForwardResult } from '@ionic-native/native-geocoder';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, private nativeGeocoder: NativeGeocoder) {

  }

testvar:any;
testvar2:any;
testvar3:any;
testvar4:any;

geocodetest() {

  this.testvar='I made it into the code';

  this.nativeGeocoder.reverseGeocode(52.5072095, 13.1452818)
    .then((result: NativeGeocoderReverseResult) => this.testvar2='The address is ' + result.street + ' in ' + result.countryCode);

  this.nativeGeocoder.forwardGeocode('Berlin')
    .then((coordinates: NativeGeocoderForwardResult) => this.testvar3='The coordinates are latitude=' + coordinates.latitude + ' and longitude=' + coordinates.longitude);

    this.testvar4='I made it into the end of the code';
}

}

testvar and testvar4 will print, but testvar2 and 3 will not print and geocoding will throw either no plugin installed error, or no cordova.js error.

rapropos · June 9, 2017, 7:28pm

Stupid questions, but I have to ask them:

we are running on a device that actually has this capability, right? not in a browser?
we are certain that the underlying cordova plugin itself is installed?

pmcgee556 · June 9, 2017, 7:32pm

When I try it on a browser I get a no cordova.js error. I am guessing at this point that it’s a normal error due to a browser not having the capability of processing ionic native plugins, correct me if I’m wrong.

On my android device I get a no plugin installed error on my adb logcat. I believe those logs are somewhere on my original post.

rapropos · June 9, 2017, 7:43pm

Right. Generally speaking, cordova stuff doesn’t work in a browser.

The versions of the plugins listed in package.json look up-to-date. One thing to sort of blindly try would be removing and re-adding the android platform. Sometimes that fixes odd one-off plugin problems for me.

pmcgee556 · June 9, 2017, 10:59pm

Got it, it’s good to confirm that cordova on browser doesn’t work. I’ll be sure to keep that kind of testing to my phone from now on.

I will definitely try that! Once I got rid of the app.bundle.js most of my problems went away. Most of my plugins work now and I’ve managed to get a few more working. So it’s definitely probably just something wrong with my geocode.

Thank you so much for your help!