mercredi 14 septembre 2016

Use separate config for translateLoader - AngularJS

I want to create two separate config.js files for same main module. In one config I want to configure translateLoader and in other config all other configurations. I want to do this because I want to ignore translation loader in unit tests rather then being forced to modify each of the spec files.

app.js

(function() {
  'use strict';

  angular.element(document).ready(function() {
    angular.bootstrap(document, ['app']);
  });

  function config($stateProvider, $urlRouterProvider, $logProvider, $httpProvider, $translateProvider) {
    $urlRouterProvider.otherwise('/login');
    $logProvider.debugEnabled(true);
    $httpProvider.interceptors.push('httpInterceptor');

    $translateProvider.preferredLanguage('en');*/
    $stateProvider
      .state('root', {
        /*views: {
          'header': {
            templateUrl: 'src/common/header.tpl.html',
            controller: 'HeaderCtrl'
          },
          'footer': {
            templateUrl: 'src/common/footer.tpl.html',
            controller: 'FooterCtrl'
          }
        }*/
      });
  }

  function MainCtrl($log) {
    $log.debug('MainCtrl laoded!');
  }

  function run($log) {
    $log.debug('App is running!');
  }

  angular.module('app', [
      'ui.router',
      'ui.bootstrap',
      'home',
      'login',
      'common',
      'templates',
      'pascalprecht.translate'
    ])
    .config(config)
    .run(run)
    .controller('MainCtrl', MainCtrl)
    .value('version', '1.1.0');
})();

translate_config.js

angular
  .module('app')
  .constant(loaderConfig);

loaderConfig.$inject = ['$translateProvider', '$translatePartialLoaderProvider'];

function loaderConfig($translateProvider, $translatePartialLoaderProvider) {

  $translateProvider.useLoader('$translatePartialLoader', {
    urlTemplate: '/src/app/modules/{part}/resources/{lang}.json'
  });

  $translateProvider.preferredLanguage('en');
}

Here is also part in karma.config where I am excluding that file

'use strict';

var baseDir = 'client';

module.exports = {

  //This is the list of file patterns to load into the browser during testing.
  files: [
    baseDir + '/src/vendor/angular/angular.js',
    baseDir + '/src/vendor/angular-mocks/angular-mocks.js',
    baseDir + '/src/vendor/angular-ui-router/release/angular-ui-router.js',
    baseDir + '/src/vendor/angular-bootstrap/ui-bootstrap.min.js',
    baseDir + '/src/vendor/angular-bootstrap/ui-bootstrap-tpls.min.js',
    baseDir + '/src/vendor/angular-translate/angular-translate.js',
    baseDir + '/src/vendor/angular-translate-loader-partial/angular-translate-loader-partial.js',
    baseDir + '/src/app/modules/home/home.module.js',
    baseDir + '/src/app/modules/login/login.module.js',
    baseDir + '/src/app/app.js',
    baseDir + '/src/app/**/*.js',
    baseDir + '/src/app/modules/**/*.html',
    baseDir + '/test/unit/**/*.spec.js'
  /*  {
      pattern: baseDir + '/src/app/modules/login/resources/en.json',
      watched: true,
      served: true,
      included: false
    }*/
  ],
  exclude: [
    baseDir + '/src/app/translate_help.js'
  ],

With this approach when run unit test or even run the app error is being thrown:

When running gulp test:unit:

enter image description here

When running gulp serve:

enter image description here

Aucun commentaire:

Enregistrer un commentaire