How do you get Angular.js to work in a Windows 8 store app?-Collection of common programming errors

11 years ago

admin

2 minutes

The app runs but Angular data objects are not recognized.

Here is the JavaScript error I am getting:

Exception was thrown at line 1059, column 11 in ms-appx://28934b41-4dd2-4414-b9a9-
a73c11c1b743/js/angular.js
0x800a139e - JavaScript runtime error: No module: ngLocale
Exception was thrown at line 4473, column 9 in ms-appx://28934b41-4dd2-4414-b9a9-
a73c11c1b743/js/angular.js
0x800a139e - JavaScript runtime error: HierarchyRequestError
The program '[5112] WWAHost.exe' has exited with code 1 (0x1).

Here is the function around line 1059 in angular.js:

return ensure(modules, name, function() {
    if (!requires) {
      throw Error('No module: ' + name);
    }

And here is the function around line 4473:

 if (parent) {
    parent.replaceChild(newNode, oldNode);
  }

I was able to fix the first error that I came across:

Unhandled exception at line 2031
 JavaScript runtime error: Unable to add dynamic content

by wrapping all of angular.js with MSApp.execUnsafeLocalFunction

  MSApp.execUnsafeLocalFunction(function () {
          ....
      });

These errors are from a test app that I created following the todo list example from the Angular.js homepage.

Now what? According to a free Microsoft Event I attended, “It is easy to add any third party JavaScript framework/library to a Windows 8 app!” I may be new to this…but I don’t think this is very easy!

Is it even possible to use Angular.js with a Windows 8 app?

The reason is because Angular puts html comment tags for ng-repeat and similar directives. Unfortunately Microsoft considers these to be unsafe when put in from Javascript using .innertHTML and is not allowed. This can be found here:

http://msdn.microsoft.com/en-us/library/windows/apps/hh465388.aspx

It happens at line 1534 in jQLite:
```
var div = document.createElement('div');
            // Read about the NoScope elements here:
            // http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx
            div.innerHTML = ' ' + element; // IE insanity to make NoScope elements work!
            div.removeChild(div.firstChild); // remove the superfluous div
```
What happens is the element is
Then when angular does div.innerHTML = … the element gets removed. If you put a break point at div.removeChild, you will notice the div.innerHTML is without the element.

[EDIT] After writing this response I tried adding
```
MSApp.execUnsafeLocalFunction(function () { div.innerHTML = ' ' + element });
```
It works! Apparently you have to wrap all of angularjs in MSApp.execUnsafeLocalFunction and then that line specifically.