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 notifications@github.com 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"?

[sqrlmstr5000]

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?