Ionic2

[Andrea_M_]

Hi Guys,

we discovered the new version of ionic: ionic2, but it seems isn't possible to use it on Intel XDK.

We ask for information about how to use ionic 2 in Intel XDK.

Thanks in advance

Best regards.

[Amrita_C_Intel]

Hello,

Did you try to use it?  Are you trying to build with app designer?

[Chris_P_Intel]

If I'm not mistaken, Ionic 2 is still in Beta.  App Designer does not yet support Ionic 2.

You should be able to use it with the XDK, only not in the Design view.

[Developer_A_1]

Using with great results ionic2 and XDK and found a serious problem: the embedded browser/engine used in XDK emulator doesn't support some advanced features of JS... for example inside angular2's core, zone.js and other modules we have errors near snippets like:

Object.defineProperty(XMLHttpRequest.prototype, 'onreadystatechange', {
     get: function () {
                return true;
            }
        });

var parameters = new Array(typeOrFunc.length);
        parameters.fill(undefined);
        return parameters;

[...] Array.from [...]

it seems js engine inside XDK doesn't support some of these features (mainly as per ECMA-262, 6th edition, like Array.from Array.fill, etc.). We've seen navigator.appVersion is not the latest possible... is there any workaround? Iwas thinking of adding a custom js inside index.html, but would like a stable workaround or an update...

Thank you in advance.

[Developer_A_1]

I've tried a "build" and it works: the problem so is the embedded browser/js-engine as stated. Could you please tell me something about this?

I'm also planning to try transpiling generated ...bundle.js from ES6 to a previous version: I will post the result, if any.

[Developer_A_1]

Just to say that a simple transpiling isn't a solution as it seems there are some references that can't be overridden. 

Simply put if you run for example (snippet from zone.js/dist/zone):

Object.defineProperty(XMLHttpRequest.prototype, 'onreadystatechange', {
    get: function () {
         return true;
    }
});

• inside latest Chrome, it works
• inside XDK's js-console it rises an error

[PaulF_IntelCorp]

The version of Chromium used inside of node-webkit, which is what supports the XDK Emulate tab, is:

chromium: "38.0.2125.122"

This is likely the reason for the issue you are describing. A request has been filed to update the underlying version of Chromium in the system, until then, you are limited to the features supported by that version of Chromium when using the Emulate tab.

[Developer_A_1]

Thank you very much for your reply.

Yes: we agree the point is the stated version (as we've already discovered and tested). We hope it will be updated soon somehow, while we still enjoy your wonderful sw.

Thank you again.

[Gabriele_V_]

Hi Developer A.

Could you share how to add Ionic2 / Angular2 to XDK ?

I'm new to XDK and NPM, but I haven't found any documentation on how to add a new framework in addition to standard provided ones.

Thanks

[PaulF_IntelCorp]

Gabriele -- you cannot add frameworks to the "Design" or "App Developer" tool, those frameworks are fixed. You can, however, use any framework you want as if you were using them in a browser client app. In other words, you can build your UI by hand without the use of App Designer, which is simply a tool for building a UI, but is not required to build a UI. In that case, create an app based on blank template and make sure the "use App Designer" box is cleared when you create the template.

[Angel_T_]

@Paul - even though if we are not using App Designer a walkthrough how to add UI framework to our Intel XDK project will be appreciated.

[PaulF_IntelCorp]

Angel -- there are many examples of how to use UI frameworks in Cordova and PhoneGap apps, the XDK is building standard Cordova apps. For example, this article includes pointers to some samples for Framework7 > http://phonegap.com/blog/2015/11/30/framework7/ < In essence, you start with the blank Cordova template, add the framework lib files you need to your project folder (somewhere in the www folder) and reference them as appropriate for the framework within your index.html file. After that, it is very framework-specific. Find a Cordova or PhoneGap sample/template and you can borrow the source directly from it.