Adding 2 providers to Angular's app.config

Question

so I'm trying to add another provider for translations to my app.config function, and at the moment I just have $routeProvider being used like this:

var app = angular.module('app', ['ngRoute', 'home', 'about', 'contact', 'session', 'auth-token-interceptor']);

    app.config(['$routeProvider', function($routeProvider) {
        $routeProvider.
            otherwise({
                redirectTo: '/'
            });
    }]);

This is fine, and now I'm trying to follow this tutorial in order to add some simple translations to my Angular app:

http://www.ng-newsletter.com/posts/angular-translate.html

I am a bit confused about where exactly to add in the translation and its structure.

My initial problem is simply including angular-translate as a dependency, where I tried this:

var app = angular.module('app', ['ngRoute', 'home', 'about', 'contact', 'session', 'auth-token-interceptor', 'test.translate' ]);

But this alone caused the app to not actually load so I must be doing something wrong here. Here is the error I get in console on Chrome:

Failed to instantiate module app due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=...)
    at Error (native)
    at http://localhost:8888/test/frontend/js/angular.min.js?t=1430103821:6:417
    at http://localhost:8888/test/frontend/js/angular.min.js?t=1430103821:35:320
    at r (http://localhost:8888/test/frontend/js/angular.min.js?t=1430103821:7:302)
    at g (http://localhost:8888/test/frontend/js/angular.min.js?t=1430103821:34:399)
    at http://localhost:8888/test/frontend/js/angular.min.js?t=1430103821:35:63
    at r (http://localhost:8888/test/frontend/js/angular.min.js?t=1430103821:7:302)
    at g (http://localhost:8888/test/frontend/js/angular.min.js?t=1430103821:34:399)
    at ab (http://localhost:8888/test/frontend/js/angular.min.js?t=1430103821:38:135)
    at d (http://localhost:8888/test/frontend/js/angular.min.js?t=1430103821:17:381

My next problem is where and how to add in the $translateProvider$. I've tried adding it together with the $routeProvider and I've tried adding it in as a second item in the array but both didn't work (maybe because of problem number one causing the app to crash I'm not sure).

Here is the $translateProvider setup I am trying to use from the tutorial:

app.config(function($translateProvider) {
  $translateProvider.translations('en', {
    HEADLINE: 'Hello there, This is my awesome app!',
    INTRO_TEXT: 'And it has i18n support!'
  });
});

Answer 1

You should add it in your app dependency array like you did for ngRoute module, angular-translate dependency module name is pascalprecht.translate

var app = angular.module('app', ['ngRoute', 
                                 'home',
                                 'about', 
                                 'contact', 
                                 'session', 
                                 'auth-token-interceptor', 
                                 'pascalprecht.translate' //<--here the angular-translate dependancy inject
                                ]
                        );