Angular doesn't seem to work in Win8

[jchannon]

In my attempt at evaluating JS frameworks, I copied the TODO MVC Angular demo and put it into a Win8 app but it throws an exception when the app starts up:

JavaScript runtime error: Unable to add dynamic content. A script attempted to inject     
dynamic content or elements previously modified dynamically that might be unsafe. For 
example, using the innerHTML property to add script or malformed HTML will generate this 
exception. Use the toStaticHTML method to filter dynamic content or explicitly create 
elements and attributes with a method such as createElement.

It stops on a.appendChild(c)

I referenced jQuery 1.8.2 separately but same error and also the same error with https://github.com/appendto/jquery-win8

[robbieferrero]

I believe this is related to new security requirements for "Metro" apps. You can read more about it here: http://www.incloud.de/2012/08/windows-8-using-jquery-for-app-development/ and here http://msdn.microsoft.com/en-us/library/windows/apps/hh849625.aspx

I'm not sure if having code specifically for Windows 8 apps in Angular is the solution, maybe a fork specifically for that use case?

[jchannon]

Hi,

I managed to get it working and wrote a blog post you can see here http://blog.jonathanchannon.com/2013/01/24/using-angularjsbackbonejs-in-windows-8-javascript-app/

[latentflip]

So this issue can be closed now right? [readyToClose]

[jchannon]

Yes

On 29 January 2013 15:42, Philip Roberts [email protected] wrote:

So this issue can be closed now right? [readyToClose]

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/1853#issuecomment-12840538.

[IvanRave]

The same error:

AngularJS v1.2.0-rc.3 C19141

angular.element(document).find('head').prepend('<style type="text/css">@charset "UTF-8";[ng\\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\\:form{display:block;}</style>');

Jquery-win8 project terminated: https://github.com/appendto/jquery-win8
Now use Jquery2.0.3

http://net.tutsplus.com/tutorials/javascript-ajax/building-windows-store-applications-with-jquery-2-0/
How about change "prepend" to "appendTo"? Create "style" element and appendTo "head"?

[tsquillario]

I seem to be running into this too. I'm using angular 1.2.4, even if I don't include the jquery library I get the dymanic content error on the prepend function.

Unhandled exception at line 2717, column 9 in ms-appx://53048797-f89c-4a9b-ad74-06617383ae9f/js/plugins/angular.js
0x800c001c - JavaScript runtime error: Unable to add dynamic content. A script attempted to inject dynamic content, or elements previously modified dynamically, that might be unsafe. For example, using the innerHTML property to add script or malformed HTML will generate this exception. Use the toStaticHTML method to filter dynamic content, or explicitly create elements and attributes with a method such as createElement.  For more information, see http://go.microsoft.com/fwlink/?LinkID=247104.

[caitp]

Oh good, lets just prevent dynamic content generation entirely, what a charming idear.

Anyways, according to MSDN, windows packaged apps throw security exceptions when you mess with certain DOM attributes / methods: http://msdn.microsoft.com/en-us/library/windows/apps/hh465380.aspx

I don't think it's reasonable to make Angular live in that tiny ecosystem, because fitting within those constraints would break the html compiler pretty radically, as far as I can tell... But maybe there's something which we could do.

---

setInnerHTMLUnsafe, setOuterHTMLUnsafe
Writes the specified HTML without using safe HTML filtering. (These functions are a part of the WinJS.)
Because they have limited access to the system, pages in the web context are not subject to these restrictions: properties and functions such as innerHTML and pasteHTML don't check for potentially malicious code.

We might be able to work around this using those, while adding minimal code... but I am not the person to do this as I do not have access to a test environment

[jchannon]

Take a look
http://blog.jonathanchannon.com/2013/01/24/using-angularjsbackbonejs-in-windows-8-javascript-app/

[caitp]

Yes, execUnsafeLocalFunction is an option as well... Would you like to see if you can make the angular html compiler / jqLite / $sce to play nice with these? If we can do it without adding too much code and causing security issues, I think that's awesome.

I'm not sure if using these would make MS unwilling to publish apps though, if it did, that would be a problem (nobody would use Angular for windows apps in that case!)

Anyways, people with access to windows devices, please look into this!

[asimbashir]

is there any update on this? Can we now use angular safely in Windows8 app?

[jokeyrhyme]

You can get around the initial errors by manually enabling ngCSP: https://code.angularjs.org/1.2.18/docs/api/ng/directive/ngCsp
This involves adding ng-csp to the HTML element, and including the CSP CSS file in your HEAD section. This is required for secure CSP pages, anyway, but it will somewhat slow down evaluation of binding expressions.

Even having done this, however, directive templates trigger exceptions when insertion is attempted. :( This is my experience testing Angular 1.2.18 with Windows Phone 8.1.

[jokeyrhyme]

@petebacondarwin @latentflip @jchannon is it worth reopening this ticket until Angular proper supports the WinJS environment? Or until a statement denying support for WinJS is officially made?

[jokeyrhyme]

jQuery 2.0 was supposed to compensate for WinJS.
jQuery 2.1.1 triggers errors in Windows Phone 8.1 due to a change in Sizzle: jquery/sizzle#274 (comment)
However, even downgrading back to jQuery 2.0, Angular.JS still seems to be triggering the error.

[luisrudge]

any news?

[jokeyrhyme]

So, I built this to duck-punch jQuery 2 into working in the local context: https://github.com/blinkmobile/winjs-localcontext-adapter
As long as this is done prior to loading Angular.JS, then Angular will use this version of jQuery instead of its built-in jQLite, so it will also be fine.

[dkarzon]

Have a look at winstore-compat.js its a library build by MSOpenTech which lets you use libraries such as this inside a Windows Store javascript app. It allows for safe usage of some DOM functions that are used by angular, ie. innerHTML and outerHTML etc.

Include that js file in your project and you will stop getting that error.

https://github.com/MsopenTech/winstore-jscompat

[petebacondarwin]

It seems like there is some movement from you guys in the Window community to push this forward. It would be great if you could come to a consensus of the best solution, whether it is a change to Angular (PR required) or a workaround using 3rd party code. Let's leave this issue open in the Backlog for a bit and see what you can come up with.

[petebacondarwin]

You might be interested to hear that we are close to merging a PR that allows you to specify the JQuery version you want to use: #10761

[gkalpak]

FWIW, this article also seems to indicate that winstore-jscompat does indeed enable Angular apps to run on Windows.

[dkarzon]

I have an app in the Windows Store using Ionic with winstore-compat so I can confirm that they work well together. This file actually comes packaged in when you create a new cordova project with the Visual Studio tools so they are pushing it a bit.

[lgalfaso]

#1853 (comment) shows a solution to this issue. Closing

[dkarzon]

For those interested here is a link to the project: https://github.com/MSOpenTech/winstore-jscompat