@angular-wave/angular.ts 0.7.0-beta.0 → 0.7.1

package/src/core/scope/scope.spec.js

@@ -423,7 +423,7 @@ describe("Scope", () => {
     });
 
     it("can register listeners via watch", async () => {
-      var listenerFn = jasmine.createSpy();
+      const listenerFn = jasmine.createSpy();
       scope.$watch("a", listenerFn);
       scope.a = 1;
       await wait();
@@ -431,7 +431,7 @@ describe("Scope", () => {
     });
 
     it("can calls a listener upon registration", async () => {
-      var listenerFn = jasmine.createSpy();
+      const listenerFn = jasmine.createSpy();
       scope.$watch("a", listenerFn);
       await wait();
       expect(listenerFn).toHaveBeenCalled();
@@ -636,7 +636,7 @@ describe("Scope", () => {
     });
 
     it("calls listener with undefined old value the first time", async () => {
-      var newValueGiven;
+      let newValueGiven;
       scope.$watch("someValue", function (newValue, scope) {
         newValueGiven = newValue;
       });
@@ -646,7 +646,7 @@ describe("Scope", () => {
     });
 
     it("calls listener with new value and old value the first time if defined", async () => {
-      var newValueGiven;
+      let newValueGiven;
       scope.someValue = 123;
 
       scope.$watch("someValue", function (newValue) {
@@ -659,7 +659,7 @@ describe("Scope", () => {
     });
 
     it("calls listener with with the instance of a scope as 2nd argument", async () => {
-      var scopeInstance;
+      let scopeInstance;
       scope.someValue = 123;
 
       scope.$watch("someValue", function (_1, m) {
@@ -1554,7 +1554,7 @@ describe("Scope", () => {
 
       it("can pass the new value of the array as well as the previous value of the dropped item", async () => {
         scope.aValue = [];
-        var newValueGiven;
+        let newValueGiven;
         scope.$watch("aValue", function (newValue) {
           newValueGiven = newValue;
         });
@@ -1578,7 +1578,7 @@ describe("Scope", () => {
 
       it("can detect removal of items", async () => {
         scope.aValue = [2, 3];
-        var newValueGiven;
+        let newValueGiven;
         scope.$watch("aValue", function (newValue) {
           newValueGiven = newValue;
         });
@@ -1592,7 +1592,7 @@ describe("Scope", () => {
         // first time should be identical
         scope.aValue = ["a", "b"];
         scope.counter = 0;
-        var newValueGiven;
+        let newValueGiven;
         scope.$watch("aValue", function (newValue, m) {
           newValueGiven = newValue;
           m.counter++;
@@ -1609,7 +1609,7 @@ describe("Scope", () => {
       it("should trigger when property changes into array", async () => {
         scope.aValue = "test";
         scope.counter = 0;
-        var newValue;
+        let newValue;
         scope.$watch("aValue", function (newV, m) {
           m.counter++;
           newValue = newV;
@@ -2064,7 +2064,7 @@ describe("Scope", () => {
 
     it("executes $eval'ed function and returns result", function () {
       scope.aValue = 42;
-      var result = scope.$eval(function (scope) {
+      const result = scope.$eval(function (scope) {
         return scope.aValue;
       });
       expect(result).toBe(42);
@@ -2072,7 +2072,7 @@ describe("Scope", () => {
 
     it("passes the second $eval argument straight through", function () {
       scope.aValue = 42;
-      var result = scope.$eval(function (scope, arg) {
+      const result = scope.$eval(function (scope, arg) {
         return scope.aValue + arg;
       }, 2);
       expect(result).toBe(44);

package/src/core/task-tracker-factory.js

@@ -1,4 +1,11 @@
+/** @typedef {import('../interface.ts').ServiceProvider} ServiceProvider */
+/** @typedef {import('../interface.ts').AnnotatedFactory} AnnotatedFactory */
+
+/**
+ * @implements {ServiceProvider}
+ */
 export class TaskTrackerFactoryProvider {
+  /** @type {AnnotatedFactory} */
   $get = [
     "$log",
     /**

package/src/directive/aria/aria.js

@@ -1,4 +1,5 @@
-import { extend } from "../../shared/utils.js";
+import { extend, hasOwn } from "../../shared/utils.js";
+import { $injectTokens } from "../../injection-tokens.js";
 
 const ARIA_DISABLE_ATTR = "ngAriaDisable";
 
@@ -57,7 +58,7 @@ export function AriaProvider() {
 
   function watchExpr(attrName, ariaAttr, nativeAriaNodeNames, negate) {
     return function (scope, elem, attr) {
-      if (Object.prototype.hasOwnProperty.call(attr, ARIA_DISABLE_ATTR)) return;
+      if (hasOwn(attr, ARIA_DISABLE_ATTR)) return;
 
       const ariaCamelName = attr.$normalize(ariaAttr);
       if (
@@ -84,7 +85,7 @@ export function AriaProvider() {
   };
 }
 
-ngDisabledAriaDirective.$inject = ["$aria"];
+ngDisabledAriaDirective.$inject = [$injectTokens.$aria];
 export function ngDisabledAriaDirective($aria) {
   return $aria.$$watchExpr(
     "ngDisabled",
@@ -94,7 +95,7 @@ export function ngDisabledAriaDirective($aria) {
   );
 }
 
-ngShowAriaDirective.$inject = ["$aria"];
+ngShowAriaDirective.$inject = [$injectTokens.$aria];
 export function ngShowAriaDirective($aria) {
   return $aria.$$watchExpr("ngShow", "aria-hidden", [], true);
 }
@@ -104,7 +105,7 @@ export function ngMessagesAriaDirective() {
     restrict: "A",
     require: "?ngMessages",
     link(_scope, elem, attr) {
-      if (Object.prototype.hasOwnProperty.call(attr, ARIA_DISABLE_ATTR)) return;
+      if (hasOwn(attr, ARIA_DISABLE_ATTR)) return;
 
       if (!elem.hasAttribute("aria-live")) {
         elem.setAttribute("aria-live", "assertive");
@@ -113,12 +114,12 @@ export function ngMessagesAriaDirective() {
   };
 }
 
-ngClickAriaDirective.$inject = ["$aria", "$parse"];
+ngClickAriaDirective.$inject = [$injectTokens.$aria, $injectTokens.$parse];
 export function ngClickAriaDirective($aria, $parse) {
   return {
     restrict: "A",
-    compile(elem, attr) {
-      if (Object.prototype.hasOwnProperty.call(attr, ARIA_DISABLE_ATTR)) return;
+    compile(_elem, attr) {
+      if (hasOwn(attr, ARIA_DISABLE_ATTR)) return;
 
       const fn = $parse(attr.ngClick);
 
@@ -177,7 +178,7 @@ export function ngClickAriaDirective($aria, $parse) {
   };
 }
 
-ngRequiredAriaDirective.$inject = ["$aria"];
+ngRequiredAriaDirective.$inject = [$injectTokens.$aria];
 export function ngRequiredAriaDirective($aria) {
   return $aria.$$watchExpr(
     "ngRequired",
@@ -197,7 +198,7 @@ export function ngCheckedAriaDirective($aria) {
   );
 }
 
-ngValueAriaDirective.$inject = ["$aria"];
+ngValueAriaDirective.$inject = [$injectTokens.$aria];
 export function ngValueAriaDirective($aria) {
   return $aria.$$watchExpr(
     "ngValue",
@@ -207,12 +208,12 @@ export function ngValueAriaDirective($aria) {
   );
 }
 
-ngHideAriaDirective.$inject = ["$aria"];
+ngHideAriaDirective.$inject = [$injectTokens.$aria];
 export function ngHideAriaDirective($aria) {
   return $aria.$$watchExpr("ngHide", "aria-hidden", [], false);
 }
 
-ngReadonlyAriaDirective.$inject = ["$aria"];
+ngReadonlyAriaDirective.$inject = [$injectTokens.$aria];
 export function ngReadonlyAriaDirective($aria) {
   return $aria.$$watchExpr(
     "ngReadonly",
@@ -222,7 +223,7 @@ export function ngReadonlyAriaDirective($aria) {
   );
 }
 
-ngModelAriaDirective.$inject = ["$aria"];
+ngModelAriaDirective.$inject = [$injectTokens.$aria];
 export function ngModelAriaDirective($aria) {
   function shouldAttachAttr(attr, normalizedAttr, elem, allowNonAriaNodes) {
     return (
@@ -262,7 +263,7 @@ export function ngModelAriaDirective($aria) {
     require: "ngModel",
     priority: 200, // Make sure watches are fired after any other directives that affect the ngModel value
     compile(elem, attr) {
-      if (Object.prototype.hasOwnProperty.call(attr, ARIA_DISABLE_ATTR)) return;
+      if (hasOwn(attr, ARIA_DISABLE_ATTR)) return;
 
       const shape = getShape(attr);
 
@@ -315,12 +316,10 @@ export function ngModelAriaDirective($aria) {
               if ($aria.config("ariaValue")) {
                 const needsAriaValuemin =
                   !elem.hasAttribute("aria-valuemin") &&
-                  (Object.prototype.hasOwnProperty.call(attr, "min") ||
-                    Object.prototype.hasOwnProperty.call(attr, "ngMin"));
+                  (hasOwn(attr, "min") || hasOwn(attr, "ngMin"));
                 const needsAriaValuemax =
                   !elem.hasAttribute("aria-valuemax") &&
-                  (Object.prototype.hasOwnProperty.call(attr, "max") ||
-                    Object.prototype.hasOwnProperty.call(attr, "ngMax"));
+                  (hasOwn(attr, "max") || hasOwn(attr, "ngMax"));
                 const needsAriaValuenow = !elem.hasAttribute("aria-valuenow");
 
                 if (needsAriaValuemin) {
@@ -346,7 +345,7 @@ export function ngModelAriaDirective($aria) {
           }
 
           if (
-            !Object.prototype.hasOwnProperty.call(attr, "ngRequired") &&
+            !hasOwn(attr, "ngRequired") &&
             ngModel.$validators.required &&
             shouldAttachAttr("aria-required", "ariaRequired", elem, false)
           ) {
@@ -367,10 +366,10 @@ export function ngModelAriaDirective($aria) {
   };
 }
 
-ngDblclickAriaDirective.$inject = ["$aria"];
+ngDblclickAriaDirective.$inject = [$injectTokens.$aria];
 export function ngDblclickAriaDirective($aria) {
   return function (scope, elem, attr) {
-    if (Object.prototype.hasOwnProperty.call(attr, ARIA_DISABLE_ATTR)) return;
+    if (hasOwn(attr, ARIA_DISABLE_ATTR)) return;
 
     if (
       $aria.config("tabindex") &&

package/src/directive/attrs/attrs.js

@@ -1,6 +1,7 @@
 import { BOOLEAN_ATTR } from "../../shared/dom.js";
 import { directiveNormalize } from "../../shared/utils.js";
 import { ALIASED_ATTR } from "../../shared/constants.js";
+import { $injectTokens } from "../../injection-tokens.js";
 
 export const REGEX_STRING_REGEXP = /^\/(.+)\/([a-z]*)$/;
 
@@ -66,7 +67,7 @@ Object.entries(ALIASED_ATTR).forEach(([ngAttr]) => {
 ["src", "srcset", "href"].forEach((attrName) => {
   const normalized = directiveNormalize(`ng-${attrName}`);
   ngAttributeAliasDirectives[normalized] = [
-    "$sce",
+    $injectTokens.$sce,
     function ($sce) {
       return {
         priority: 99, // it needs to run after the attributes are interpolated

package/src/directive/attrs/attrs.md

@@ -6,10 +6,10 @@
 - @priority 99
 -
 - @description
-- Using AngularJS markup like `{{hash}}` in an href attribute will
+- Using AngularTS markup like `{{hash}}` in an href attribute will
 - make the link go to the wrong URL if the user clicks it before
-- AngularJS has a chance to replace the `{{hash}}` markup with its
-- value. Until AngularJS replaces the markup the link will be broken
+- AngularTS has a chance to replace the `{{hash}}` markup with its
+- value. Until AngularTS replaces the markup the link will be broken
 - and will most likely return a 404 error. The `ngHref` directive
 - solves this problem.
 -
@@ -47,9 +47,9 @@
 - @priority 99
 -
 - @description
-- Using AngularJS markup like `{{hash}}` in a `src` attribute doesn't
+- Using AngularTS markup like `{{hash}}` in a `src` attribute doesn't
 - work right: The browser will fetch from the URL with the literal
-- text `{{hash}}` until AngularJS replaces the expression inside
+- text `{{hash}}` until AngularTS replaces the expression inside
 - `{{hash}}`. The `ngSrc` directive solves this problem.
 -
 - The buggy way to write it:
@@ -86,9 +86,9 @@
 - @priority 99
 -
 - @description
-- Using AngularJS markup like `{{hash}}` in a `srcset` attribute doesn't
+- Using AngularTS markup like `{{hash}}` in a `srcset` attribute doesn't
 - work right: The browser will fetch from the URL with the literal
-- text `{{hash}}` until AngularJS replaces the expression inside
+- text `{{hash}}` until AngularTS replaces the expression inside
 - `{{hash}}`. The `ngSrcset` directive solves this problem.
 -
 - The buggy way to write it:

package/src/directive/bind/bind.js

@@ -1,11 +1,11 @@
 import { isUndefined, stringify, isNull, isProxy } from "../../shared/utils.js";
+import { $injectTokens } from "../../injection-tokens.js";
 
 /**
- * @returns {import('../../types.js').Directive}
+ * @returns {import('../../interface.ts').Directive}
  */
 export function ngBindDirective() {
   return {
-    restrict: "EA",
     /**
      * @param {import('../../core/scope/scope.js').Scope} scope
      * @param {Element} element
@@ -20,11 +20,10 @@ export function ngBindDirective() {
 }
 
 /**
- * @returns {import('../../types.js').Directive}
+ * @returns {import('../../interface.ts').Directive}
  */
 export function ngBindTemplateDirective() {
   return {
-    restrict: "EA",
     /**
      * @param {import('../../core/scope/scope.js').Scope} _scope
      * @param {Element} element
@@ -38,22 +37,22 @@ export function ngBindTemplateDirective() {
   };
 }
 
-ngBindHtmlDirective.$inject = ["$parse"];
+ngBindHtmlDirective.$inject = [$injectTokens.$parse];
 /**
- * @returns {import('../../types.js').Directive}
+ * @returns {import('../../interface.ts').Directive}
  */
 export function ngBindHtmlDirective($parse) {
   return {
     restrict: "A",
     compile(_tElement, tAttrs) {
-      $parse(tAttrs.ngBindHtml); // checks for interpolation errors
+      $parse(tAttrs["ngBindHtml"]); // checks for interpolation errors
       return (
         /**
          * @param {import('../../core/scope/scope.js').Scope} scope
          * @param {Element} element
          */
         (scope, element) => {
-          scope.$watch(tAttrs.ngBindHtml, (val) => {
+          scope.$watch(tAttrs["ngBindHtml"], (val) => {
             if (isUndefined(val) || isNull(val)) {
               val = "";
             }

package/src/directive/bind/bind.md

@@ -2,11 +2,11 @@
 
 ### Description
 
-The `ngBind` attribute tells AngularJS to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.
+The `ngBind` attribute tells AngularTS to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.
 
 Typically, you don't use `ngBind` directly, but instead, you use the double curly markup like `{{ expression }}` which is similar but less verbose.
 
-It is preferable to use `ngBind` instead of `{{ expression }}` if a template is momentarily displayed by the browser in its raw state before AngularJS compiles it. Since `ngBind` is an element attribute, it makes the bindings invisible to the user while the page is loading.
+It is preferable to use `ngBind` instead of `{{ expression }}` if a template is momentarily displayed by the browser in its raw state before AngularTS compiles it. Since `ngBind` is an element attribute, it makes the bindings invisible to the user while the page is loading.
 
 An alternative solution to this problem would be using the [`ngCloak`](https://docs.angularjs.org/api/ng/directive/ngCloak) directive.
 
@@ -103,7 +103,7 @@ content will be sanitized using the
 service. To utilize this functionality, ensure that `$sanitize` is available,
 for example, by including
 [`ngSanitize`](https://docs.angularjs.org/api/ngSanitize) in your module's
-dependencies (not in core AngularJS). To use `ngSanitize` in your module's
+dependencies (not in core AngularTS). To use `ngSanitize` in your module's
 dependencies, you need to include "angular-sanitize.js" in your application. You
 may also bypass sanitization for values you know are safe. To do so, bind to an
 explicitly trusted value via

package/src/directive/channel/channel.js

@@ -18,11 +18,10 @@ import { isObject } from "../../shared/utils.js";
  * JavaScript:
  * angular.EventBus.publish('userChannel', { user: { firstName: 'John', lastName: 'Smith' } });
  *
- * @returns {import("../../types.js").Directive}
+ * @returns {import("../../interface.ts").Directive}
  */
 export function ngChannelDirective() {
   return {
-    restrict: "EA",
     link: (scope, element, attrs) => {
       const hasTemplate = element.childNodes.length > 0;
       const channel = attrs["ngChannel"];

package/src/directive/class/class.js

@@ -2,14 +2,13 @@ import { getCacheData, setCacheData } from "../../shared/dom.js";
 import { hasAnimate, isObject, isString } from "../../shared/utils.js";
 
 /**
- * @returns {() => import("../../types.js").Directive}
+ * @returns {() => import("../../interface.ts").Directive}
  */
 function classDirective(name, selector) {
   name = `ngClass${name}`;
 
   return function () {
     return {
-      restrict: "EA",
       /**
        * @param {import("../../core/scope/scope.js").Scope} scope
        * @param {Element} element

package/src/directive/cloak/cloak.js

@@ -1,9 +1,8 @@
 /**
- * @returns {import('../../types.js').Directive}
+ * @returns {import('../../interface.ts').Directive}
  */
 export function ngCloakDirective() {
   return {
-    restrict: "EA",
     compile(element, attr) {
       attr.$set("ngCloak", undefined);
       element.classList.remove("ng-cloak");

package/src/directive/cloak/cloak.md

@@ -6,7 +6,7 @@
 
 ### Description
 
-The `ngCloak` directive is used to prevent the AngularJS HTML template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the HTML template display.
+The `ngCloak` directive is used to prevent the AngularTS HTML template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the HTML template display.
 
 The directive can be applied to the `<body>` element, but the preferred usage is to apply multiple `ngCloak` directives to small portions of the page to permit progressive rendering of the browser view.
 

package/src/directive/controller/controller.js

@@ -1,5 +1,5 @@
 /**
- * @returns {import("../../types.js").Directive}
+ * @returns {import("../../interface.ts").Directive}
  */
 export function ngControllerDirective() {
   return {

package/src/directive/controller/controller.md

@@ -32,14 +32,14 @@ Yes
 
 ## Example
 
-Here is a simple form for editing user contact information. Adding, removing, clearing, and greeting are methods declared on the controller (see source tab). These methods can easily be called from the AngularJS markup. Any changes to the data are automatically reflected in the View without the need for a manual update.
+Here is a simple form for editing user contact information. Adding, removing, clearing, and greeting are methods declared on the controller (see source tab). These methods can easily be called from the AngularTS markup. Any changes to the data are automatically reflected in the View without the need for a manual update.
 
 Two different declaration styles are included below:
 
 - One binds methods and properties directly onto the controller using `this`: `ng-controller="SettingsController1 as settings"`
 - One injects `$scope` into the controller: `ng-controller="SettingsController2"`
 
-The second option is more common in the AngularJS community and is generally used in boilerplates and in this guide. However, there are advantages to binding properties directly to the controller and avoiding scope.
+The second option is more common in the AngularTS community and is generally used in boilerplates and in this guide. However, there are advantages to binding properties directly to the controller and avoiding scope.
 
 - Using `controller as` makes it obvious which controller you are accessing in the template when multiple controllers apply to an element.
 - If you are writing your controllers as classes you have easier access to the properties and methods, which will appear on the scope, from inside the controller code.

package/src/directive/events/events.js

@@ -16,7 +16,7 @@ export const ngEventDirectives = {};
         "$parse",
         "$exceptionHandler",
         /**
-         * @param {import("../../core/parse/parse.js").ParseService} $parse
+         * @param {import("../../core/parse/interface.ts").ParseService} $parse
          * @param {import('../../core/exception-handler.js').ErrorHandler} $exceptionHandler
          * @returns
          */
@@ -34,11 +34,11 @@ export const ngEventDirectives = {};
 
 /**
  *
- * @param {import("../../core/parse/parse.js").ParseService} $parse
+ * @param {import("../../core/parse/interface.ts").ParseService} $parse
  * @param {import('../../core/exception-handler.js').ErrorHandler} $exceptionHandler
  * @param {string} directiveName
  * @param {string} eventName
- * @returns {import("../../types.js").Directive}
+ * @returns {import("../../interface.ts").Directive}
  */
 export function createEventDirective(
   $parse,

package/src/directive/events/events.md

@@ -47,7 +47,7 @@ The `ngDblclick` directive allows you to specify custom behavior on a dblclick e
 **Priority:** `0`
 
 **Description:**  
-Enables binding AngularJS expressions to onsubmit events.
+Enables binding AngularTS expressions to onsubmit events.
 
 Additionally, it prevents the default action (which for forms means sending the request to the server and reloading the current page), but only if the form does not contain `action`, `data-action`, or `x-action` attributes.
 
@@ -69,7 +69,7 @@ Additionally, it prevents the default action (which for forms means sending the
 **Description:**  
 Specify custom behavior on focus event.
 
-Note: As the `focus` event is executed synchronously when calling `input.focus()`, AngularJS executes the expression using `scope.$evalAsync` if the event is fired during an `$apply` to ensure a consistent state.
+Note: As the `focus` event is executed synchronously when calling `input.focus()`, AngularTS executes the expression using `scope.$evalAsync` if the event is fired during an `$apply` to ensure a consistent state.
 
 **Param:**
 

package/src/directive/form/form.js

@@ -373,7 +373,7 @@ export class FormController {
    *        `ng-invalid-my-error` classes and can be bound to as `{{ someForm.$error.myError }}`.
    * @param {boolean} state Whether the current state is valid (true), invalid (false), pending
    *        (undefined),  or skipped (null). Pending is used for unfulfilled `$asyncValidators`.
-   *        Skipped is used by AngularJS when validators do not run because of parse errors and when
+   *        Skipped is used by AngularTS when validators do not run because of parse errors and when
    *        `$asyncValidators` do not run because any of the `$validators` failed.
    * @param {import("../model/model.js").NgModelController | FormController} controller - The controller whose validity state is
    *        triggering the change.
@@ -496,9 +496,9 @@ export class FormController {
  *
  * ## Alias: {@link ng.directive:ngForm `ngForm`}
  *
- * In AngularJS, forms can be nested. This means that the outer form is valid when all of the child
+ * In AngularTS, forms can be nested. This means that the outer form is valid when all of the child
  * forms are valid as well. However, browsers do not allow nesting of `<form>` elements, so
- * AngularJS provides the {@link ng.directive:ngForm `ngForm`} directive, which behaves identically to
+ * AngularTS provides the {@link ng.directive:ngForm `ngForm`} directive, which behaves identically to
  * `form` but can be nested. Nested forms can be useful, for example, if the validity of a sub-group
  * of controls needs to be determined.
  *
@@ -515,12 +515,12 @@ export class FormController {
  *
  * ## Submitting a form and preventing the default action
  *
- * Since the role of forms in client-side AngularJS applications is different than in classical
+ * Since the role of forms in client-side AngularTS applications is different than in classical
  * roundtrip apps, it is desirable for the browser not to translate the form submission into a full
  * page reload that sends the data to the server. Instead some javascript logic should be triggered
  * to handle the form submission in an application-specific way.
  *
- * For this reason, AngularJS prevents the default action (form submission to the server) unless the
+ * For this reason, AngularTS prevents the default action (form submission to the server) unless the
  * `<form>` element has an `action` attribute specified.
  *
  * You can use one of the following two ways to specify what javascript method should be called when

package/src/directive/if/if.js

@@ -6,7 +6,7 @@ ngIfDirective.$inject = ["$animate"];
  *
  * TODO // Add type for animate service
  * @param {*}  $animate
- * @returns {import("../../types.js").Directive}
+ * @returns {import("../../interface.ts").Directive}
  */
 export function ngIfDirective($animate) {
   return {

package/src/directive/include/include.js

@@ -1,26 +1,37 @@
 import { isDefined } from "../../shared/utils.js";
 import { hasAnimate } from "../../shared/utils.js";
+import { $injectTokens } from "../../injection-tokens.js";
 
-ngIncludeDirective.$inject = ["$templateRequest", "$anchorScroll", "$animate"];
+ngIncludeDirective.$inject = [
+  $injectTokens.$templateRequest,
+  $injectTokens.$anchorScroll,
+  $injectTokens.$animate,
+  $injectTokens.$exceptionHandler,
+];
 
 /**
  *
  * @param {*} $templateRequest
  * @param {import("../../services/anchor-scroll.js").AnchorScrollFunction} $anchorScroll
  * @param {*} $animate
- * @returns
+ * @param {import('../../core/error-handler.js').ErrorHandler} $exceptionHandler
+ * @returns {import('../../interface.js').Directive}
  */
-export function ngIncludeDirective($templateRequest, $anchorScroll, $animate) {
+export function ngIncludeDirective(
+  $templateRequest,
+  $anchorScroll,
+  $animate,
+  $exceptionHandler,
+) {
   return {
-    restrict: "EA",
     priority: 400,
     terminal: true,
     transclude: "element",
     controller: () => {},
     compile(_element, attr) {
-      const srcExp = attr.ngInclude || attr.src;
-      const onloadExp = attr.onload || "";
-      const autoScrollExp = attr.autoscroll;
+      const srcExp = attr["ngInclude"] || attr["src"];
+      const onloadExp = attr["onload"] || "";
+      const autoScrollExp = attr["autoscroll"];
 
       return (scope, $element, _$attr, ctrl, $transclude) => {
         function maybeScroll() {
@@ -73,7 +84,7 @@ export function ngIncludeDirective($templateRequest, $anchorScroll, $animate) {
                 if (scope.$$destroyed) return;
                 if (thisChangeId !== changeCounter) return;
                 const newScope = scope.$new();
-                ctrl.template = response;
+                ctrl["template"] = response;
 
                 // Note: This will also link all children of ng-include that were contained in the original
                 // html. If that content contains controllers, ... they could pollute/change the scope.
@@ -96,19 +107,20 @@ export function ngIncludeDirective($templateRequest, $anchorScroll, $animate) {
                 currentScope.$emit("$includeContentLoaded", src);
                 scope.$eval(onloadExp);
               },
-              () => {
+              (err) => {
                 if (scope.$$destroyed) return;
 
                 if (thisChangeId === changeCounter) {
                   cleanupLastIncludeContent();
                   scope.$emit("$includeContentError", src);
                 }
+                $exceptionHandler(new Error(err));
               },
             );
             scope.$emit("$includeContentRequested", src);
           } else {
             cleanupLastIncludeContent();
-            ctrl.template = null;
+            ctrl["template"] = null;
           }
         });
       };
@@ -125,11 +137,10 @@ ngIncludeFillContentDirective.$inject = ["$compile"];
 
 /**
  * @param {import("../../core/compile/compile.js").CompileFn} $compile
- * @returns {import("../../types.js").Directive}
+ * @returns {import("../../interface.ts").Directive}
  */
 export function ngIncludeFillContentDirective($compile) {
   return {
-    restrict: "EA",
     priority: -400,
     require: "ngInclude",
     link(scope, $element, _$attr, ctrl) {