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));
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.