Angular throws errors whenever JQuery is included

Question

---

NOTE

This is a link to a sample application that reproduces the issue

---

I am using SystemJS, JSPM, Angular and jQuery in an ASP.Net 4.6 application. However, whenever I try to include jQuery in the app, I get module load errors.

I uploaded a simple app to reproduce the issue to dropbox here: Simple App That Reproduces Issue

(you will need Visual Studio 2015 to run)

Essentially, in the project there is a file /scripts/app/app.js that looks like this:

import 'jquery';
import "angular";

var ByobApp = angular.module("ByobApp", []);

When you try and run the app when the code looks like this, you will see these errors (Chrome screenshot):

However, when you change the code to this:

//import 'jquery';
import "angular";

var ByobApp = angular.module("ByobApp", []);

(commenting out jQuery import). The application will load just fine.

Obviously something is wrong with the jQuery import. But I cannot tell what!

Any help would be great.

---

EDIT

Based on comments, I changed _Layout.cshtml to look like this (including JQuery and Angular without trying to load it with SystemJs):

<script src="~/scripts/jspm_packages/npm/[email protected]/dist/jquery.min.js"></script>
<script src="~/scripts/jspm_packages/github/angular/[email protected]/angular.min.js"></script>
<script src="/scripts/jspm_packages/system.js"></script>
<script src="/scripts/config.js"></script>
<script>
    System.baseURL = "/scripts";
</script>

And I made app.js look like this:

//import 'jquery';
//import "angular";

var ByobApp = angular.module("ByobApp", []);

The error is the same.

---

EDIT 2

If I include the Zepto library instead, it works fine. Zepto is a 1:1 replacement for the jQuery API, so using it is exactly the same!

Answer 1

This behaviour is (unfortunately) to be expected when using modules to load Angular. From the documentation on initialization:

Angular initializes automatically upon DOMContentLoaded event or when the angular.js script is evaluated if at that time document.readyState is set to 'complete'.

In the modules case, Angular is loaded when document.readyState is 'complete'.

At this point Angular looks for the ng-app directive which designates your application root. If the ng-app directive is found then Angular will:

• load the module associated with the directive
• ...

Remember, Angular is loaded as a dependency of app.js, so it executed before app.js, i.e. the ByobApp does not exist! So the first step above fails and you get the error.

You must use manual initialization (as suggested in the comment from Etsitra) - the only way to use Angular with module loaders AFAIK. This works:

• remove ng-app from your main HTML file

• add the following to app.js:

  angular.bootstrap(document, ['ByobApp']);