Ionic 2/3 Plugin loading error: Possibly from app.bundle.js

Ok so I ran into a creepy problem with my Ionic framework project. I have been working on this error for a day and a half with no results other than knowing what the problem is.

My nativeGeocoder, facebookLogin and googleLogin plugins don't work at all.

However, my Camera plugin and Geolocation plugin are working.

I am getting the following errors from Ionic for the browser:

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

      

        
        
        
      

    

This means that for some reason my app.bundle.js is not generating on build. I guess this might be the root cause of the problem, but I am also getting a few more errors in the browser.

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

      

        
        
        
      

    

It seems to be being told that I am running the code on a device, however that doesn't quite explain why geolocation works in the browser despite being a cordova plugin and when I run the code on an android device and use android debug mode to capture the logs , I am getting this error from 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)

      

        
        
        
      

    

Noting again that the camera and geolocation plugin from Cordova works, although these plugins are not even detected by the device.

Is this due to a bundle.js bug? Are plugins recognized through this file? I thought it was all handled through cordova.js.

The steps I took to debug were as follows:

1.tried to uninstall plugins which I installed but not used. Also go to package.json to remove your calls.

2. tried to reorder the plug-in order to config.xml

3. uninstall and reinstall the geocoding plugin.

4. usually tried to load plugins as much as possible to try and rule out any possible plugin conflicts.

None of these solutions worked for me and bundle.js is still not generating, which in my opinion may be causing the problems.

The problem seems to be coming from either config.xml, package.json, or index.html. I'll post the code I have for all three of these files.

My index.html is loaded 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 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 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 is loaded 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 is loaded 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 any way to "reset" my config / package files and plugins back to default when I first generated the project? Is there something wrong with how my index.html is loading?

Is there any explanation as to why some plugins might load and others might not?

Thank! Any feedback is highly appreciated, I really want to continue moving forward on this project.

EDIT: Here's app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { IdentifymytickPage } from '../pages/identifymytick/identifymytick';
import { IdguidePage } from '../pages/idguide/idguide';
import { RemovalPage } from '../pages/removal/removal';
import { SymptomsPage } from '../pages/symptoms/symptoms';
import { LoginPage } from '../pages/login/login';
import { AmericandogtickPage } from '../pages/pushpages/americandogtick/americandogtick';
import { BrowndogtickPage } from '../pages/pushpages/browndogtick/browndogtick';
import { DeertickPage } from '../pages/pushpages/deertick/deertick';
import { GenderPage } from '../pages/pushpages/gender/gender';
import { LifestagesPage } from '../pages/pushpages/lifestages/lifestages';
import { LonestartickPage } from '../pages/pushpages/lonestartick/lonestartick';
import { WesternblackleggedtickPage } from '../pages/pushpages/westernblackleggedtick/westernblackleggedtick';


import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Camera } from '@ionic-native/camera';
import { Geolocation } from '@ionic-native/geolocation';
import { GooglePlus } from '@ionic-native/google-plus';
import { ImagePicker } from '@ionic-native/image-picker';
import { Facebook } from '@ionic-native/facebook';
import { NativeGeocoder } from '@ionic-native/native-geocoder';
import { LocationAccuracy } from '@ionic-native/location-accuracy';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    IdentifymytickPage,
    IdguidePage,
    RemovalPage,
    SymptomsPage,
    LoginPage,
    AmericandogtickPage,
    BrowndogtickPage,
    DeertickPage,
    GenderPage,
    LifestagesPage,
    LonestartickPage,
    WesternblackleggedtickPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    IdentifymytickPage,
    IdguidePage,
    RemovalPage,
    SymptomsPage,
    LoginPage,
    AmericandogtickPage,
    BrowndogtickPage,
    DeertickPage,
    GenderPage,
    LifestagesPage,
    LonestartickPage,
    WesternblackleggedtickPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Camera,
    GooglePlus,
    ImagePicker,
    Facebook,
    NativeGeocoder,
    LocationAccuracy,
    Geolocation,


    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

      

        
        
        
      

    

Geocoding code:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { IdentifymytickPage } from '../identifymytick/identifymytick';
import { IdguidePage } from '../idguide/idguide';
import { RemovalPage } from '../removal/removal';
import { SymptomsPage } from '../symptoms/symptoms';
import { LoginPage } from '../login/login';
import { LocationAccuracy } from '@ionic-native/location-accuracy';
import { NativeGeocoder, NativeGeocoderReverseResult, NativeGeocoderForwardResult } from '@ionic-native/native-geocoder';




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

  constructor(public navCtrl: NavController, public geolocation: Geolocation, public nativeGeocoder: NativeGeocoder, public locac: LocationAccuracy) {

    this.watch();

  }

  nextPage()
  {
    this.navCtrl.push(IdentifymytickPage)
  }

  nextPage1()
  {
    this.navCtrl.push(IdguidePage)
  }

  nextPage2()
  {
    this.navCtrl.push(LoginPage)
  }

  nextPage3()
  {
    this.navCtrl.push(RemovalPage)
  }

  nextPage4()
  {
    this.navCtrl.push(SymptomsPage)
  }






coords:any;
accuracy:any;
error:any;

watch() {
  this.geolocation.getCurrentPosition().then((resp) => {
    this.coords = resp.coords.latitude + ' ' + resp.coords.longitude;
    this.accuracy = resp.coords.accuracy + ' meters';
  }).catch((error) => {
    this.error = 'Error getting location: ' + error;
  })
}


//
// townvar:any;
//
// nearestCity() {
//
//   this.geolocation.getCurrentPosition().then((resp) => {
//     this.nativeGeocoder.reverseGeocode(resp.coords.latitude, resp.coords.longitude)
//       .then((result: NativeGeocoderReverseResult) => this.townvar = result.city)
//       .catch((error: any) => console.log(error));
//   })
//
// }

// geolocate() {
//   let options = {
//     enableHighAccuracy: true
//   };
//
//     this.geolocation.getCurrentPosition(options).then((position: Geoposition) => {
//     this.getcountry(position);
//
//   }).catch((err) => {
//     console.error(err);
//   })
//
// }
//
// getcountry(pos) {
//   this.geocoder.reverseGeocode(pos.coords.latitude, pos.coords.longitude).then((res: NativeGeocoderReverseResult) => {
//     console.log(res.countryName, res.city, res.district)
//
//   })
// }

geolocateTEST() {

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

  this.nativeGeocoder.forwardGeocode('Berlin')
    .then((coordinates: NativeGeocoderForwardResult) => console.log('The coordinates are latitude=' + coordinates.latitude + ' and longitude=' + coordinates.longitude))
    .catch((error: any) => console.log(error));

}



}