问:
Ionic 2/3 Plugin loading Issue: possibly from app.bundle.js
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:

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

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.

```<code>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
</code>```

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:

```<code>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)
</code>```

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:

```<code><!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>
</code>```

My package.json loads up like this:

```<code>{
    "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"
        ]
    }
}
</code>```

My config.xml loads up like this:

```<code><?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>
</code>```

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.

EDIT: Here's my app.module.ts

```<code>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 {}
</code>```

Geocoding Code:

```<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));

}

}
</code>```

答:
The problem is just from your index.html - and it concerns the Content-Security-Policy....
Just follow the direction below. It will just take a simple step.

From your root folder > src > index.html

change this line of code

```<code><meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: ms-appdata: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
</code>```

to

```<code><meta http-equiv="Content-Security-Policy" content="default-src *; img-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
</code>```

Your index.html should look like this

```<code><!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">
  <!--<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: ms-appdata: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">-->
<meta http-equiv="Content-Security-Policy" content="default-src *; img-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">

  <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>

  <!-- 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.log('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>
</code>```

Body:
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>

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

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

  <ion-app></ion-app>

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.

EDIT: Here's my 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));

}

}

Body:
The problem is just from your index.html - and it concerns the Content-Security-Policy....
Just follow the direction below. It will just take a simple step.

From your root folder > src > index.html

change this line of code

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: ms-appdata: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

to

<meta http-equiv="Content-Security-Policy" content="default-src *; img-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">

Your index.html should look 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">
  <!--<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: ms-appdata: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">-->
<meta http-equiv="Content-Security-Policy" content="default-src *; img-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">

  <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>

  <!-- 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.log('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>


来源: stackexchange

问:
compatibility of ASP.net Pages with other OS es
I was Planing to make my website and thought that either use ASP.net or Php as i have not used php but know c# so can do ASP.net.but problem that i came to mind as i make desktop apps are only for windows. what if i make a website in dot net (cross platform compatibility dose not hold for desktop apps) would users be able to open pages at their systems independent of os.</p>

答: Web pages are meant to be served accross multiple platforms, so you can use ANY server-side language you like because in the end, they all serve HTML.

ContentLicense: CC BY-SA 2.5


问:
Destructured parameters causing eslint no-shadow error
My understanding is destructuring like this will pick properties from the incoming argument object:

```<code>const last = "Smith" // unrelated const

const full = function({ first, last }) {
  return [first, last].filter(v => v).join(" ")
}

full({last: "Doe"}) // "Doe"
full({}) // ""
</code>```

And this seems to work the same for imports.

```<code>import last from "last"; // unrelated import

export function full({ first, last }) {
  return [first, last].filter(v => v).join(" ")
}

full({last: "Doe"}) // "Doe"
full({}) // ""
</code>```

Why then does this cause a no-shadow eslint error?

error 'last' is already declared in the upper scope no-shadow

Is there any circumstance where full could have access to the outer reference? No, right? How might I keep syntax close to this without renaming the unrelated outer last reference?

答:
It's causing an eslint error because last is declared in the import and in the the function as an argument. So inside the function, the argument last is shadowing the import last. You simply need to change the name of the parameter inside the function or turn eslint off.

```<code>import last from "last"; // unrelated import

export function full({ first, last: lst }) {
  return [first, lst].filter(v => v).join(" ")
}

full({last: "Doe"}) // "Doe"
full({}) // ""
</code>```

...or...

```<code>import last from "last"; // unrelated import

export function full({ first, last }) { // eslint-disable-line no-shadow
  return [first, last].filter(v => v).join(" ")
}

full({last: "Doe"}) // "Doe"
full({}) // ""
</code>```

ContentLicense: CC BY-SA 3.0

Body:
My understanding is destructuring like this will pick properties from the incoming argument object:

const last = "Smith" // unrelated const

const full = function({ first, last }) {
  return [first, last].filter(v => v).join(" ")
}

full({last: "Doe"}) // "Doe"
full({}) // ""

And this seems to work the same for imports.

import last from "last"; // unrelated import

export function full({ first, last }) {
  return [first, last].filter(v => v).join(" ")
}

full({last: "Doe"}) // "Doe"
full({}) // ""

Why then does this cause a no-shadow eslint error?

error 'last' is already declared in the upper scope no-shadow

Is there any circumstance where full could have access to the outer reference? No, right? How might I keep syntax close to this without renaming the unrelated outer last reference?

Body:
It's causing an eslint error because last is declared in the import and in the the function as an argument. So inside the function, the argument last is shadowing the import last. You simply need to change the name of the parameter inside the function or turn eslint off.

import last from "last"; // unrelated import

export function full({ first, last: lst }) {
  return [first, lst].filter(v => v).join(" ")
}

full({last: "Doe"}) // "Doe"
full({}) // ""

...or...

import last from "last"; // unrelated import

export function full({ first, last }) { // eslint-disable-line no-shadow
  return [first, last].filter(v => v).join(" ")
}

full({last: "Doe"}) // "Doe"
full({}) // ""


问:
Make a select statement output a number with commas
I am using SQL Server and am trying to figure out how to make a select statement output a number separated by commas. I am only able to find how to transform a number into a number with commas, which isn't what I want. The following code is the code I am trying to get to output as a number with commas. Right now when you execute the statement it returns a value of 750000.00 and I want it to return 750,000.00.

Code:

```<code>select max(c.salary) as MaxSalary
from #Career c inner join
     #Member m
    on c.Member_ID = m.Member_ID
where m.age < 35
</code>```

答:
You can use FORMAT() for SQL Server 2012 onward

```<code>select FORMAT(750000.00, 'N', 'en-us') AS 'Numeric Format'

declare @table table(salary decimal(16,4))
insert into @table
values
(1234.00),
(64423.55)

select FORMAT(sum(salary), 'N', 'en-us') AS 'Numeric Format'
from @table

--or using your tables
select FORMAT(max(c.salary), 'N', 'en-us') AS 'Numeric Format'
from #Career c inner join
     #Member m
    on c.Member_ID = m.Member_ID
where m.age < 35
</code>```

Body:
I am using SQL Server and am trying to figure out how to make a select statement output a number separated by commas. I am only able to find how to transform a number into a number with commas, which isn't what I want. The following code is the code I am trying to get to output as a number with commas. Right now when you execute the statement it returns a value of 750000.00 and I want it to return 750,000.00.

Code:

select max(c.salary) as MaxSalary
from #Career c inner join
     #Member m
    on c.Member_ID = m.Member_ID
where m.age < 35

Body:
You can use FORMAT() for SQL Server 2012 onward

select FORMAT(750000.00, 'N', 'en-us') AS 'Numeric Format'

declare @table table(salary decimal(16,4))
insert into @table
values
(1234.00),
(64423.55)

select FORMAT(sum(salary), 'N', 'en-us') AS 'Numeric Format'
from @table

--or using your tables
select FORMAT(max(c.salary), 'N', 'en-us') AS 'Numeric Format'
from #Career c inner join
     #Member m
    on c.Member_ID = m.Member_ID
where m.age < 35


问:
Dynamic_cast compatibility?
I was reading about dynamic_cast and then I encountered the following statement (from cplusplus.com):

Compatibility note: This type of dynamic_cast requires Run-Time Type
  Information (RTTI) to keep track of dynamic types. Some compilers
  support this feature as an option which is disabled by default. This
  needs to be enabled for runtime type checking using dynamic_cast to
  work properly with these types.

After the example:

```<code>// dynamic_cast
#include <iostream>
#include <exception>
using namespace std;

class Base { virtual void dummy() {} };
class Derived: public Base { int a; };

int main () {
  try {
    Base * pba = new Derived;
    Base * pbb = new Base;
    Derived * pd;

    pd = dynamic_cast<Derived*>(pba);
    if (pd==0) cout << "Null pointer on first type-cast.\n";

    pd = dynamic_cast<Derived*>(pbb);
    if (pd==0) cout << "Null pointer on second type-cast.\n";

  } catch (exception& e) {cout << "Exception: " << e.what();}
  return 0;
}
</code>```

What does the author mean by "this type of dynamic_cast"? Isn't dynamic_cast only used for polymorphic classes(almost)? And he mentions this RTTI as something that is needed for the dynamic cast to work, does that mean that you have to use dynamic_cast with caution because you do not know if it is supported fully by the compiler and therefore makes it riskier than the other casting operators which do not need this RTTI?

答:
The author in the section mentioned by you referred to the cases when you are using dynamic_cast with polymorphic types: to be a little bit more precise, when you write something like dynamic_cast<X*>(p).
In cases like that, you are going to need Run-Time Type Information so that dynamic_cast can be used at all (see the example below).

You can make the compiler disable the generation of such information about every class with virtual functions by using the mentioned compiler option, -fno-rtti, but it's rarely recommended.

"Other" cases are about the usage of dynamic_cast for void*s.

For example, consider the following code:

```<code>class A {
public:
  virtual ~A() = default;
};

class B : public A {};

int main()
{
  A *p = new B();
  void *pv = dynamic_cast<void*>(p);
  //B *pb = dynamic_cast<B*>(p);

  delete p;

  return 0;
}
</code>```

If you compile the code with g++ test.cpp -std=c++11 -fno-rtti, it's gonna be just fine. But, if you do the same after uncommenting B *pb = dynamic_cast(p);, the compiler is going to give the following error message for this specific line: error: ‘dynamic_cast’ not permitted with -fno-rtti. Note that the cast to void* works even if using -fno-rtti (which has been set either manually or by default).

Title: Dynamic_cast compatibility?

Body:
I was reading about dynamic_cast and then I encountered the following statement (from cplusplus.com):

Compatibility note: This type of dynamic_cast requires Run-Time Type
  Information (RTTI) to keep track of dynamic types. Some compilers
  support this feature as an option which is disabled by default. This
  needs to be enabled for runtime type checking using dynamic_cast to
  work properly with these types.

After the example:

// dynamic_cast
#include <iostream>
#include <exception>
using namespace std;

class Base { virtual void dummy() {} };
class Derived: public Base { int a; };

int main () {
  try {
    Base * pba = new Derived;
    Base * pbb = new Base;
    Derived * pd;

    pd = dynamic_cast<Derived*>(pba);
    if (pd==0) cout << "Null pointer on first type-cast.\n";

    pd = dynamic_cast<Derived*>(pbb);
    if (pd==0) cout << "Null pointer on second type-cast.\n";

  } catch (exception& e) {cout << "Exception: " << e.what();}
  return 0;
}

What does the author mean by "this type of dynamic_cast"? Isn't dynamic_cast only used for polymorphic classes(almost)? And he mentions this RTTI as something that is needed for the dynamic cast to work, does that mean that you have to use dynamic_cast with caution because you do not know if it is supported fully by the compiler and therefore makes it riskier than the other casting operators which do not need this RTTI?

Body:
The author in the section mentioned by you referred to the cases when you are using dynamic_cast with polymorphic types: to be a little bit more precise, when you write something like dynamic_cast<X*>(p).
In cases like that, you are going to need Run-Time Type Information so that dynamic_cast can be used at all (see the example below).

You can make the compiler disable the generation of such information about every class with virtual functions by using the mentioned compiler option, -fno-rtti, but it's rarely recommended.

"Other" cases are about the usage of dynamic_cast for void*s.

For example, consider the following code:

class A {
public:
  virtual ~A() = default;
};

class B : public A {};

int main()
{
  A *p = new B();
  void *pv = dynamic_cast<void*>(p);
  //B *pb = dynamic_cast<B*>(p);

  delete p;

  return 0;
}

If you compile the code with g++ test.cpp -std=c++11 -fno-rtti, it's gonna be just fine. But, if you do the same after uncommenting B *pb = dynamic_cast<B*>(p);, the compiler is going to give the following error message for this specific line: error: ‘dynamic_cast’ not permitted with -fno-rtti. Note that the cast to void* works even if using -fno-rtti (which has been set either manually or by default).


问:
How to give two components their own State in Reactjs?
I have two buttons that upon click will update a counter. I want each button to update its own counter. How can I give each button its own state but at the same time use the same onClick method?

Here is what I have thus far?

import React from 'react'
import Header from './Header'
import {Jumbotron,Badge, Glyphicon, Media, PageHeader, Button} from 'react-bootstrap'

class UpVote extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0
    }

    this.upVote = this.upVote.bind(this)
  }

  upVote() {
    this.setState({
      count: this.state.count + 1
    })
  }

  render() {
    const item = this.state.item
    return (

       <Button bsStyle="success" onClick={this.upVote}>
             {this.state.count}
      </Button>

      <Button bsStyle="success" onClick={this.upVote}>
          {this.state.count}
      </Button>

    )
  }
}

export default UpVote```

答:
You can define a new button component that keeps track of its own state and then reuse it.

```<code>import React from 'react'
import { Button} from 'react-bootstrap'

class UpVoteButton extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0
    }

    this.upVote = this.upVote.bind(this)
  }

  upVote() {
    this.setState({
      count: this.state.count + 1
    })
  }

  render() {
    return (
       <Button bsStyle="success" onClick={this.upVote}>
             {this.state.count}
      </Button>
    )
  }
}

export default UpVoteButton
</code>```

And in the original component do:

```<code>import React from 'react'
import UpVoteButton from './UpVoteButton'

class UpVote extends React.Component {

  render() {
    return (
      <div>
        <UpVoteButton/>
        <hr />
        <UpVoteButton/>
      </div>
    )
  }
}

export default UpVote
</code>```

Body:
You can define a new button component that keeps track of its own state and then reuse it.

import React from 'react'
import { Button} from 'react-bootstrap'

class UpVoteButton extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0
    }

    this.upVote = this.upVote.bind(this)
  }

  upVote() {
    this.setState({
      count: this.state.count + 1
    })
  }

  render() {
    return (
       <Button bsStyle="success" onClick={this.upVote}>
             {this.state.count}
      </Button>
    )
  }
}

export default UpVoteButton

And in the original component do:

import React from 'react'
import UpVoteButton from './UpVoteButton'

class UpVote extends React.Component {

  render() {
    return (
      <div>
        <UpVoteButton/>
        <hr />
        <UpVoteButton/>
      </div>
    )
  }
}

export default UpVote


问:
Importing an animated .gif into Windows.Forms in Powershell
I'm newer to Powershell and am running into this issue. I have a very long automated install script that runs through MySQL install/account setup and other .msi's.

While the users wait for the script to complete, I have this "Please Wait" prompt display that contains a spinning pinwheel .gif in the picturebox.

The problem is that if I set the form.visible to $true and have it close later on in the script, then the .gif itself will not move. It displays but loses its animation. If I change the form.visible to "false" and change the form to modal with adding a form.showdialog() parameter, the animation is perfect in the .gif but the script halts and can only progress after the window is closed. Is there a way for the script to progress without losing the animation in the .gif? Please help. I've found very little forums on powershell and .gif's for some reason. Here is the code for the form.

```<code>$Form = New-Object system.Windows.Forms.Form
$Form.Location= New-Object System.Drawing.Size(100,100)
$Form.Size= New-Object System.Drawing.Size(550,170)
$Form.StartPosition = "Manual"
$Form.Visible=$true
$Form.Enabled = $true

[reflection.assembly]::LoadWithPartialName("System.Windows.Forms")
$file = (get-item 'PathToMyGifFile')
$img = [System.Drawing.Image]::Fromfile($file);

[System.Windows.Forms.Application]::EnableVisualStyles();

$pictureBox = new-object Windows.Forms.PictureBox
$pictureBox.Location = New-Object System.Drawing.Size(0,1)
$pictureBox.Size = New-Object System.Drawing.Size(100,80)
$pictureBox.Image = $img
$Form.controls.add($pictureBox)

$Label1 = New-Object System.Windows.Forms.Label
$Label1.Text = "Please wait for Installation to complete"
$Label1.Location= New-Object System.Drawing.Size(110,35)
$Label1.Size = New-Object System.Drawing.Size(400,25)
$Label1Font = New-Object System.Drawing.Font("Tahoma",10,
[System.Drawing.FontStyle]::Bold)

$Label1.Font = $Label1Font
$Label1.BackColor = "white"
$Form.Controls.Add($Label1)

$Label2 = New-Object System.Windows.Forms.Label
$Label2.Text = "This may take several minutes . . ."
$Label2.Location= New-Object System.Drawing.Size(120,60)
$Label2.Size = New-Object System.Drawing.Size(370,75)
$Label2Font = New-Object System.Drawing.Font("Tahoma",10,
[System.Drawing.FontStyle]::Regular)

$Label2.Font = $Label2Font
$Label2.BackColor = "white"
$Form.Controls.Add($Label2)

$BackDrop = New-Object System.Windows.Forms.Label
$BackDrop.Location = New-Object System.Drawing.Size(0,0)
$BackDrop.Size = New-Object System.Drawing.Size(550,150)
$BackDrop.BorderStyle = [System.Windows.Forms.BorderStyle]::FixedSingle;
$BackDrop.BackColor = [System.Drawing.Color]::White

$Form.Controls.Add($WaitBackGroundBox)
$Form.Topmost = $True
[void] $Form.ShowDialog() # If absent, animation is lost. If present
                          # (combined with form.visible = $false), script
                          # halts until the form itself is closed.
</code>```

答:
I found a thread with a workaround for this that creates a new runspace and opens the form within it. That way the .gif runs normally and you can issue the form.close() command whenever you'd like further down in your code. This would come in handy just in case someone wants to use a .gif for something other than a Please Wait indicator. Posted from this site:

https://www.vistax64.com/powershell/16998-howto-create-windows-form-without-stopping-script-processing.html

```<code>$Form = New-Object system.Windows.Forms.Form
$Form.Location= New-Object System.Drawing.Size(100,100)
$Form.Size= New-Object System.Drawing.Size(550,170)
$Form.StartPosition = "Manual"
$Form.Visible=$false
$Form.Enabled = $true
$Form.Add_Shown({$Form.Activate()})

[reflection.assembly]::LoadWithPartialName("System.Windows.Forms")
$file = (get-item 'C:\path_to_your_gif.gif')
$img = [System.Drawing.Image]::Fromfile($file);

[System.Windows.Forms.Application]::EnableVisualStyles();

$pictureBox = new-object Windows.Forms.PictureBox
$pictureBox.Location = New-Object System.Drawing.Size(0,1)
$pictureBox.Size = New-Object System.Drawing.Size(100,80)
$pictureBox.Image = $img
$Form.controls.add($pictureBox)

$Label = New-Object System.Windows.Forms.Label
$Label.Text = "Please wait for Installation to complete"
$Label.Location= New-Object System.Drawing.Size(110,35)
$Label.Size = New-Object System.Drawing.Size(400,25)
$LabelFont = New-Object System.Drawing.Font("Tahoma",10,
[System.Drawing.FontStyle]::Bold)
$Label.Font = $PleaseWaitLabelFont
$Label.BackColor = "white"
$Form.Controls.Add($WaitLabel)

$WaitForm.Topmost = $True

$rs = [Management.Automation.Runspaces.RunspaceFactory]::CreateRunspace()
$rs.Open()
$rs.SessionStateProxy.SetVariable("Form", $Form)
$data = [hashtable]::Synchronized(@{text=""})
$rs.SessionStateProxy.SetVariable("data", $data)
$p = $rs.CreatePipeline({ [void] $Form.ShowDialog()})
$p.Input.Close()
$p.InvokeAsync()

## Enter the rest of your script here while you want the form to display

$WaitForm.close()
$rs.close()
</code>```

Body:
I'm newer to Powershell and am running into this issue. I have a very long automated install script that runs through MySQL install/account setup and other .msi's.

While the users wait for the script to complete, I have this "Please Wait" prompt display that contains a spinning pinwheel .gif in the picturebox.

The problem is that if I set the form.visible to $true and have it close later on in the script, then the .gif itself will not move. It displays but loses its animation. If I change the form.visible to "false" and change the form to modal with adding a form.showdialog() parameter, the animation is perfect in the .gif but the script halts and can only progress after the window is closed. Is there a way for the script to progress without losing the animation in the .gif? Please help. I've found very little forums on powershell and .gif's for some reason. Here is the code for the form.

$Form = New-Object system.Windows.Forms.Form
$Form.Location= New-Object System.Drawing.Size(100,100)
$Form.Size= New-Object System.Drawing.Size(550,170)
$Form.StartPosition = "Manual"
$Form.Visible=$true
$Form.Enabled = $true

[reflection.assembly]::LoadWithPartialName("System.Windows.Forms")
$file = (get-item 'PathToMyGifFile')
$img = [System.Drawing.Image]::Fromfile($file);

[System.Windows.Forms.Application]::EnableVisualStyles();

$pictureBox = new-object Windows.Forms.PictureBox
$pictureBox.Location = New-Object System.Drawing.Size(0,1)
$pictureBox.Size = New-Object System.Drawing.Size(100,80)
$pictureBox.Image = $img
$Form.controls.add($pictureBox)

$Label1 = New-Object System.Windows.Forms.Label
$Label1.Text = "Please wait for Installation to complete"
$Label1.Location= New-Object System.Drawing.Size(110,35)
$Label1.Size = New-Object System.Drawing.Size(400,25)
$Label1Font = New-Object System.Drawing.Font("Tahoma",10,
[System.Drawing.FontStyle]::Bold)

$Label1.Font = $Label1Font
$Label1.BackColor = "white"
$Form.Controls.Add($Label1)

$Label2 = New-Object System.Windows.Forms.Label
$Label2.Text = "This may take several minutes . . ."
$Label2.Location= New-Object System.Drawing.Size(120,60)
$Label2.Size = New-Object System.Drawing.Size(370,75)
$Label2Font = New-Object System.Drawing.Font("Tahoma",10,
[System.Drawing.FontStyle]::Regular)

$Label2.Font = $Label2Font
$Label2.BackColor = "white"
$Form.Controls.Add($Label2)

$BackDrop = New-Object System.Windows.Forms.Label
$BackDrop.Location = New-Object System.Drawing.Size(0,0)
$BackDrop.Size = New-Object System.Drawing.Size(550,150)
$BackDrop.BorderStyle = [System.Windows.Forms.BorderStyle]::FixedSingle;
$BackDrop.BackColor = [System.Drawing.Color]::White

$Form.Controls.Add($WaitBackGroundBox)
$Form.Topmost = $True
[void] $Form.ShowDialog() # If absent, animation is lost. If present
                          # (combined with form.visible = $false), script
                          # halts until the form itself is closed.

Body:
I found a thread with a workaround for this that creates a new runspace and opens the form within it. That way the .gif runs normally and you can issue the form.close() command whenever you'd like further down in your code. This would come in handy just in case someone wants to use a .gif for something other than a Please Wait indicator. Posted from this site:

https://www.vistax64.com/powershell/16998-howto-create-windows-form-without-stopping-script-processing.html

$Form = New-Object system.Windows.Forms.Form
$Form.Location= New-Object System.Drawing.Size(100,100)
$Form.Size= New-Object System.Drawing.Size(550,170)
$Form.StartPosition = "Manual"
$Form.Visible=$false
$Form.Enabled = $true
$Form.Add_Shown({$Form.Activate()})

[reflection.assembly]::LoadWithPartialName("System.Windows.Forms")
$file = (get-item 'C:\path_to_your_gif.gif')
$img = [System.Drawing.Image]::Fromfile($file);

[System.Windows.Forms.Application]::EnableVisualStyles();

$pictureBox = new-object Windows.Forms.PictureBox
$pictureBox.Location = New-Object System.Drawing.Size(0,1)
$pictureBox.Size = New-Object System.Drawing.Size(100,80)
$pictureBox.Image = $img
$Form.controls.add($pictureBox)

$Label = New-Object System.Windows.Forms.Label
$Label.Text = "Please wait for Installation to complete"
$Label.Location= New-Object System.Drawing.Size(110,35)
$Label.Size = New-Object System.Drawing.Size(400,25)
$LabelFont = New-Object System.Drawing.Font("Tahoma",10,
[System.Drawing.FontStyle]::Bold)
$Label.Font = $PleaseWaitLabelFont
$Label.BackColor = "white"
$Form.Controls.Add($WaitLabel)

$WaitForm.Topmost = $True

$rs = [Management.Automation.Runspaces.RunspaceFactory]::CreateRunspace()
$rs.Open()
$rs.SessionStateProxy.SetVariable("Form", $Form)
$data = [hashtable]::Synchronized(@{text=""})
$rs.SessionStateProxy.SetVariable("data", $data)
$p = $rs.CreatePipeline({ [void] $Form.ShowDialog()})
$p.Input.Close()
$p.InvokeAsync()

## Enter the rest of your script here while you want the form to display

$WaitForm.close()
$rs.close()


问:
To load the very previous page after closing the modal
I am new to angularjs and i have created page with two links
1)For Modal popup
2)Is a jsp page
And my issue is how i can load the very previous page after closing of the modal popup opened.
Now it is directly going back to the home or index page. I want it to go back to the previous where the modal popup was invoked?
Can any one help me to overcome this?
And thanks in advance
Code is written below
`

```<code><!DOCTYPE html>
<html lang="en" ng-app="app">

<head>
  <meta charset="UTF-8">
  <script src="css/style.css"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js"></script>
  <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">
  <script>

    // init the app with ui.router and ui.bootstrap modules
    var app = angular.module('app', ['ui.router', 'ui.bootstrap']);

    // make back button handle closing the modal
    app.run(['$rootScope', '$modalStack',
      function($rootScope, $modalStack) {
        $rootScope.$on('$stateChangeStart', function() {
          var top = $modalStack.getTop();
          if (top) {
            $modalStack.dismiss(top.key);
          }
        });
      }
    ]);

    // configure the stateProvider
    app.config(['$stateProvider', '$urlRouterProvider',
      function($stateProvider, $urlRouterProvider) {

        // default page to be "/" (home)
        $urlRouterProvider.otherwise('/');

        // configure the route states
        $stateProvider

          // define home route "/"
          .state('home', {
            url: '/'
          })
          .state('profile', {
            url: '/profile',
            templateUrl:'newjsp2.jsp'
          })

          // define modal route "/modal"
          .state('modal', {
            url: '/modals',

            // trigger the modal to open when this route is active
            onEnter: ['$stateParams', '$state', '$modal',
              function($stateParams, $state, $modal) {
                $modal

                  // handle modal open
                  .open({
                    abstract: true,
                    templateUrl: 'modalwindow.jsp',
                    backdrop: false,
                    controller: ['$scope',
                      function($scope) {

                        // handle after clicking Cancel button
                        $scope.cancelModal = function() {
                          $scope.$dismiss();
                        };
                        // close modal after clicking OK button
                        $scope.ok = function() {
                          $scope.$close(true);
                        };
                      },

                    ]
                  })

                  // change route after modal result
                  .result.then(function() {
                    // change route after clicking OK button
                    $state.transitionTo('home');
                  }, function() {
                    // change route after clicking Cancel button or clicking background
                    $state.transitionTo('home');
                  });

              }
            ]

          })
          .state('modals', {
            url: '/modals2',
            modal:true,
            // trigger the modal to open when this route is active
            onEnter: ['$stateParams', '$state', '$modal',
              function($stateParams, $state, $modal) {
                $modal

                  // handle modal open
                  .open({
                    templateUrl: 'modalwindow2.jsp',
                    backdrop: false,
                    controller: ['$scope',
                      function($scope,$state) {
                        // handle after clicking Cancel button
                        $scope.cancelModal = function() {
                          $scope.$dismiss();

                        };
                        // close modal after clicking OK button
                        $scope.ok = function() {
                          $scope.$close(true);
                        };
                      },

                    ]
                  })

                  // change route after modal result
                  .result.then(function() {
                    // change route after clicking OK button

                    $state.transitionTo('home');
                  }, function() {
                    // change route after clicking Cancel button or clicking background
                    $state.transitionTo('profile');
                  });

              }
            ]

          });
      }
    ])
    .run(function($rootScope, $location, $state) {
  $rootScope.$location = $location;
  alert(location)
  $rootScope.$state = $state;
});
  </script>
</head>

<body style="background-color: chocolate">

    <a href="#/modals" class="btn btn-default">POPUP---->1</a>
    <a href="#/modals2" class="btn btn-default">POPUP-->2</a>
    <a href="#/profile" class="btn btn-default">Profile!</a>

  <div ui-view></div>

</body>
<style>
     .modal-dialog{
          width: 100% !important;
          margin: 0px !important;
      }
      .modal-body{
          padding-bottom:488px;
      }
</style>
</html>
</code>```

'

答:
Does this do what you want?

Inside your enter functions I added var previous = $state.current.name; and then changed $state.transitionTo(...); to $state.transitionTo(previous);.

```<code><!DOCTYPE html>
<html lang="en" ng-app="app">

<head>
  <meta charset="UTF-8">
  <script src="css/style.css"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js"></script>
  <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">
  <script>

    // init the app with ui.router and ui.bootstrap modules
    var app = angular.module('app', ['ui.router', 'ui.bootstrap']);

    // make back button handle closing the modal
    app.run(['$rootScope', '$modalStack',
      function($rootScope, $modalStack) {
        $rootScope.$on('$stateChangeStart', function() {
          var top = $modalStack.getTop();
          if (top) {
            $modalStack.dismiss(top.key);
          }
        });
      }
    ]);

    // configure the stateProvider
    app.config(['$stateProvider', '$urlRouterProvider',
      function($stateProvider, $urlRouterProvider) {

        // default page to be "/" (home)
        $urlRouterProvider.otherwise('/');

        // configure the route states
        $stateProvider

          // define home route "/"
          .state('home', {
            url: '/'
          })
          .state('profile', {
            url: '/profile',
            templateUrl:'newjsp2.jsp'
          })

          // define modal route "/modal"
          .state('modal', {
            url: '/modals',

            // trigger the modal to open when this route is active
            onEnter: ['$stateParams', '$state', '$modal',
              function($stateParams, $state, $modal) {
                var previous = $state.current.name;

                $modal

                  // handle modal open
                  .open({
                    abstract: true,
                    templateUrl: 'modalwindow.jsp',
                    backdrop: false,
                    controller: ['$scope',
                      function($scope) {

                        // handle after clicking Cancel button
                        $scope.cancelModal = function() {
                          $scope.$dismiss();
                        };
                        // close modal after clicking OK button
                        $scope.ok = function() {
                          $scope.$close(true);
                        };
                      },

                    ]
                  })

                  // change route after modal result
                  .result.then(function() {
                    // change route after clicking OK button
                    $state.transitionTo(previous);
                  }, function() {
                    // change route after clicking Cancel button or clicking background
                    $state.transitionTo(previous);
                  });

              }
            ]

          })
          .state('modals', {
            url: '/modals2',
            modal:true,
            // trigger the modal to open when this route is active
            onEnter: ['$stateParams', '$state', '$modal',
              function($stateParams, $state, $modal) {
                var previous = $state.current.name;

                $modal

                  // handle modal open
                  .open({
                    templateUrl: 'modalwindow2.jsp',
                    backdrop: false,
                    controller: ['$scope',
                      function($scope,$state) {
                        // handle after clicking Cancel button
                        $scope.cancelModal = function() {
                          $scope.$dismiss();

                        };
                        // close modal after clicking OK button
                        $scope.ok = function() {
                          $scope.$close(true);
                        };
                      },

                    ]
                  })

                  // change route after modal result
                  .result.then(function() {
                    // change route after clicking OK button

                    $state.transitionTo(previous);
                  }, function() {
                    // change route after clicking Cancel button or clicking background
                    $state.transitionTo(previous);
                  });

              }
            ]

          });
      }
    ])
    .run(function($rootScope, $location, $state) {
  $rootScope.$location = $location;
  alert(location)
  $rootScope.$state = $state;
});
  </script>
</head>

<body style="background-color: chocolate">

    <a href="#/modals" class="btn btn-default">POPUP---->1</a>
    <a href="#/modals2" class="btn btn-default">POPUP-->2</a>
    <a href="#/profile" class="btn btn-default">Profile!</a>

  <div ui-view></div>

</body>
<style>
     .modal-dialog{
          width: 100% !important;
          margin: 0px !important;
      }
      .modal-body{
          padding-bottom:488px;
      }
</style>
</html>
</code>```

Body:
I am new to angularjs and i have created page with two links
1)For Modal popup
2)Is a jsp page
And my issue is how i can load the very previous page after closing of the modal popup opened.
Now it is directly going back to the home or index page. I want it to go back to the previous where the modal popup was invoked?
Can any one help me to overcome this?
And thanks in advance
Code is written below
`

<!DOCTYPE html>

  <meta charset="UTF-8">

  <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">

    POPUP---->1
    POPUP-->2
    Profile!

'

Body:
Does this do what you want?

Inside your enter functions I added var previous = $state.current.name; and then changed $state.transitionTo(...); to $state.transitionTo(previous);.

<!DOCTYPE html>
<html lang="en" ng-app="app">

<head>
  <meta charset="UTF-8">
  <script src="css/style.css"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js"></script>
  <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">
  <script>

    // init the app with ui.router and ui.bootstrap modules
    var app = angular.module('app', ['ui.router', 'ui.bootstrap']);

    // make back button handle closing the modal
    app.run(['$rootScope', '$modalStack',
      function($rootScope, $modalStack) {
        $rootScope.$on('$stateChangeStart', function() {
          var top = $modalStack.getTop();
          if (top) {
            $modalStack.dismiss(top.key);
          }
        });
      }
    ]);

    // configure the stateProvider
    app.config(['$stateProvider', '$urlRouterProvider',
      function($stateProvider, $urlRouterProvider) {

        // default page to be "/" (home)
        $urlRouterProvider.otherwise('/');

        // configure the route states
        $stateProvider

          // define home route "/"
          .state('home', {
            url: '/'
          })
          .state('profile', {
            url: '/profile',
            templateUrl:'newjsp2.jsp'
          })

          // define modal route "/modal"
          .state('modal', {
            url: '/modals',

            // trigger the modal to open when this route is active
            onEnter: ['$stateParams', '$state', '$modal',
              function($stateParams, $state, $modal) {
                var previous = $state.current.name;

                $modal

                  // handle modal open
                  .open({
                    abstract: true,
                    templateUrl: 'modalwindow.jsp',
                    backdrop: false,
                    controller: ['$scope',
                      function($scope) {

                        // handle after clicking Cancel button
                        $scope.cancelModal = function() {
                          $scope.$dismiss();
                        };
                        // close modal after clicking OK button
                        $scope.ok = function() {
                          $scope.$close(true);
                        };
                      },

                    ]
                  })

                  // change route after modal result
                  .result.then(function() {
                    // change route after clicking OK button
                    $state.transitionTo(previous);
                  }, function() {
                    // change route after clicking Cancel button or clicking background
                    $state.transitionTo(previous);
                  });

              }
            ]

          })
          .state('modals', {
            url: '/modals2',
            modal:true,
            // trigger the modal to open when this route is active
            onEnter: ['$stateParams', '$state', '$modal',
              function($stateParams, $state, $modal) {
                var previous = $state.current.name;

                $modal

                  // handle modal open
                  .open({
                    templateUrl: 'modalwindow2.jsp',
                    backdrop: false,
                    controller: ['$scope',
                      function($scope,$state) {
                        // handle after clicking Cancel button
                        $scope.cancelModal = function() {
                          $scope.$dismiss();

                        };
                        // close modal after clicking OK button
                        $scope.ok = function() {
                          $scope.$close(true);
                        };
                      },

                    ]
                  })

                  // change route after modal result
                  .result.then(function() {
                    // change route after clicking OK button

                    $state.transitionTo(previous);
                  }, function() {
                    // change route after clicking Cancel button or clicking background
                    $state.transitionTo(previous);
                  });

              }
            ]

          });
      }
    ])
    .run(function($rootScope, $location, $state) {
  $rootScope.$location = $location;
  alert(location)
  $rootScope.$state = $state;
});
  </script>
</head>

<body style="background-color: chocolate">

    <a href="#/modals" class="btn btn-default">POPUP---->1</a>
    <a href="#/modals2" class="btn btn-default">POPUP-->2</a>
    <a href="#/profile" class="btn btn-default">Profile!</a>

  <div ui-view></div>

</body>
<style>
     .modal-dialog{
          width: 100% !important;
          margin: 0px !important;
      }
      .modal-body{
          padding-bottom:488px;
      }
</style>
</html>


问:
Matplotlib.colors.ListedColormap in python
```<code>def plot_decision_regions(X, y, classifier, resolution=0.02):
    # setup marker generator and color map
    markers = ('s', 'x', 'o', '^', 'v')
    colors = ('red', 'blue', 'lightgreen', 'gray', 'cyan')
    cmap = ListedColormap(colors[:len(np.unique(y))])
    # plot the decision surface
    x1_min, x1_max = X[:, 0].min() - 1, X[:, 0].max() + 1
    x2_min, x2_max = X[:, 1].min() - 1, X[:, 1].max() + 1
    xx1, xx2 = np.meshgrid(np.arange(x1_min, x1_max, resolution),
        np.arange(x2_min, x2_max, resolution))
    Z = classifier.predict(np.array([xx1.ravel(), xx2.ravel()]).T)
    Z = Z.reshape(xx1.shape)
    plt.contourf(xx1, xx2, Z, alpha=0.4, cmap=cmap)
    plt.xlim(xx1.min(), xx1.max())
    plt.ylim(xx2.min(), xx2.max())
    # plot class samples
    for idx, cl in enumerate(np.unique(y)):
    plt.scatter(x=X[y == cl, 0], y=X[y == cl, 1],alpha=0.8,
 c=cmap(idx),marker=markers[idx], label=cl)
</code>```

<p>I was going through perceptron training in machine learning from python machine learning and found this code.In function argument classifier represent perceptron and X is input features y is output vector.I Don't understand what does ListedColormap do ?In addition to that what does meshgrid do ? I am newbie to pandas matplotlib library kindly explain me this code and what we want to do in this code? </p>

答:
A ListedColormap is a colormap with listed colors. Such a colormap may be useful for showing discrete colorlevels, e.g. in an image plot (imshow or pcolormesh), other 2D plots like tripcolor or a scatter plot. Also contour plots can take colormaps and using a ListedColormap is just one option you have to show the different contour levels in different colors.

If you already have a list of colors, you may also use this list of colors directly for your contour plot. Both options are available and the advantage of the colormap would in this case only be that you can easily create a colorbar for your plot.

See below for a comparison between directly using a list of colors and using a colormap.

```<code>import matplotlib.pyplot as plt
import numpy as np
import matplotlib.colors

x = np.linspace(-3,3)
X,Y = np.meshgrid(x,x)
Z = np.exp(-(X**2+Y**2))
fig, (ax, ax2) = plt.subplots(ncols=2)

colors=["red", "orange", "gold", "limegreen", "k",
        "#550011", "purple", "seagreen"]

ax.set_title("contour with color list")
contour = ax.contourf(X,Y,Z, colors=colors)

ax2.set_title("contour with colormap")
cmap = matplotlib.colors.ListedColormap(colors)
contour = ax2.contourf(X,Y,Z, cmap=cmap)
fig.colorbar(contour)

plt.show()
</code>```

You observe a slightly differnt behavior between the two cases, namely that the list of colors colorizes one level after the other according to the given list, while the colormap maps the range between the minimum and maximum value to the colormap, such that the first and last color are definitely in the plot, but intermediate colors (like "limegreen" in this case) are omitted, because we have one level less than colors in the color list.

Body:
def plot_decision_regions(X, y, classifier, resolution=0.02):
    # setup marker generator and color map
    markers = ('s', 'x', 'o', '^', 'v')
    colors = ('red', 'blue', 'lightgreen', 'gray', 'cyan')
    cmap = ListedColormap(colors[:len(np.unique(y))])
    # plot the decision surface
    x1_min, x1_max = X[:, 0].min() - 1, X[:, 0].max() + 1
    x2_min, x2_max = X[:, 1].min() - 1, X[:, 1].max() + 1
    xx1, xx2 = np.meshgrid(np.arange(x1_min, x1_max, resolution),
        np.arange(x2_min, x2_max, resolution))
    Z = classifier.predict(np.array([xx1.ravel(), xx2.ravel()]).T)
    Z = Z.reshape(xx1.shape)
    plt.contourf(xx1, xx2, Z, alpha=0.4, cmap=cmap)
    plt.xlim(xx1.min(), xx1.max())
    plt.ylim(xx2.min(), xx2.max())
    # plot class samples
    for idx, cl in enumerate(np.unique(y)):
    plt.scatter(x=X[y == cl, 0], y=X[y == cl, 1],alpha=0.8,
 c=cmap(idx),marker=markers[idx], label=cl)

I was going through perceptron training in machine learning from python machine learning and found this code.In function argument classifier represent perceptron and X is input features y is output vector.I Don't understand what does ListedColormap do ?In addition to that what does meshgrid do ? I am newbie to pandas matplotlib library kindly explain me this code and what we want to do in this code?

Body:
A ListedColormap is a colormap with listed colors. Such a colormap may be useful for showing discrete colorlevels, e.g. in an image plot (imshow or pcolormesh), other 2D plots like tripcolor or a scatter plot. Also contour plots can take colormaps and using a ListedColormap is just one option you have to show the different contour levels in different colors.

If you already have a list of colors, you may also use this list of colors directly for your contour plot. Both options are available and the advantage of the colormap would in this case only be that you can easily create a colorbar for your plot.

See below for a comparison between directly using a list of colors and using a colormap.

import matplotlib.pyplot as plt
import numpy as np
import matplotlib.colors

x = np.linspace(-3,3)
X,Y = np.meshgrid(x,x)
Z = np.exp(-(X**2+Y**2))
fig, (ax, ax2) = plt.subplots(ncols=2)

colors=["red", "orange", "gold", "limegreen", "k",
        "#550011", "purple", "seagreen"]

ax.set_title("contour with color list")
contour = ax.contourf(X,Y,Z, colors=colors)

ax2.set_title("contour with colormap")
cmap = matplotlib.colors.ListedColormap(colors)
contour = ax2.contourf(X,Y,Z, cmap=cmap)
fig.colorbar(contour)

plt.show()

You observe a slightly differnt behavior between the two cases, namely that the list of colors colorizes one level after the other according to the given list, while the colormap maps the range between the minimum and maximum value to the colormap, such that the first and last color are definitely in the plot, but intermediate colors (like "limegreen" in this case) are omitted, because we have one level less than colors in the color list.


答:
This may be an old-fashioned way, but converting to money and then converting to a varchar is the traditional method:</p>

```<code>select convert(varchar(255), convert(money, max(salary)), 1) as MaxSalary
</code>```

Title: Make a select statement output a number with commas

Body:
This may be an old-fashioned way, but converting to money and then converting to a varchar is the traditional method:

select convert(varchar(255), convert(money, max(salary)), 1) as MaxSalary