Angular Translate: LocalStorage plugin and requirejs error

Question

I'm using Angular in combination with require.js. In addition to that I use the angular-translate addon. Now I added the plugin angular-translate-storage-local and I got this error: Error: [$injector:unpr] Unknown provider: $translateCookieStorageProvider <- $translateCookieStorage <- $translateLocalStorage <- $translate

Usually I would say I forgot to add the dependencies, but I did not (I guess)!

My requirejs.config:

requirejs.config({
    shim: {
        angular: {
            exports: 'angular'
        },
        ngTranslateLoader: ['ngTranslate'],
        ngTranslateLocalStorage: ['ngTranslate']
    },

    paths: {
        ngTranslate: '../../vendor/angular-translate/angular-translate',
        ngTranslateLoader: '../../vendor/angular-translate-loader-static-files/angular-translate-loader-static-files',
        ngTranslateLocalStorage: '../../vendor/angular-translate-storage-local/angular-translate-storage-local'
    }
});

My module:

define(function(require) {
    require('ngTranslate');
    require('ngTranslateLocalStorage');
    require('ngTranslateLoader');

    var angular = require('angular');

    var app = angular.module('app', [
        'pascalprecht.translate'
    ])
        .config([$translateProvider', function ($translateProvider) {
            $translateProvider
                .useStaticFilesLoader({
                    prefix: '/language/',
                    suffix: '.json'
                })
                .preferredLanguage('en-DK')
                .useSanitizeValueStrategy('escape')
                .useLocalStorage();
        }]);
});

The static file loader plugin works well. Where is my failure?

Edit: I added following to my requirejs config:

ngTranslateLocalStorage: ['ngTranslateCookieStorage', 'ngTranslate'],
ngTranslateCookieStorage: ['ngCookies', 'ngTranslate'],
ngCookies: ['angular'],

Now I get: Error: [$injector:unpr] Unknown provider: $cookieStoreProvider <- $cookieStore <- $translateCookieStorage <- $translateLocalStorage <- $translate

If I understand requirejs shim correct it should be enough to require(ngTranslateLocalStorage) now, but then I get the message that pascalprecht.translate is unknown. If I require all deps although it already done in shim I get the error above. Still something wrong!?

Answer 1

The service $translateLocalStorage depends of $translateCookieStorage, which in turns depends of $cookieStore from angular-cookies.

Therefore, you need to include also angular-translate-storage-cookie, angular-cookies, and add ngCookies in the module dependencies.

To sum up you should have:

"angular-translate"
"angular-translate-loader-static-files"
"angular-cookies"
"angular-translate-storage-cookie"
"angular-translate-storage-local"