feat: angular 4 and ngx-translate

Author: Felix Gladisch

.gitignore

@@ -7,6 +7,7 @@
 # Node files
 /node_modules
 npm-debug.log
+yarn.lock
 
 # OS generated files
 .DS_Store

README.md

@@ -2,18 +2,18 @@
 
 [![Build Status](https://travis-ci.org/fgladisch/angular2-webpack-seed.svg?branch=master)](https://travis-ci.org/fgladisch/angular2-webpack-seed)
 
-This is a minimalistic Angular 2 seed project, featuring:
-* [TypeScript 2.1](https://www.typescriptlang.org)
+This is a minimalistic Angular 2+ seed project, featuring:
+* [TypeScript 2.2](https://www.typescriptlang.org)
 * [Sass](http://sass-lang.com)
 * [Bootstrap 4](http://v4-alpha.getbootstrap.com)
 * [ng-bootstrap](https://github.com/ng-bootstrap/ng-bootstrap)
-* [ng2-translate](https://github.com/ocombe/ng2-translate)
+* [ngx-translate](https://github.com/ngx-translate)
 * [webpack](https://webpack.github.io)
 * [Karma](https://karma-runner.github.io)
 * [Jasmine](http://jasmine.github.io)
 * [@types](https://blogs.msdn.microsoft.com/typescript/2016/06/15/the-future-of-declaration-files)
 
-This seed follows the [Angular 2 Style Guide](https://angular.io/docs/ts/latest/guide/style-guide.html).
+This seed follows the [Angular Style Guide](https://angular.io/docs/ts/latest/guide/style-guide.html).
 
 ## How to use
 
@@ -46,3 +46,6 @@ Production files are located in `dist`.
 ```bash
 npm run build
 ```
+
+# License
+[MIT](/LICENSE)

config/karma.conf.js

@@ -7,6 +7,15 @@ module.exports = function (config) {
     // base path that will be used to resolve all patterns (e.g. files, exclude)
     basePath: '',
 
+    // Karma will require() these plugins
+    plugins: [
+      "karma-jasmine",
+      "karma-mocha-reporter",
+      "karma-phantomjs-launcher",
+      "karma-sourcemap-loader",
+      "karma-webpack"
+    ],
+
     /*
      * Frameworks to use
      *

config/webpack.common.js

@@ -10,8 +10,11 @@ module.exports = function() {
   return {
 
     resolve: {
-      // Array of extensions that will be used to resolve modules
-      extensions: ['.js', '.ts']
+      extensions: ['.ts', '.js', '.json'],
+      modules: [
+        helpers.root('src'),
+        helpers.root('node_modules')
+      ],
     },
 
     // Entry points the bundles
@@ -71,9 +74,9 @@ module.exports = function() {
         name: ['app', 'vendor', 'polyfills']
       }),
       // Provides context to Angular's use of System.import
+      // See: https://github.com/AngularClass/angular2-webpack-starter/issues/993#issuecomment-283423040
       new ContextReplacementPlugin(
-        // The (\\|\/) piece accounts for path separators in *nix and Windows
-        /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
+        /angular(\\|\/)core(\\|\/)@angular/,
         helpers.root('src')
       ),
       // Generates an HTML5 file that includes all webpack bundles

config/webpack.test.js

@@ -11,29 +11,17 @@ module.exports = {
   devtool: 'inline-source-map',
 
   resolve: {
-    extensions: ['.ts', '.js'],
+    extensions: ['.ts', '.js', '.json'],
     modules: [
-      path.resolve(__dirname, 'src'),
-      'node_modules'
-    ]
+      helpers.root('src'),
+      helpers.root('node_modules')
+    ],
   },
 
   module: {
+    exprContextCritical: false,
     // See webpack.common.js for more explanation about rules
     rules: [
-      // Extracts SourceMaps for source files that as added as sourceMappingURL comment
-      {
-        enforce: 'pre',
-        test: /\.js$/,
-        loader: 'source-map-loader',
-        exclude: [
-          // These packages have problems with their sourcemaps
-          helpers.root('node_modules/rxjs'),
-          helpers.root('node_modules/@angular'),
-          helpers.root('node_modules/@ng-bootstrap'),
-          helpers.root('node_modules/ng2-translate')
-        ]
-      },
       {
         test: /\.ts$/,
         loaders: ['awesome-typescript-loader?silent=true', 'angular2-template-loader']
@@ -55,8 +43,9 @@ module.exports = {
 
   // See webpack.common.js for more explanation about plugins
   plugins: [
+    // Provides context to Angular's use of System.import
     new ContextReplacementPlugin(
-      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
+      /angular(\\|\/)core(\\|\/)@angular/,
       helpers.root('src')
     ),
     new webpack.DefinePlugin({

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular2-webpack-seed",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "scripts": {
     "start": "webpack-dev-server --inline --progress --port 3000",
     "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
@@ -22,51 +22,50 @@
     "url": "https://github.com/fgladisch/angular2-webpack-seed/issues"
   },
   "dependencies": {
-    "@angular/common": "2.4.7",
-    "@angular/compiler": "2.4.7",
-    "@angular/core": "2.4.7",
-    "@angular/forms": "2.4.7",
-    "@angular/http": "2.4.7",
-    "@angular/platform-browser": "2.4.7",
-    "@angular/platform-browser-dynamic": "2.4.7",
-    "@angular/router": "3.4.7",
-    "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.20",
+    "@angular/common": "4.0.1",
+    "@angular/compiler": "4.0.1",
+    "@angular/core": "4.0.1",
+    "@angular/forms": "4.0.1",
+    "@angular/http": "4.0.1",
+    "@angular/platform-browser": "4.0.1",
+    "@angular/platform-browser-dynamic": "4.0.1",
+    "@angular/router": "4.0.1",
+    "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.22",
+    "@ngx-translate/core": "6.0.1",
+    "@ngx-translate/http-loader": "0.0.3",
     "bootstrap": "4.0.0-alpha.6",
     "core-js": "2.4.1",
-    "ie-shim": "0.1.0",
-    "ng2-translate": "5.0.0",
-    "rxjs": "5.1.0",
-    "zone.js": "0.7.6"
+    "rxjs": "5.2.0",
+    "zone.js": "0.8.5"
   },
   "devDependencies": {
-    "@types/core-js": "0.9.35",
-    "@types/jasmine": "2.5.41",
-    "@types/node": "7.0.5",
+    "@types/core-js": "0.9.40",
+    "@types/jasmine": "2.5.47",
+    "@types/node": "7.0.12",
     "angular2-template-loader": "0.6.2",
-    "awesome-typescript-loader": "3.0.3",
+    "awesome-typescript-loader": "3.1.2",
     "copy-webpack-plugin": "4.0.1",
-    "css-loader": "0.26.1",
-    "extract-text-webpack-plugin": "2.0.0-rc.3",
-    "file-loader": "0.10.0",
-    "html-loader": "0.4.4",
+    "css-loader": "0.28.0",
+    "extract-text-webpack-plugin": "2.1.0",
+    "file-loader": "0.10.1",
+    "html-loader": "0.4.5",
     "html-webpack-plugin": "2.28.0",
     "jasmine-core": "2.5.2",
     "json-loader": "0.5.4",
-    "karma": "1.3.0",
+    "karma": "1.5.0",
     "karma-jasmine": "1.1.0",
-    "karma-mocha-reporter": "2.2.2",
-    "karma-phantomjs-launcher": "1.0.2",
+    "karma-mocha-reporter": "2.2.3",
+    "karma-phantomjs-launcher": "1.0.4",
     "karma-sourcemap-loader": "0.3.7",
-    "karma-webpack": "2.0.2",
-    "node-sass": "4.5.0",
+    "karma-webpack": "2.0.3",
+    "node-sass": "4.5.2",
     "raw-loader": "0.5.1",
-    "rimraf": "2.5.4",
-    "sass-loader": "5.0.1",
-    "source-map-loader": "0.1.6",
+    "rimraf": "2.6.1",
+    "sass-loader": "6.0.3",
     "ts-helpers": "1.1.2",
-    "typescript": "2.1.6",
-    "webpack": "2.2.1",
-    "webpack-dev-server": "2.3.0",
-    "webpack-merge": "2.6.1"
+    "typescript": "2.2.2",
+    "webpack": "2.3.2",
+    "webpack-dev-server": "2.4.2",
+    "webpack-merge": "4.1.0"
   }
 }

src/app/app.component.spec.ts

@@ -1,8 +1,8 @@
 import { TestBed, inject, ComponentFixture } from '@angular/core/testing';
-import { TranslateModule, TranslateService } from 'ng2-translate/ng2-translate';
 import { BrowserModule }  from '@angular/platform-browser';
 import { APP_BASE_HREF } from '@angular/common';
 import { RouterModule } from '@angular/router';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { NavigationComponent } from './navigation';

src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component, ViewEncapsulation } from '@angular/core';
-import { TranslateService } from 'ng2-translate/ng2-translate';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'app',
@@ -14,7 +14,7 @@ export class AppComponent {
   }
 
   initializeLanguage() {
-    let browserLang: string = this.translate.getBrowserLang();
+    const browserLang: string = this.translate.getBrowserLang();
     this.translate.setDefaultLang('en');
     this.translate.use(browserLang);
   }

src/app/app.module.ts

@@ -1,9 +1,10 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule }  from '@angular/platform-browser';
-import { HttpModule } from '@angular/http';
+import { HttpModule, Http } from '@angular/http';
 import { FormsModule } from '@angular/forms';
-import { TranslateModule } from 'ng2-translate/ng2-translate';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
 import { AppComponent } from './app.component';
 import { routing } from './app.routing';
@@ -24,7 +25,15 @@ import { NavigationComponent } from './navigation';
     HttpModule,
     FormsModule,
     NgbModule.forRoot(),
-    TranslateModule.forRoot(),
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (http: Http) => {
+          return new TranslateHttpLoader(http, './i18n/', '.json');
+        },
+        deps: [Http]
+      }
+    }),
     routing
   ]
 })

src/app/navigation/navigation.component.scss

@@ -1,5 +1,5 @@
 .navbar-brand {
   img {
-    height: 30px;
+    height: 28px;
   }
 }