feat(animations): provideIn root and add animations

Author: Ismaestro

README.md

@@ -66,20 +66,21 @@ npm run update           | Update the project dependencies with ng update
 * CRUD: create, update and remove heroes
 * Search bar, to look for heroes
 * Custom loading page
-* Angular Pipes
-* Interceptors and Events (Progress bar active, if a request is pending)
 * Modal and toasts (snakbar)!
-* Autocomplete enabled in forms
-* Scroll to first invalid input in forms (directive)
-* Responsive layout (flex layout module)
-* SASS (most common used functions and mixins) and BEM styles
 * Internationalization with ng-translate and ngx-translate-extract. Also use cache busting for translation files with [webpack translate loader](https://github.com/ngx-translate/http-loader#angular-cliwebpack-translateloader-example)
 * Lazy loading modules
 * Service Workers
 * Dynamic Imports
 * More logical structure directory (from [here](https://itnext.io/choosing-a-highly-scalable-folder-structure-in-angular-d987de65ec7))
 * Basic example library
 * Scroll restoration and anchor examples
+* Responsive layout (flex layout module)
+* SASS (most common used functions and mixins) and BEM styles
+* Animations!
+* Angular Pipes
+* Interceptors and Events (Progress bar active, if a request is pending)
+* Scroll to first invalid input in forms (directive)
+* Autocomplete enabled in forms
 * Modernizr (browser features detection)
 * Safari polyfill for date inputs (date-input-polyfill)
 * Google Tag Manager

src/app/app-routing.module.ts

@@ -5,8 +5,7 @@ import {HomePageComponent} from './shared/pages/home-page/home-page.component';
 import {AppConfig} from './configs/app.config';
 
 const routes: Routes = [
-  {path: '', redirectTo: '/', pathMatch: 'full'},
-  {path: '', component: HomePageComponent},
+  {path: '', component: HomePageComponent, pathMatch: 'full'},
   {path: AppConfig.routes.error404, component: Error404PageComponent},
   {path: AppConfig.routes.heroes, loadChildren: './modules/heroes/heroes.module#HeroesModule'},
 

src/app/app.module.ts

@@ -1,10 +1,7 @@
 import {NgModule} from '@angular/core';
-import {BrowserModule} from '@angular/platform-browser';
 import {AppRoutingModule} from './app-routing.module';
 import {CoreModule} from './core/core.module';
 import {AppComponent} from './app.component';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {HttpClientModule} from '@angular/common/http';
 import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
 import {NgxExampleLibraryModule} from '@ismaestro/ngx-example-library';
 import {ServiceWorkerModule} from '@angular/service-worker';
@@ -15,10 +12,7 @@ import {SharedModule} from './shared/shared.module';
 
 @NgModule({
   imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
     ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production}),
-    HttpClientModule,
     TranslateModule.forRoot({
       loader: {
         provide: TranslateLoader,

src/app/core/core.module.ts

@@ -1,35 +1,36 @@
 import {NgModule, Optional, SkipSelf} from '@angular/core';
-import {ReactiveFormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
 import {ProgressBarService} from './services/progress-bar.service';
-import {LoggerService} from './services/logger.service';
-import {HeroService} from '../modules/heroes/shared/hero.service';
 import {TimingInterceptor} from './interceptors/timing.interceptor';
-import {HTTP_INTERCEPTORS} from '@angular/common/http';
+import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
 import {ProgressInterceptor} from './interceptors/progress.interceptor';
-
-function throwIfAlreadyLoaded(parentModule: any, moduleName: string) {
-  if (parentModule) {
-    throw new Error(`${moduleName} has already been loaded. Import Core modules in the AppModule only.`);
-  }
-}
+import {BrowserModule} from '@angular/platform-browser';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {TranslateModule} from '@ngx-translate/core';
+import {RouterModule} from '@angular/router';
 
 @NgModule({
   imports: [
-    /*ReactiveFormsModule,
-    RouterModule*/
+    BrowserModule,
+    BrowserAnimationsModule,
+    TranslateModule.forChild(),
+    RouterModule,
+    HttpClientModule
+  ],
+  exports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    HttpClientModule
   ],
   providers: [
     {provide: HTTP_INTERCEPTORS, useClass: ProgressInterceptor, multi: true, deps: [ProgressBarService]},
-    {provide: HTTP_INTERCEPTORS, useClass: TimingInterceptor, multi: true},
-    HeroService,
-    LoggerService,
-    ProgressBarService
+    {provide: HTTP_INTERCEPTORS, useClass: TimingInterceptor, multi: true}
   ]
 })
 
 export class CoreModule {
   constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
-    throwIfAlreadyLoaded(parentModule, 'CoreModule');
+    if (parentModule) {
+      throw new Error(`CoreModule has already been loaded. Import Core modules in the AppModule only.`);
+    }
   }
 }

src/app/core/services/logger.service.ts

@@ -1,6 +1,8 @@
 import {Injectable} from '@angular/core';
 
-@Injectable()
+@Injectable({
+  providedIn: 'root'
+})
 export class LoggerService {
   static log(msg: string): void {
     console.log(msg);

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

@@ -1,6 +1,8 @@
 import {EventEmitter, Injectable} from '@angular/core';
 
-@Injectable()
+@Injectable({
+  providedIn: 'root'
+})
 export class ProgressBarService {
   public updateProgressBar$: EventEmitter<any>;
 

src/app/modules/heroes/pages/hero-detail-page/hero-detail-page.component.html

@@ -4,7 +4,7 @@ <h1 class="header__title">{{'heroDetail' | translate}}</h1>
                       [color]="'primary'"
                       [mode]="'indeterminate'">
 </mat-progress-spinner>
-<div id="heroe-detail" *ngIf="hero">
+<div id="heroe-detail" *ngIf="hero" [@fadeInOut]>
     <ng-container>
         <app-hero-card [hero]="hero"></app-hero-card>
         <div id="hero-json">

src/app/modules/heroes/pages/hero-detail-page/hero-detail-page.component.ts

@@ -4,11 +4,13 @@ import {HeroService} from '../../shared/hero.service';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Location} from '@angular/common';
 import {AppConfig} from '../../../../configs/app.config';
+import {fadeInOut} from '../../../../shared/helpers/utils.helper';
 
 @Component({
   selector: 'app-hero-detail-page',
   templateUrl: './hero-detail-page.component.html',
-  styleUrls: ['./hero-detail-page.component.scss']
+  styleUrls: ['./hero-detail-page.component.scss'],
+  animations: [fadeInOut]
 })
 
 export class HeroDetailPageComponent implements OnInit {

src/app/modules/heroes/pages/heroes-list-page/heroes-list-page.component.html

@@ -1,13 +1,22 @@
 <div id="left">
   <h2 class="header__title">{{ 'heroesList' | translate }}</h2>
   <div>
-    <mat-progress-spinner *ngIf="!heroes"
-                          class="progress__spinner"
-                          [color]="'primary'"
-                          [mode]="'indeterminate'">
-    </mat-progress-spinner>
+    <mat-list id="loading-list" *ngIf="!heroes">
+      <mat-list-item *ngFor="let i of [1,2]">
+        <img mat-list-avatar src="assets/images/heroes/default.png">
+        <h3 mat-line>.</h3>
+        <p mat-line><span>.</span></p>
+        <div class="hero-actions">
+          <mat-icon class="icon__like--grey">favorite</mat-icon>
+        </div>
+      </mat-list-item>
+      <div id="loading-spinner">
+        <app-spinner></app-spinner>
+      </div>
+    </mat-list>
+
     <mat-list>
-      <mat-list-item *ngFor="let hero of heroes">
+      <mat-list-item *ngFor="let hero of heroes" [@fadeInOut]>
         <img *ngIf="hero.default" class="cp"
              (click)="seeHeroDetails(hero);" mat-list-avatar
              src="assets/images/heroes/{{hero.id}}-thumbnail.jpg">
@@ -33,7 +42,7 @@ <h3 mat-line [class.cp]="hero.default" (click)="seeHeroDetails(hero);"> {{hero.n
     </mat-list>
   </div>
 </div>
-<div id="right">
+<div id="right" [@fadeInOut]>
   <h2 class="header__title">{{ 'createHero' | translate }}</h2>
   <div>
     <form [formGroup]="newHeroForm" #form="ngForm" appScrollToFirstInvalid

src/app/modules/heroes/pages/heroes-list-page/heroes-list-page.component.scss

@@ -1,4 +1,20 @@
 @import "mixins";
+@import "colors";
+
+#loading-list {
+  h3, p {
+    color: $light-grey;
+    background: $light-grey;
+  }
+
+  p {
+    margin-top: 0.5rem;
+  }
+}
+
+#loading-spinner {
+  position: relative;
+}
 
 #left {
   width: 50%;
@@ -26,6 +42,7 @@
 }
 
 .hero-actions {
+  margin-left: 1rem;
   padding-bottom: 0;
 
   .icon__remove {