feat(angular5): new stable version with all files

README.md

@@ -1,4 +1,4 @@
-# Example app with Angular 4 + Angular CLI + Angular Material + Docker
+# Example app with Angular 5 + Angular CLI + Angular Material + Docker
 
 > ### Base project made with much  :heart: . Contains CRUD, official style guide, patterns, etc.
 

e2e/pages/heroes-list/heroes-list-page.ts → e2e/heroes-list/heroes-list-page.ts

@@ -1,5 +1,5 @@
 import {browser, by, element} from 'protractor';
-import {AppConfig} from '../../../src/app/config/app.config';
+import {AppConfig} from '../../src/app/config/app.config';
 
 export class HeroesListPage {
   static navigateTo(): any {

e2e/pages/home/home-page.e2e-spec.ts → e2e/home/home-page.e2e-spec.ts

@@ -1,4 +1,4 @@
-import {AppConfig} from '../../../src/app/config/app.config';
+import {AppConfig} from '../../src/app/config/app.config';
 import {HomePage} from './home-page';
 
 describe('Home page', function () {

package.json

@@ -7,13 +7,13 @@
     "build": "ng build --prod",
     "deploy": "ng build --prod --base-href / && angular-cli-ghpages",
     "test": "ng test --watch=false --code-coverage",
-    "e2e": "ng e2e",
+    "e2e": "ng e2e --prod",
     "e2e:home": "ng e2e --serve false --prod --specs=./e2e/home/**/*.e2e-spec.ts",
     "e2e:heroeslist": "ng e2e --serve false --prod --specs=./e2e/heroes-list/**/*.e2e-spec.ts",
     "lint": "ng lint",
     "ci": "npm run lint && npm run test && npm run e2e",
     "sme": "ng build && source-map-explorer dist/main.bundle.js",
-    "release": "standard-version",
+    "release": "standard-version && git push --follow-tags origin master",
     "docker": "docker build -t angularexampleapp . && docker run -d -p 4200:80 angularexampleapp"
   },
   "private": true,
@@ -47,7 +47,7 @@
     "@ngx-translate/http-loader": "2.0.0",
     "@types/jasmine": "2.6.2",
     "@types/jasminewd2": "2.0.3",
-    "@types/node": "8.0.47",
+    "@types/node": "8.0.48",
     "angular-cli-ghpages": "0.5.1",
     "codelyzer": "4.0.1",
     "coveralls": "3.0.0",

src/app/app.component.spec.ts

@@ -35,6 +35,7 @@ describe('AppComponent', () => {
     }).compileComponents();
 
     fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
     component = fixture.debugElement.componentInstance;
   }));
 
@@ -43,15 +44,8 @@ describe('AppComponent', () => {
   }));
 
   it('should change title meta tag in root path', async(() => {
-    component.router.navigate(['/']).then(() => {
-      expect(component.title.getTitle()).toBe('Angular Example App');
-    });
-  }));
-
-  fit('should change title meta tag in heroes path', async(() => {
-    component.router.navigate(['/' + AppConfig.routes.heroes]).then(() => {
-      expect(component.title.getTitle()).toBe('Heroes list');
-    });
+    fixture.detectChanges();
+    expect(component.title.getTitle()).toBe('Angular Example App');
   }));
 
   it('should check browser features', (() => {

src/app/app.component.ts

@@ -25,14 +25,14 @@ export class AppComponent {
     this.translateService.setDefaultLang('en');
     this.translateService.use('en');
 
+    this.title.setTitle('Angular Example App');
     this.router.events.subscribe((event: any) => {
       if (event instanceof NavigationEnd) {
         switch (event.urlAfterRedirects) {
           case '/':
-            this.title.setTitle('Angular Example App');
             this.meta.updateTag({
               name: 'description',
-              content: 'Angular 4 Example app with Angular CLI, Angular Material and more'
+              content: 'Angular Example app with Angular CLI, Angular Material and more'
             });
             break;
           case '/' + AppConfig.routes.heroes:

src/app/app.module.ts

@@ -14,7 +14,6 @@ import {HttpClient, HttpClientModule} from '@angular/common/http';
 import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
 import {HttpLoaderFactory} from './app.translate.factory';
 import {HeroTopComponent} from './heroes/hero-top/hero-top.component';
-import {FlexLayoutModule} from '@angular/flex-layout';
 
 @NgModule({
   imports: [

src/app/core/error404/error-404.component.spec.ts

@@ -32,6 +32,7 @@ describe('Error404Component', () => {
     }).compileComponents();
 
     fixture = TestBed.createComponent(Error404Component);
+    fixture.detectChanges();
     component = fixture.debugElement.componentInstance;
     progressBarService = TestBed.get(ProgressBarService);
   }));

src/app/core/footer/footer.component.spec.ts

@@ -19,6 +19,7 @@ describe('FooterComponent', () => {
     }).compileComponents();
 
     fixture = TestBed.createComponent(FooterComponent);
+    fixture.detectChanges();
     component = fixture.debugElement.componentInstance;
   }));
 

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

@@ -32,6 +32,7 @@ describe('NavComponent', () => {
     }).compileComponents();
 
     fixture = TestBed.createComponent(NavComponent);
+    fixture.detectChanges();
     component = fixture.debugElement.componentInstance;
     progressBarService = TestBed.get(ProgressBarService);
   }));

src/app/core/progress-bar.service.spec.ts

@@ -1,8 +1,5 @@
 import {TestBed} from '@angular/core/testing';
 import {ProgressBarService} from './progress-bar.service';
-
-import 'rxjs/add/operator/catch';
-import 'rxjs/add/operator/startWith';
 import {HeroService} from '../heroes/shared/hero.service';
 import {TestsModule} from '../shared/modules/tests.module';
 import {TranslateModule} from '@ngx-translate/core';

src/app/core/search-bar/search-bar.component.html

@@ -5,8 +5,8 @@
 
 <mat-autocomplete #heroesAutocomplete="matAutocomplete">
     <mat-option *ngFor="let hero of filteredHeroes"
-               (onSelectionChange)="searchHero(hero)"
-               [value]="hero.name">
+                (onSelectionChange)="searchHero(hero)"
+                [value]="hero.name">
         {{hero.name}}
     </mat-option>
 </mat-autocomplete>

src/app/core/search-bar/search-bar.component.spec.ts

@@ -36,6 +36,7 @@ describe('SearchBarComponent', () => {
     }).compileComponents();
 
     fixture = TestBed.createComponent(SearchBarComponent);
+    fixture.detectChanges();
     component = fixture.debugElement.componentInstance;
     heroService = TestBed.get(HeroService);
   }));
@@ -45,7 +46,6 @@ describe('SearchBarComponent', () => {
   }));
 
   it('should get all heroes', fakeAsync(() => {
-    fixture.detectChanges();
     spyOn(heroService, 'getAllHeroes').and.returnValue(Promise.resolve(true));
     tick();
     fixture.detectChanges();
@@ -72,10 +72,4 @@ describe('SearchBarComponent', () => {
     expect(component.filterHeroes('spiderman').length).toBe(0);
     expect(component.filterHeroes().length).toBe(2);
   }));
-
-  it('should search for a hero', async(() => {
-    component.searchHero({id: 1}).then((redirection) => {
-      expect(redirection).toBe(true);
-    });
-  }));
 });

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

@@ -1,8 +1,8 @@
 <h1 class="section-title">{{'heroDetail' | translate}}</h1>
 <mat-progress-spinner *ngIf="!hero"
-                     class="progress-spinner"
-                     [color]="'primary'"
-                     [mode]="'indeterminate'">
+                      class="progress-spinner"
+                      [color]="'primary'"
+                      [mode]="'indeterminate'">
 </mat-progress-spinner>
 <div id="heroe-detail" *ngIf="hero">
     <ng-container>
@@ -16,8 +16,8 @@ <h1 class="section-title">{{'heroDetail' | translate}}</h1>
                 <div class="hero-actions">
                     {{hero.likes}}
                     <mat-icon matTooltip="{{(canVote ? 'canVote' : 'cannotVote') | translate}}"
-                             [matTooltipPosition]="'above'"
-                             class="like-icon" (click)="like(hero)">favorite
+                              [matTooltipPosition]="'above'"
+                              class="like-icon" (click)="like(hero)">favorite
                     </mat-icon>
                 </div>
             </mat-card-header>

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

@@ -27,6 +27,7 @@ describe('HeroDetailComponent', () => {
     }).compileComponents();
 
     fixture = TestBed.createComponent(HeroDetailComponent);
+    fixture.detectChanges();
     component = fixture.debugElement.componentInstance;
     heroService = TestBed.get(HeroService);
   }));

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

@@ -2,9 +2,9 @@
     <h2 class="section-title">{{ 'heroesList' | translate }}</h2>
     <div>
         <mat-progress-spinner *ngIf="!heroes"
-                             class="progress-spinner"
-                             [color]="'primary'"
-                             [mode]="'indeterminate'">
+                              class="progress-spinner"
+                              [color]="'primary'"
+                              [mode]="'indeterminate'">
         </mat-progress-spinner>
         <mat-list>
             <mat-list-item *ngFor="let hero of heroes">
@@ -20,12 +20,12 @@ <h3 mat-line [ngClass]="{'cp': hero.default}" (click)="seeHeroDetails(hero);"> {
                 <div class="hero-actions">
                     {{hero.likes}}
                     <mat-icon matTooltip="{{(canVote ? 'canVote' : 'cannotVote') | translate}}"
-                             [matTooltipPosition]="'above'"
-                             class="like-icon" (click)="like(hero)">
+                              [matTooltipPosition]="'above'"
+                              class="like-icon" (click)="like(hero)">
                         favorite
                     </mat-icon>
                     <mat-icon class="remove-icon" *ngIf="!hero.default"
-                             (click)="remove(hero);">
+                              (click)="remove(hero);">
                         delete
                     </mat-icon>
                 </div>

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

@@ -24,6 +24,7 @@ describe('HeroListComponent', () => {
     }).compileComponents();
 
     fixture = TestBed.createComponent(HeroListComponent);
+    fixture.detectChanges();
     component = fixture.debugElement.componentInstance;
   }));
 

src/app/heroes/hero-top/hero-top.component.spec.ts

@@ -30,6 +30,7 @@ describe('HeroTopComponent', () => {
     }).compileComponents();
 
     fixture = TestBed.createComponent(HeroTopComponent);
+    fixture.detectChanges();
     component = fixture.debugElement.componentInstance;
     heroService = TestBed.get(HeroService);
   }));

src/app/heroes/heroes.component.spec.ts

@@ -21,6 +21,7 @@ describe('HeroesComponent', () => {
 
   it('should create heroes component', (() => {
     const fixture = TestBed.createComponent(HeroesComponent);
+    fixture.detectChanges();
     const component = fixture.debugElement.componentInstance;
     expect(component).toBeTruthy();
   }));

src/app/heroes/shared/hero.service.spec.ts

@@ -2,9 +2,6 @@ import {async, TestBed} from '@angular/core/testing';
 import {HeroService} from './hero.service';
 import {APP_BASE_HREF} from '@angular/common';
 import {APP_CONFIG, AppConfig} from '../../config/app.config';
-
-import 'rxjs/add/operator/catch';
-import 'rxjs/add/operator/startWith';
 import {TestsModule} from '../../shared/modules/tests.module';
 import {TranslateModule} from '@ngx-translate/core';
 import {HttpErrorResponse} from '@angular/common/http';

src/app/shared/modules/tests.module.ts

@@ -7,7 +7,6 @@ import {HttpClientModule} from '@angular/common/http';
 import {RouterModule} from '@angular/router';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterTestingModule} from '@angular/router/testing';
-import {CoreModule} from '../../core/core.module';
 
 @NgModule({
   exports: [

src/index.html

@@ -43,5 +43,7 @@
         </div>
     </div>
 </app-root>
+<!-- TODO: remove this workaround for uglify -->
+<script> window.req = window.dep = null; </script>
 </body>
 </html>

src/polyfills.ts

@@ -75,18 +75,15 @@ import 'zone.js/dist/zone';  // Included with Angular CLI.
  */
 // import 'intl/locale-data/jsonp/en';
 
-
-import 'rxjs/add/observable/of';
+/***************************************************************************************************
+ * CUSTOM IMPORTS
+ */
 import 'rxjs/add/observable/throw';
 
 import 'rxjs/add/operator/catch';
-import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/operator/distinctUntilChanged';
-import 'rxjs/add/operator/do';
-import 'rxjs/add/operator/filter';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/switchMap';
-import 'rxjs/add/operator/toPromise';
 import 'rxjs/add/operator/startWith';
 
+/**
+ * Need to import hammer for Angular Material support.
+ */
 import 'hammerjs';

tsconfig.json

@@ -15,5 +15,8 @@
       "es2017",
       "dom"
     ]
+  },
+  "angularCompilerOptions": {
+    "preserveWhitespaces": false
   }
 }