Angular: A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true

I know there are a lot of questions concerning CORS already but they don’t seem to answer my question.

So I have a client app written in Angular which will be used to create a mobile app (with Apache Cordova). The html files and JavaScript files will be loaded from the mobile device.
When I simulate that and I send requests to the REST API server I first got
“No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:82‘ is therefore not allowed access”.
So I added header(“Access-Control-Allow-Origin: *”); in my php REST API Server. I cannot specify a specific domain as the requests will come from the mobile devices.

Now I got to “A wildcard ‘*’ cannot be used in the ‘Access-Control-Allow-Origin’ header when the credentials flag is true.”

I finally found a solution but I’m not sure it is safe to keep it like this.

In my php REST API Server I added this:

if (isset($_SERVER['HTTP_ORIGIN'])) {
  header("Access-Control-Allow-Credentials: true");
  header("Access-Control-Allow-Origin: " . $_SERVER['HTTP_ORIGIN']);
  header("Access-Control-Allow-Headers: *, X-Requested-With, Content-Type");
  header("Access-Control-Allow-Methods: GET, POST, DELETE, PUT");

Please advise on this way of working. If it is not secure or no good at all, can you please tell me how to solve this issue?

Thanks a lot!

Phonegap pictureSource.PHOTOLIBRARY doesn't work with angular

Without angular it’s work fine:

<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Album</button>
<script type="text/javascript">
function onPhotoURISuccess(imageURI) {

function getPhoto(source) {, onFail, { quality: 50,
    destinationType: destinationType.imageURI,
    sourceType: source });

function onFail(message) {
  alert('Failed because: ' + message);

But when I’m trying to use angular 2 and my code doesn’t work:

<button (click)="getPhoto(pictureSource.PHOTOLIBRARY)">From Photo Album</button>

getPhoto(source) {
    alert(111);, this.onFail, { quality: 50,
        sourceType: source });
onSuccess(imageData) { = imageURI;
onFail(message) {
    alert('Photo not loaded, because: ' + message);

When I click on the button, getPhoto function doesn’t work. Because of pictureSource.PHOTOLIBRARY in the function.

How to use Onsen-UI 2 beta and Angular2 in Monaca?

how can I setup a Monaca Project to use Onsen-UI 2 AND Angular2? I tried the following: Config -> Manage JS/CSS Components… When I search for Angular2 the do actually see angular2. However, the available versions don’t contain 2.x, right now 1.5r1 is the highest available version. Am I missing something or is it just not possible right now? And if not, does anyone have a good guide so setup a PhoneGap + Angular2 + Onsen UI 2 environment?

Using PhoneGap, Angular2 TS and Onsen UI 2

I’m struggling to get a project running using PhoneGap, Angular2 for TypeScript and Onsen UI 2. The idea is to build the app for the different platforms using PhoneGap/Cordova, writing the application logic with Angular2 and the layout with Onsen2. However, since Angular2 and Onsen UI 2 are still in beta I couldn’t find some documentation/papers/tutorials/books to get things started. I got Angular2+Onsen2 running, well at least a little bit… And I got PhoneGap and Onsen running, but all three won’t work together. Does anyone have any tips/tutorials how to melt all three (for themselves pretty awesome) frameworks? I feel like I’m just missing the trick how to get them work together

Cordova, Angular2 & HTML5 Video

I’m trying to get something related to HTML5 videos working using Angular2 inside Cordova.

So far, this is what I achieved:

<video autoplay="true" loop="true" preload="auto" controls width=300 height=300 webkit-playsinline>
    <source [src]="video.url" type="video/quicktime">

My video source is loaded from the network, and filled in correctly (the video object is correctly filled with a valid url (it works on my native ios app).

The only thing I can see displayed is the default poster, I can’t play the video.

Did anyone managed to make this work ?

(I am deploying on an Android)

Hiding element in ionic2: Can't bind to '*ngIf' since it isn't a known native property

I have a problem with DOM elements in my ionic2 app. When I trying do something like this:

  <ion-tab [root]="tab1Root" tabTitle="el1" tabIcon="list-box"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="el2" tabIcon="git-pull-request"></ion-tab>
  <div *ngIf="'admin'=='admin'">
    <ion-tab [root]="tab4Root" tabTitle="Admin" tabIcon="cog"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Profile" tabIcon="person"></ion-tab>

everything is OK. But when I set angular variable in constructor:

export class TabsPage {
  constructor() {
    this.userRole = "admin";


      <ion-tab [root]="tab1Root" tabTitle="el1" tabIcon="list-box"></ion-tab>
      <ion-tab [root]="tab2Root" tabTitle="el2" tabIcon="git-pull-request"></ion-tab>
      <div *ngIf="{{userRole}}=='admin'">
        <ion-tab [root]="tab4Root" tabTitle="Admin" tabIcon="cog"></ion-tab>
      <ion-tab [root]="tab3Root" tabTitle="Profile" tabIcon="person"></ion-tab>

the application returns me an error:

Can’t bind to ‘*ngIf’ since it isn’t a known native property

How I can hide this element when userRole = 'admin'?

Ionic2 + cordova-plugin-sketch

This is the plugin I’m trying to use:

Q) I’m trying to get the cordova sketch plugin working so I can annotate an image, but can’t get this to initialise properly. What am I doing wrong?

The page loads fine and I don’t get any error alert, which is the second callback function you can see.

Yes, I’m running on the device. I know cordova plugins don’t work in the browser.


<ion-navbar *navbar header-colour>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
<ion-content padding>
  <img #sketchElement src="img/sketchpad.jpg" height="400" width="600"/>


import {NavController, NavParams} from 'ionic-framework/ionic';
import {Page, ViewController, Platform, Alert, Modal, Events} from 'ionic-framework/ionic';
import {forwardRef} from 'angular2/core';
import {OnInit, OnDestroy} from 'angular2/core';
import {ViewChild, ElementRef} from 'angular2/core';

  templateUrl: 'build/pages/sketch/sketch.html'
export class SketchPage {
  @ViewChild('sketchElement') sketchElement:ElementRef;

    private _platform: Platform,
    private _nav: NavController,
    private _viewController: ViewController,
    private _events: Events) {

  ngOnInit() {
    this._platform.ready().then(() => {
      if(navigator && navigator.sketch) {
          function() {
          function(message) {
          destinationType: navigator.sketch.DestinationType.DATA_URL,
          encodingType: navigator.sketch.EncodingType.JPEG,
          inputType : navigator.sketch.InputType.FILE_URI,
          inputData : this.sketchElement.nativeElement.src



Content-Security-Policy with Ionic and Socket.IO

I need to use a connection in my ionic2 app.

I installed via npm so i can use it like this.

import * as io from ''
this.socket = io(this.conf.connectionServer);
this.socket.on('connect', () =>{

I does work when i’m using ionic serve in chrome or when running ionic run -l
but when i just build or run everything with ionic run it won’t work.

i was able to log the error messsge on the screen of my android-device:

Error: Failed to execute: open: on :XMLHttpRequest:: Refused to connect to : http://file/ because it violates the documents Content Security Policy.....

My Content Security Policy is:

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

        connect-src 'self'

        img-src *;
        media-src *

But i cant find the right solution.I

In Chrome the connection goes to: http://141.XX.XX.25/
but on android it trys to connect to http://file/

Even if I set it to default-src *; the will only work when using Serve or run with the Livereload-option

I’m using:

Cordova CLI: 6.0.0
Gulp version: CLI version 3.9.1
Gulp local:
Ionic Version: 2.0.0-beta.1
Ionic CLI Version: 2.0.0-beta.17
Ionic App Lib Version: 2.0.0-beta.8
Node Version: v5.6.0

Angular 2 items don't update when changed from phonegap notification dialog

I am building an phonegap app with angular2.
I want to show a confirmation dialog and in success callback to update elements from angular2 view. When I do this nothing happens right away, but if I update other model on the page (what is linked with angular) my update is updated.

For confirmation dialog I use phonegap plugin: cordova-plugin-dialogs and the method called is: navigator.notification.confirm(...).

Here is my full code of my Component:

AboutComponent = ng.core
        selector: 'rl-about',
        templateUrl: 'app/components/about/view.html',
        directives: [TopBarComponent, ng.router.ROUTER_DIRECTIVES]
        constructor: [Config, function(config) {
            this.config = config;

            this.title = "About";
            this.top_bar_left = "Back";
         * Back btn
        topBarLeftClick: function(){
        changeMessage: function(){
            this.message = "Test";
            var self = this;
                "Delete this?",
                function(buttonIndex) {
                    if(buttonIndex == 1) {  //1 = Ok
                        console.log("Message before: " + self.message)  //self.message has the old value ("Test")
                        self.message = "Deleted";
                        console.log("Message after: " + self.message) //self.message has the new value ("Deleted"), but nothing changed on view.html
                "Confirm Delete",
                ["Delete", "Cancel"]

And the html looks like this:

<div class="page-wrapper">
    <rl-top-bar [title]="title" [top_bar_left]="top_bar_left" (topBarLeftClick)="topBarLeftClick()" ></rl-top-bar>
    <div class="about-info-wrapper">
        <input type="text" [(ngModel)]="other_model" id="itemtoclick"/>
        <div (click)="changeMessage()">click here</div>

{{message}} is not updating when the callback of navigator.notification.confirm is called, but it’s updated if I click for example on input box which is linked to an angular model

One hack that I found that is working is to click something from javascript when callback is called. Like this: window.document.getElementById('itemtoclick').click()

I try to add .bind(this) to navigator.notification.confirm(...) but it’s throwing error.

I try to save this to a variable before calling navigator.notification.confirm but same result.

Same result if I .bind(this) to callback method.

Somehow I have reference to this inside callback because I can read and update, but angular2 doesn’t know that I made a change to update the view.

Also this problem is only on mobile, if I try to run on browser (chrome) it’s working ok. I use phonegap build to create the .apk file for android.
But the problem is also visible if I use Phonegap mobile app for live testing.

I want to know if there is a solution that will not involve a hack like this.


This is my first phonegap app

For Android I am using phonegap build

For iOS I am using phonegap CLI

The problem is in both Android and iOS.

Edit 1 Apr 2016

I created a video to better describe the problem: See here

Also I change to not using this for onDeviceReady and the problem is still here.
Here is my main.js code:

var phonegapApp = {
    initialize: function() {
    bindEvents: function() {
        document.addEventListener('deviceready', phonegapApp.onDeviceReady, false);
    onDeviceReady: function() {
        console.log("phonegapApp onDeviceReady");
            new ng.core.Provider(ng.router.LocationStrategy, {useClass: ng.router.HashLocationStrategy})

And from index.html I call phonegapApp.initialize(); at the bottom of my body.