angular-translate in development environment

src/main/angular/index.html

@@ -17,6 +17,8 @@
 <ui-view>Loading...</ui-view>
 
 <script src="vendor/angular.js"></script>
+<script src="vendor/angular-sanitize.js"></script>
+<script src="vendor/angular-translate.js"></script>
 <script src="vendor/angular-ui-router.js"></script>
 </body>
 </html>

src/main/angular/package.json

@@ -18,6 +18,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "angular-sanitize": "1.5.8",
+    "file-loader": "0.9.0",
     "url-loader": "0.5.7"
   },
   "devDependencies": {

src/main/angular/src/main.dev.ts

@@ -1,15 +1,18 @@
 import { bootstrap, module } from 'angular';
-import uiRouter from 'angular-ui-router';
 import peopleSearchModule from './peoplesearch/peoplesearch.module';
-import routes from './routes';
 import PeopleService from './services/people.service.dev';
+import routes from './routes';
+import translations from './translations';
+import uiRouter from 'angular-ui-router';
 
 module('app', [
     uiRouter,
     peopleSearchModule,
+    'pascalprecht.translate'
 ])
 
     .config(routes)
+    .config(translations)
     .service('PeopleService', PeopleService);
 
 // Attach to the page document

src/main/angular/src/main.ts

@@ -1,9 +1,9 @@
 import { bootstrap, module } from 'angular';
-import uiRouter from 'angular-ui-router';
 import peopleSearchModule from './peoplesearch/peoplesearch.module';
+import PeopleService from './services/people.service';
 import routes from './routes';
 import translations from './translations';
-import PeopleService from './services/people.service';
+import uiRouter from 'angular-ui-router';
 
 module('app', [
     uiRouter,

src/main/angular/src/peoplesearch/peoplesearch.module.ts

@@ -13,7 +13,10 @@ require('./peoplesearch.scss');
 
 var moduleName = 'people-search';
 
-module(moduleName, [ uxModule ])
+module(moduleName, [
+    'pascalprecht.translate',
+    uxModule,
+])
     .service('PeopleSearchService', PeopleSearchService)
     .filter('dasherize', dasherize)
     .component('orgChart', OrgChartComponent)

src/main/angular/src/translations.ts

@@ -1,8 +1,10 @@
 import 'angular-translate';
 
-export default ($translateProvider: angular.translate.ITranslateProvider) => {
-    // Register a translation file for each supported language:
-    $translateProvider.translations('en', require('i18n/translations_en.json'));
-
-    $translateProvider.preferredLanguage('en');
-};
+export default [
+    '$translateProvider',
+    ($translateProvider: angular.translate.ITranslateProvider) => {
+        // Register a translation file for each supported language:
+        $translateProvider.translations('en', require('i18n/translations_en.json'));
+        $translateProvider.useSanitizeValueStrategy('escapeParameters');
+        $translateProvider.preferredLanguage('en');
+    }];

src/main/angular/webpack.common.js

@@ -68,6 +68,8 @@ module.exports = {
         new CopyWebpackPlugin([
             { from: 'vendor/angular-ui-router.js', to: 'vendor/' },
             { from: 'node_modules/angular/angular.js', to: 'vendor/' },
+            { from: 'node_modules/angular-sanitize/angular-sanitize.js', to: 'vendor/' },
+            { from: 'node_modules/angular-translate/dist/angular-translate.js', to: 'vendor/' },
             { from: 'images/', to: 'images/' }
         ]),