Why does an ngSanitize dependency break my app?

Question

To whom it may concern,

In effort to bind some html, which, to note, will include angular directives, upon injecting an ngSanitize dependency, my app ceases to render. Any thoughts as to why this happens, and whether my code has any blatant issues?

TLDR: everything works fine until bring ngSanitize into the picture!

Working Controller:

angular.module('appName')
 .controller('DecksCtrl', function ($scope, Auth, $http) {. . .

Broken Controller:

angular.module('appName', ['ngSanitize'])
 .controller('DecksCtrl', function ($scope, Auth, $http) {. . .

Console Errors:

Uncaught Error: [$injector:modulerr] Failed to instantiate module appName due to: Error: [$injector:unpr] Unknown provider: $stateProvider

Thank you

Peter Ward

Answer 1

Your problem is misunderstanding the difference between a module declaration and a reference to an existing module.

To declare a module there are 2 arguments, the name and the dependency array

angular.module('appName', [/* all the dependencies for this module*/]);

Then when you add components you use the module reference getter that does not have second dependency argument. This getter returns the module object for chaining the component(s) to

angular.module('appName')
 .controller('DecksCtrl', function ($scope, Auth, $http) {. . .

What you have done is try to inject a dependency into a module reference getter. this in turn over wrote the original declaration for that module