feat(new version): removed json-server and added API

fix(tests): solved problems with unit tests and e2e
feat(readme): updated readme

Author: Ismaestro

README.md

@@ -4,10 +4,16 @@ Sample app made with  :heart:
 
 ### Demo
 
+Live demo at: https://ismaestro.github.io/angular4-sample-app/
+
 ![angular-2-sample-project](http://i65.tinypic.com/1jqhx2.jpg)
 
 ## Based on
-Angular 4, Bootstrap 4, Angular CLI and more plugins like ng2 translate and json-server
+Angular 4, Bootstrap 4, Angular CLI and more plugins like ng2 translate
+
+## Server
+
+This repo is using an API which is [a simple app](https://github.com/Ismaestro/tour-of-heroes-sample-app) in NodeJS deployed on Heroku, to create, modify and delete heroes
 
 ## How can I support developers?
 - Star the GitHub repo :star:
@@ -21,6 +27,8 @@ Angular 4, Bootstrap 4, Angular CLI and more plugins like ng2 translate and json
 * Sass
 * Angular 4
 * jQuery
+* Tests with Protractor
+* Github pages deploy ready
 
 Enjoy :metal:
 

e2e/app.po.ts

@@ -1,4 +1,4 @@
-import {browser, element, by} from 'protractor';
+import {browser, by, element} from 'protractor';
 
 export class AngularTOHPage {
   navigateTo() {

karma.conf.js

@@ -1,18 +1,18 @@
 module.exports = function (config) {
   config.set({
     basePath: '',
-    frameworks: ['jasmine', 'angular-cli'],
+    frameworks: ['jasmine', '@angular/cli'],
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-remap-istanbul'),
-      require('angular-cli/plugins/karma')
+      require('@angular/cli/plugins/karma')
     ],
     files: [
       {pattern: './src/test.ts', watched: false}
     ],
     preprocessors: {
-      './src/test.ts': ['angular-cli']
+      './src/test.ts': ['@angular/cli']
     },
     mime: {
       'text/x-typescript': ['ts', 'tsx']
@@ -24,7 +24,7 @@ module.exports = function (config) {
       }
     },
     angularCli: {
-      config: './angular-cli.json',
+      config: './.angular-cli.json',
       environment: 'dev'
     },
     reporters: config.angularCli && config.angularCli.codeCoverage

package.json

@@ -26,6 +26,7 @@
     "@angular/platform-server": "4.2.4",
     "@angular/router": "4.2.4",
     "@types/jasmine": "2.5.53",
+    "@types/jasminewd2": "^2.0.2",
     "@types/node": "8.0.2",
     "angular-cli-ghpages": "0.5.1",
     "bootstrap": "4.0.0-alpha.6",
@@ -43,7 +44,7 @@
     "protractor": "5.1.2",
     "rxjs": "5.4.1",
     "ts-helpers": "1.1.2",
-    "ts-node": "3.1.0",
+    "ts-node": "3.0.0",
     "tslint": "5.4.3",
     "typescript": "2.3.4",
     "zone.js": "0.8.12"

protractor.conf.js

@@ -2,7 +2,7 @@
 // https://github.com/angular/protractor/blob/master/lib/config.ts
 
 /*global jasmine */
-var SpecReporter = require('jasmine-spec-reporter');
+var SpecReporter = require('jasmine-spec-reporter').SpecReporter;
 
 exports.config = {
   allScriptsTimeout: 11000,

src/app/app-routing.module.ts

@@ -1,4 +1,4 @@
-import {NgModule}             from '@angular/core';
+import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
 
 import {HeroTopComponent} from './heroes/hero-top/hero-top.component';

src/app/app.component.scss

@@ -0,0 +1,7 @@
+.text-left {
+  text-align: left !important;
+}
+
+.text-right {
+  text-align: right !important;
+}

src/app/app.component.ts

@@ -1,12 +1,13 @@
 import {Component} from '@angular/core';
-import {TranslateService}  from 'ng2-translate';
+import {TranslateService} from 'ng2-translate';
 import {Title} from '@angular/platform-browser';
 
 import {environment} from '../environments/environment';
 
 @Component({
   selector: 'toh-app',
-  templateUrl: './app.component.html'
+  templateUrl: './app.component.html',
+  styles: ['./app.component.scss']
 })
 
 export class AppComponent {

src/app/app.module.ts

@@ -1,18 +1,18 @@
-import {NgModule}                         from '@angular/core';
-import {BrowserModule}                    from '@angular/platform-browser';
-import {FormsModule}                      from '@angular/forms';
-import {Http, HttpModule}                 from '@angular/http';
-import {TranslateModule, TranslateLoader} from 'ng2-translate';
-import {TranslateLoaderFactory}           from './app.translate.factory';
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {FormsModule} from '@angular/forms';
+import {Http, HttpModule} from '@angular/http';
+import {TranslateLoader, TranslateModule} from 'ng2-translate';
+import {TranslateLoaderFactory} from './app.translate.factory';
 
 import {APP_CONFIG, AppConfig} from './config/app.config';
 
 import {AppRoutingModule} from './app-routing.module';
-import {SharedModule}     from './shared/shared.module';
-import {CoreModule}       from './core/core.module';
-import {HeroesModule}     from './heroes/heroes.module';
+import {SharedModule} from './shared/shared.module';
+import {CoreModule} from './core/core.module';
+import {HeroesModule} from './heroes/heroes.module';
 
-import {AppComponent}     from './app.component';
+import {AppComponent} from './app.component';
 import {HeroTopComponent} from './heroes/hero-top/hero-top.component';
 
 @NgModule({

src/app/config/app.config.ts

@@ -11,7 +11,7 @@ export const AppConfig: IAppConfig = {
     heroById: heroesRoute + '/:id'
   },
   endpoints: {
-    heroes: 'https://jsonblob.com/api/jsonBlob/11ba5f87-5997-11e7-ae4c-997a6628ed33',
-    heroesPowers: 'https://jsonblob.com/api/jsonBlob/f8234363-5991-11e7-ae4c-eb7c024ddb08'
+    heroes: 'https://tour-of-heroes-sample-app.herokuapp.com/heroes',
+    heroesPowers: 'https://tour-of-heroes-sample-app.herokuapp.com/heroesPowers'
   }
 };

src/app/core/core.module.ts

@@ -1,17 +1,17 @@
-import {NgModule, Optional, SkipSelf}     from '@angular/core';
-import {CommonModule}                     from '@angular/common';
-import {FormsModule}                      from '@angular/forms';
-import {Http}                             from '@angular/http';
-import {TranslateModule, TranslateLoader} from 'ng2-translate';
-import {TranslateLoaderFactory}           from '../app.translate.factory';
+import {NgModule, Optional, SkipSelf} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {Http} from '@angular/http';
+import {TranslateLoader, TranslateModule} from 'ng2-translate';
+import {TranslateLoaderFactory} from '../app.translate.factory';
 
 import {throwIfAlreadyLoaded} from './module-import-guard';
-import {LoggerService}        from './logger.service';
+import {LoggerService} from './logger.service';
 
-import {HeroesModule}      from '../heroes/heroes.module';
+import {HeroesModule} from '../heroes/heroes.module';
 import {HeroRoutingModule} from '../heroes/heroes-routing.module';
 
-import {NavComponent}    from './nav/nav.component';
+import {NavComponent} from './nav/nav.component';
 import {FooterComponent} from './footer/footer.component';
 
 

src/app/core/nav/nav.component.html

@@ -12,7 +12,7 @@
         <div class="dropdown">
             <a class="btn btn-secondary dropdown-toggle" id="languagesDropdown" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
-                <i class="fa fa-globe" aria-hidden="true"></i> {{ 'language' | translate }}
+                <i class="fa fa-globe" aria-hidden="true"></i> {{ language | translate }}
             </a>
             <div class="dropdown-menu" aria-labelledby="languagesDropdown">
                 <a class="dropdown-item" (click)="changeLanguage('en')">{{ 'english' | translate }}</a>

src/app/core/nav/nav.component.ts

@@ -1,5 +1,5 @@
 import {Component, Inject, Input} from '@angular/core';
-import {TranslateService}         from 'ng2-translate';
+import {TranslateService} from 'ng2-translate';
 
 import {APP_CONFIG} from '../../config/app.config';
 import {IAppConfig} from '../../config/iapp.config';
@@ -14,6 +14,7 @@ export class NavComponent {
   @Input() title: string;
 
   menuItems: any[];
+  language: string;
 
   private translateService: TranslateService;
 
@@ -24,6 +25,21 @@ export class NavComponent {
         {link: '/' + this.appConfig.routes.heroes, name: texts['heroesList']}
       ];
     });
+
+    this.loadLanguageLabel();
+  }
+
+  private loadLanguageLabel() {
+    switch (this.translateService.currentLang) {
+      case 'en':
+        this.language = 'english';
+        break;
+      case 'es':
+        this.language = 'spanish';
+        break;
+      default:
+        this.language = 'language';
+    }
   }
 
   constructor(@Inject(APP_CONFIG) private appConfig: IAppConfig,
@@ -33,7 +49,8 @@ export class NavComponent {
   }
 
   changeLanguage(language: string): void {
-    this.translateService.use(language);
-    this.loadMenus();
+    this.translateService.use(language).subscribe(() => {
+      this.loadMenus();
+    });
   }
 }

src/app/heroes/hero-create-new/hero-create-new.component.html

@@ -1,5 +1,10 @@
 <h3>{{ 'hero-create-new.newHero' | translate }}</h3>
-<form (ngSubmit)="onSubmit()" #heroForm="ngForm">
+<form (ngSubmit)="onSubmit()" #heroForm="ngForm" id="new-hero-form">
+    <div class="form-group">
+        <label class="form-label" for="id">Id</label>
+        <input type="text" class="form-control" id="id"
+               [(ngModel)]="hero.id" name="id">
+    </div>
     <div class="form-group">
         <label class="form-label" for="name">{{ 'name' | translate }}</label>
         <input type="text" class="form-control" id="name"
@@ -24,6 +29,9 @@ <h3>{{ 'hero-create-new.newHero' | translate }}</h3>
             <option *ngFor="let power of powers" [value]="power">{{power}}</option>
         </select>
     </div>
-    <button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">{{ 'createNewHero' | translate }}!
-    </button>
+    <div class="form-group alert alert-danger" *ngIf="error">{{error | translate}}</div>
+    <div class="form-group">
+        <button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">{{ 'createNewHero' | translate }}!
+        </button>
+    </div>
 </form>

src/app/heroes/hero-create-new/hero-create-new.component.scss

@@ -12,4 +12,9 @@
     width: 35%;
     float: right;
   }
+
+  #new-hero-form {
+    margin: 0 auto;
+    display: table;
+  }
 }

src/app/heroes/hero-create-new/hero-create-new.component.ts

@@ -16,18 +16,22 @@ export class HeroFormComponent {
 
   hero: Hero;
   powers: string[];
+  error: string;
 
   constructor(private heroService: HeroService) {
-    this.hero = new Hero(-1, '', '');
+    this.hero = new Hero('', '', '');
 
     this.heroService.getHeroesPowers().then(powers => this.powers = powers);
   }
 
   onSubmit() {
     this.heroService.create(this.hero)
-      .then(heroes => {
-        this.heroes = heroes;
+      .then(() => {
         this.selectedHero = null;
+      }, (response) => {
+        if (response.status === 500) {
+          this.error = 'heroDuplicated';
+        }
       });
   }
 }

src/app/heroes/hero-detail/hero-detail.component.ts

@@ -1,9 +1,9 @@
-import {Component, OnInit}      from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, Params} from '@angular/router';
-import {Location}               from '@angular/common';
+import {Location} from '@angular/common';
 
-import {Hero}         from '../shared/hero.model';
-import {HeroService}  from '../shared/hero.service';
+import {Hero} from '../shared/hero.model';
+import {HeroService} from '../shared/hero.service';
 
 @Component({
   selector: 'toh-hero-detail',

src/app/heroes/hero-list/hero-list.component.html

@@ -2,13 +2,14 @@
     <h2>
         {{ 'heroesList' | translate }}
         <button class="btn btn-success"
+                *ngIf="!createNewHero"
                 (click)="createNewHero = !createNewHero">
             <i class="fa fa-plus" aria-hidden="true"></i>
         </button>
     </h2>
     <div>
         <div class="hero-list">
-            <h3>{{ 'pickColor' | translate }}</h3>
+            <h3 class="text-left">{{ 'pickColor' | translate }}</h3>
             <div class="color-picker">
                 <label class="custom-control custom-radio">
                     <input id="color1" name="radio" type="radio" class="custom-control-input" (click)="color='orange'">
@@ -73,7 +74,7 @@ <h5 class="modal-title" id="exampleModalLabel">{{ 'alert' | translate }}</h5>
                 </li>
             </ul>
         </div>
-        <div class="new-hero">
+        <div class="new-hero" >
             <toh-hero-create-new *ngIf="createNewHero"
                                  [heroes]="heroes"
                                  [selectedHero]="selectedHero">

src/app/heroes/hero-list/hero-list.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit, Inject} from '@angular/core';
+import {Component, Inject, OnInit} from '@angular/core';
 import {Router} from '@angular/router';
 
 import {APP_CONFIG} from '../../config/app.config';
@@ -24,6 +24,7 @@ export class HeroListComponent implements OnInit {
   constructor(@Inject(APP_CONFIG) private appConfig: IAppConfig,
               private router: Router,
               private heroService: HeroService) {
+    this.heroService.refreshHeroes$.subscribe(heroes => this.heroes = heroes);
   }
 
   getHeroes(): void {

src/app/heroes/hero-search/hero-search.component.ts

@@ -1,10 +1,10 @@
-import {Component, OnInit, Inject} from '@angular/core';
-import {Router}                    from '@angular/router';
-import {Observable}                from 'rxjs/Observable';
-import {Subject}                   from 'rxjs/Subject';
+import {Component, Inject, OnInit} from '@angular/core';
+import {Router} from '@angular/router';
+import {Observable} from 'rxjs/Observable';
+import {Subject} from 'rxjs/Subject';
 
-import {APP_CONFIG}    from '../../config/app.config';
-import {IAppConfig}    from '../../config/iapp.config';
+import {APP_CONFIG} from '../../config/app.config';
+import {IAppConfig} from '../../config/iapp.config';
 import {LoggerService} from '../../core/logger.service';
 
 import {Hero} from '../shared/hero.model';

src/app/heroes/heroes-routing.module.ts

@@ -1,9 +1,9 @@
-import {NgModule}             from '@angular/core';
+import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
 
 import {AppConfig} from '../config/app.config';
 
-import {HeroListComponent}   from './hero-list/hero-list.component';
+import {HeroListComponent} from './hero-list/hero-list.component';
 import {HeroDetailComponent} from './hero-detail/hero-detail.component';
 
 const heroesRoutes: Routes = [