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'
   }
 };