angular 1.6.5 angular.bootstrap injection error

Question

I have a meanjs.org skeleton app, that I have converted to hapi-js instead of express, also converted to postgres instead of mongo, and used OAUTH for authentication. (ok, so really, I just liked the folder structure for server/client modules - lol)

All of this works EXCEPT, my Angular deployment (kind of big deal). It is angular 1.6.5 (I don't have time to learn TS and A2). It loads all of the module components without error, the routes, etc all without error. The 1 thing that fails is this line after document.ready:

angular.bootstrap(document, [app.applicationModuleName]);

If I comment this out and add ng-app="appName" to HTML instead of using the bootstrap method, I get the same result... this error:

Failed to instantiate module appN due to: Error: [$injector:modulerr]

I have confirmed everything else is loading without error... not sure where to go from here... any advice?

@matias requested full code, here is the angular config:

(function (window) {
  'use strict';

  var applicationModuleName = 'appName';

  var service = {
    applicationEnvironment: window.env,
    applicationModuleName: applicationModuleName,
    applicationModuleVendorDependencies: ['ngResource', 'ngAnimate', 'ngMessages', 'ui.router', 'ui.bootstrap','ui-notification'],
    registerModule: registerModule
  };

  window.ApplicationConfiguration = service;

  // Add a new vertical module
  function registerModule(moduleName, dependencies) {
    // Create angular module
    angular.module(moduleName, dependencies || []);

    // Add the module to the AngularJS configuration file
    angular.module(applicationModuleName).requires.push(moduleName);
  }

  // Angular-ui-notification configuration
  angular.module('ui-notification').config(function(NotificationProvider) {
    NotificationProvider.setOptions({
      delay: 2000,
      startTop: 20,
      startRight: 10,
      verticalSpacing: 20,
      horizontalSpacing: 20,
      positionX: 'right',
      positionY: 'bottom'
    });
  });
}(window));

AND here is the angular init (config loads first, then the init):

(function (app) {
  'use strict';

  // Start by defining the main module and adding the module dependencies
  angular
    .module(app.applicationModuleName, app.applicationModuleVendorDependencies);

  // Setting HTML5 Location Mode
  angular
    .module(app.applicationModuleName)
    .config(bootstrapConfig);

  bootstrapConfig.$inject = ['$compileProvider', '$locationProvider', '$httpProvider', '$logProvider'];

  function bootstrapConfig($compileProvider, $locationProvider, $httpProvider, $logProvider) {
    $locationProvider.html5Mode({
      enabled: true,
      requireBase: false
    }).hashPrefix('!');

    $httpProvider.interceptors.push('authInterceptor');

    // Disable debug data for production environment
    // @link https://docs.angularjs.org/guide/production
    $compileProvider.debugInfoEnabled(app.applicationEnvironment !== 'production');
    $logProvider.debugEnabled(app.applicationEnvironment !== 'production');
  }


  // Then define the init function for starting up the application
  angular.element(document).ready(init);

  function init() {
    // Fixing facebook bug with redirect
    if (window.location.hash && window.location.hash === '#_=_') {
      if (window.history && history.pushState) {
        window.history.pushState('', document.title, window.location.pathname);
      } else {
        // Prevent scrolling by storing the page's current scroll offset
        var scroll = {
          top: document.body.scrollTop,
          left: document.body.scrollLeft
        };
        window.location.hash = '';
        // Restore the scroll offset, should be flicker free
        document.body.scrollTop = scroll.top;
        document.body.scrollLeft = scroll.left;
      }
    }

    // Then init the app
    angular.bootstrap(document, [app.applicationModuleName]);
  }
}(ApplicationConfiguration));

You omitted the most important part, error message. It contains all the info on the problem, and redirects to a page when being clicked (at least in Chrome), where the error is being spoon-fed to developer. — Estus Flask, Jul 31 '17 at 03:07
var applicationModuleName = 'appName'; (then later added to the app object) — sol, Jul 31 '17 at 03:15
@estus - [link](https://docs.angularjs.org/error/$injector/modulerr) it references ngRoute (which I am not using) and ng monkeying which I am not doing either... unfortunately not much help (which is not usual, I agree) — sol, Jul 31 '17 at 03:19
Again, the link is truncated. If you don't use these modules, some modules that the app depends on use them. ngRoute, etc cannot come out of nowhere. — Estus Flask, Jul 31 '17 at 03:23
The `ngRoute` / `ng-monkeying` are just examples of what can commonly go wrong. Have you included all the relevant `.js` files for your module dependencies, ie 'ngResource', 'ngAnimate', 'ngMessages', 'ui.router', 'ui.bootstrap' and 'ui-notification'? — Phil, Jul 31 '17 at 05:27

score 1 · Answer 1 · answered Jul 31 '17 at 02:59

1

Try this, first you have to create your app (name + list of dependencies):

var app = angular.module('myApp', []);

And then, bootstrap your app:

angular.bootstrap(document, [app.name]);

answered Jul 31 '17 at 02:59

pridegsu

1,108
1
12
27

prior to the bootstrap call, is this: `var applicationModuleName = 'appName'';` and added to the "app" object. – sol Jul 31 '17 at 03:14
Could you please edit your question with the full code? Thanks – pridegsu Jul 31 '17 at 03:17
I'll try that in a few... I posted the code above though... thank you for your help! – sol Jul 31 '17 at 03:25
thank you again. I tried the above, and noticed it is already present in the code with `angular.module(app.applicationModuleName, app.applicationModuleVendorDependencies);` then the bootstrap call below. :( any other ideas? – sol Jul 31 '17 at 04:16
What is the value of ApplicationConfiguration? – pridegsu Jul 31 '17 at 11:33

score 0 · Accepted Answer · answered Jul 31 '17 at 05:26

Well. I feel sheepish. I tried a much simpler approach and step in to what I was doing to see if I could find the culprit.

Turns out, my injection of ui.bootstrap was the item failing (thanks @estus - your comments led me to dig deeper on the other modules). It was failing because I am lame, and fat fingered the path in the asset pipeline, so the library didn't exist on the page.

*hangs head in shame*

Thank you all for the quick help. Much appreciated.

angular 1.6.5 angular.bootstrap injection error

2 Answers2