Missing $injector if ngApp and ngInclude are defined on the same element

[tilmanschweitzer]

I discovered this issue when I tried access the injector within my app. The use case was to manipulate my app interactively for debugging and testing purposes.

The ngApp directive is defined within a server-side template (thymeleaf) and to keep each template language clean I used the ngInclude directive to load a base template for my app.

<div ng-app="myApp" ng-include="'template.html'"></div>

Everything worked fine, until I tried to get an injector for the app and got undefined.

angular.element(document.querySelector('[ng-app]')).injector(); // returns undefined

After a lot of debugging I discovered that the directives on the same element cause the problem. The fix was quite simple...

<div ng-app="myApp"><div ng-include="'template.html'"></div></div>

... BUT it took a really long time to find the cause of this problem. The trap is that it's very likely that month go by after the initial setup of an app and the point where interactive debugging will be done.

Therefore the problem should be either fixed, or angular should warn if ngApp and ngInclude are used on the same element.

Plunker Example to reproduce the behavior: http://embed.plnkr.co/JD3vDJJrjm9MMyyXT7W3/preview

Related Issue: #10556

[petebacondarwin]

OK, so I think there the resolution to this issue is to add a note to the ngApp documentation saying that you should not use it on the same element as a directive that has element transclusion, listing some of the common ones.

An additional solution is to print some kind of warning to the console, if the compile finds a directive with element transclusion on the $rootElement. I would prefer not to do this, though.