I have a MeanJS.org skeleton app that I've transformed into hapi-js from express, switched to postgres from mongo, and incorporated OAUTH for authentication (mainly because I liked the server/client module folder structure - haha).
Everything seems to be working fine except for my Angular deployment, which is kind of a big deal. It's running on Angular 1.6.5 because I didn't have the time or interest in learning TypeScript and Angular 2. The components, routes, and everything else load without any errors. However, the only thing that fails is this line after `document.ready`:
angular.bootstrap(document, [app.applicationModuleName]);If I remove this line and instead add ng-app="appName" to the HTML directly rather than using the bootstrap method, I still encounter the same error:
Failed to instantiate module appN due to: Error: [$injector:modulerr]
I have double-checked that everything else loads correctly without any errors but I'm unsure about how to proceed from here. Any ideas?
@matias requested the full code so here is the configuration for Angular:
(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 initialization for Angular (configuration 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 initialize the app
angular.bootstrap(document, [app.applicationModuleName]);
}
}(ApplicationConfiguration));