Rails backend. Angular frontend. Using angular-ui-router. On the local, it works fine. But when it is deployed on heroku, it gives this error. All dependencies seem to be downloaded properly. I need help seeing what this error indicates.
application.js:
//= require jquery
//= require jquery_ujs
//= require angular/angular
//= require angular-ui-router/release/angular-ui-router
//= require bootstrap
//= require_self
//= require_tree .
angular
.module('maphack', ['ui.router'])
.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('home', {
url: '/',
component: 'homePage'
})
// default fall back route
$urlRouterProvider.otherwise('/');
// enable HTML5 Mode for SEO
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
Error Message on Console:
application-118d41a….js:4 Uncaught Error: [$injector:modulerr] Failed to
instantiate module XXXXX due to:
Error: [$injector:unpr] Unknown provider: t
http://errors.angularjs.org/1.6.4/$injector/unpr?p0=t
It seems to me that the culprit is JavaScript minification. Angular's modules injected this way usually are obfuscated by a JavaScript compressor.
One possible solution is to use another syntax while declaring dependencies. Change this:
.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
to this:
.config(["$stateProvider", "$urlRouterProvider", "$locationProvider", function ($stateProvider, $urlRouterProvider, $locationProvider]) {
The latter is not vulnerable to JS minification as you're declaring the dependencies in strings, and Angular is smart enough to pick those and inject in your config.