ThemeableBrowser with ionic2 not working

Hey,

I’m facing a very odd problem while using the ThemeableBrowser Plugin. I’ve used it before and I was even able to see instantly the changes in Browser while using

ionic serve --lab

However, this was the InAppBrowser. But both are not working with the command above anymore. I have created a blank project and when building the project and running on simulator it doesn’t work either.

My code is very simple, the only changed file looks like this:

import { Component } from '@angular/core';
import { NavController, Platform, AlertController } from 'ionic-angular';
import { ThemeableBrowser } from 'ionic-native';

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

  constructor(public navCtrl: NavController, public platform: Platform, private alertCtrl: AlertController) {
    platform.ready().then(() => {
      //this.presentAlert();
      let options = [];
      let browser = new ThemeableBrowser('https://ionic.io', '_blank', options);
    });
  }
}

I really don’t understand why this is not working anymore. I have only tested this on iOS. In my config I added:

<allow-intent href="*"/>
  <allow-navigation href="*" />

And to my index.html:

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

Anyway it is still not working. Please help me!

Did you check the dev tools or xcode logs? Just have it a try and it all is working fine for me

how do you set the icons images in themeablebrowser

1 Like

Does this also work for you with ‘ionic serve --lab’?


EDIT: ‘ionic serve’ works and opens the a new window with the page. With ‘ionic serve --lab’ I got these error messages/warnings:

refused to load the image 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAHBAMAAADzDtBxAAAAD1BMV…h/TXEAAAAaSURBVAjXYxCEAgY4UIICBmMogMsgFLtAAQCNSwXZKOdPxgAAAABJRU5ErkJggg==' because it violates the following Content Security Policy directive: "default-src *". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

main.js:1304 Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
localhost/:74 Refused to load the script 'http://localhost:35730/livereload.js?snipver=1' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval'".
(anonymous function) @ localhost/:74
main.js:216 Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulatorcordovaWarn @ main.js:216
main.js:216 Native: tried calling Splashscreen.hide, but Cordova is not available. Make sure to include cordova.js or run in a device/simulatorcordovaWarn @ main.js:216
main.js:69344 Native: ThemeableBrowser is not installed or you are running on a browser. Falling back to window.open, all instance methods will NOT work.ThemeableBrowser @ main.js:69344
http://localhost:8101/favicon.ico Failed to load resource: the server responded with a status of 404 (Not Found)

Ok I don’t know why but now it seems to work. I changed nothing. Strange. But thank you anyway!

I have to reopen it. It does not make any sense for me at all. On thursday it worked for me on both platforms. I didn’t change anything and today on Monday it’s broken again on iOS. I really considering switching to native development for this project because it’s very hard to debug this issue.

I added the icons in the native way and on android everything works as expected.