migrate angular 8

aboudard · aboudard · commit 49b3bd934a43 · 2020-02-23T18:00:36.000+01:00
diff --git a/src/angular/browserslist b/src/angular/browserslist
@@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.
diff --git a/src/angular/package-lock.json b/src/angular/package-lock.json
diff --git a/src/angular/package.json b/src/angular/package.json
@@ -6,6 +6,7 @@
     "ng": "ng",
     "start": "ng serve --proxy-config proxy.conf.json",
     "build": "ng build --prod",
+    "buildwatch": "ng build --watch",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
@@ -15,42 +16,41 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^6.0.3",
-    "@angular/common": "^6.0.3",
-    "@angular/compiler": "^6.0.3",
-    "@angular/core": "^6.0.3",
-    "@angular/forms": "^6.0.3",
-    "@angular/http": "^6.0.3",
-    "@angular/platform-browser": "^6.0.3",
-    "@angular/platform-browser-dynamic": "^6.0.3",
-    "@angular/router": "^6.0.3",
-    "@fortawesome/fontawesome-free-webfonts": "^1.0.9",
-    "@ng-bootstrap/ng-bootstrap": "^2.0.0",
-    "@ngrx/effects": "^6.0.1",
-    "@ngrx/entity": "^6.0.1",
-    "@ngrx/store": "^6.0.1",
-    "@ngrx/store-devtools": "^6.0.1",
-    "awesome-bootstrap-checkbox": "^1.0.1",
-    "bootstrap": "^4.1.1",
+    "@angular/animations": "^8.2.14",
+    "@angular/common": "^8.2.14",
+    "@angular/compiler": "^8.2.14",
+    "@angular/core": "^8.2.14",
+    "@angular/forms": "^8.2.14",
+    "@angular/platform-browser": "^8.2.14",
+    "@angular/platform-browser-dynamic": "^8.2.14",
+    "@angular/router": "^8.2.14",
+    "@fortawesome/angular-fontawesome": "^0.5.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.27",
+    "@fortawesome/free-solid-svg-icons": "^5.12.1",
+    "@ng-bootstrap/ng-bootstrap": "^5.3.0",
+    "@ngrx/data": "^8.6.0",
+    "@ngrx/effects": "^8.6.0",
+    "@ngrx/entity": "^8.6.0",
+    "@ngrx/store": "^8.6.0",
+    "@ngrx/store-devtools": "^8.6.0",
+    "bootstrap": "^4.4.1",
     "core-js": "^2.5.6",
-    "ngrx-data": "^6.0.2-beta.9",
-    "ngx-spinner": "^6.0.0",
-    "ngx-toastr": "^8.8.0",
-    "rxjs": "^6.2.0",
+    "ngx-spinner": "^8.1.0",
+    "ngx-toastr": "^11.3.3",
+    "rxjs": "^6.5.4",
     "rxjs-compat": "^6.1.0",
-    "zone.js": "^0.8.19"
+    "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.6.3",
-    "@angular/cli": "~6.0.3",
-    "@angular/compiler-cli": "^6.0.3",
-    "@angular/language-service": "^6.0.3",
-    "@compodoc/compodoc": "^1.1.3",
-    "@ngrx/schematics": "^6.0.1",
+    "@angular-devkit/build-angular": "~0.803.25",
+    "@angular/cli": "~8.3.25",
+    "@angular/compiler-cli": "^8.2.14",
+    "@angular/language-service": "^8.2.14",
+    "@ngrx/schematics": "^8.6.0",
     "@types/jasmine": "^2.8.7",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^6.0.109",
-    "codelyzer": "^4.3.0",
+    "codelyzer": "^5.0.1",
     "jasmine-core": "~2.8.0",
     "jasmine-spec-reporter": "~4.2.1",
     "json-server": "^0.15.1",
@@ -62,7 +62,7 @@
     "protractor": "^5.3.2",
     "ts-node": "~4.1.0",
     "tslint": "~5.9.1",
-    "typescript": "^2.7.2",
+    "typescript": "^3.5.3",
     "worker-loader": "^1.1.1"
   }
 }
diff --git a/src/angular/src/app/admin/admin.module.ts b/src/angular/src/app/admin/admin.module.ts
@@ -1,12 +1,13 @@
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { AdminRoutingModule } from './admin-routing.module';
 import { AdminComponent } from './admin.component';
 import { UploadComponent } from './upload/upload.component';
-import {FormsModule, ReactiveFormsModule} from "@angular/forms";
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 
 @NgModule({
-  imports: [CommonModule, AdminRoutingModule, FormsModule, ReactiveFormsModule],
+  imports: [CommonModule, AdminRoutingModule, FormsModule, ReactiveFormsModule, FontAwesomeModule],
   declarations: [AdminComponent, UploadComponent]
 })
 export class AdminModule {}
diff --git a/src/angular/src/app/admin/upload/upload.component.html b/src/angular/src/app/admin/upload/upload.component.html
@@ -7,7 +7,7 @@
     </div>
   </div>
   <button type="submit" class="btn btn-primary" value="Upload">
-    <i class="fas fa-upload"></i> Submit
+    <fa-icon icon="upload"></fa-icon> Submit
   </button>
 
 </form>
diff --git a/src/angular/src/app/app.component.ts b/src/angular/src/app/app.component.ts
@@ -1,3 +1,4 @@
+import { UtilsService } from './services/utils.service';
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { ToastService } from './services/toast.service';
 
@@ -9,6 +10,9 @@ import { ToastService } from './services/toast.service';
 })
 export class AppComponent {
   constructor(
+    private utilsService: UtilsService,
     private toastService: ToastService // create an instance of the service that intercepts $entities actions
-  ) {}
+  ) {
+    this.utilsService.initIcons();
+  }
 }
diff --git a/src/angular/src/app/app.module.ts b/src/angular/src/app/app.module.ts
@@ -13,6 +13,7 @@ import { ToastrModule } from 'ngx-toastr';
 import { TodoModule } from './todo/todo.module';
 import { AppRoutingModule } from './app-routing/app-routing.module';
 import { AdminModule } from './admin/admin.module';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 @NgModule({
   declarations: [AppComponent],
@@ -26,10 +27,11 @@ import { AdminModule } from './admin/admin.module';
     BrowserModule,
     AppStoreModule,
     ServicesModule,
-    NgbModule.forRoot(),
+    NgbModule,
+    FontAwesomeModule,
     BrowserAnimationsModule, // required animations module
     ToastrModule.forRoot(),
-    AppRoutingModule // ToastrModule added
+    AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/angular/src/app/comp/comp.module.ts b/src/angular/src/app/comp/comp.module.ts
@@ -1,3 +1,4 @@
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FaInputComponent } from './fa-input/fa-input.component';
@@ -10,7 +11,7 @@ import { RouterModule } from '@angular/router';
  * Module des composants annexes non liés aux routes
  */
 @NgModule({
-  imports: [CommonModule, RouterModule],
+  imports: [CommonModule, RouterModule, FontAwesomeModule],
   declarations: [
     FaInputComponent,
     HelloComponent,
diff --git a/src/angular/src/app/comp/fa-input/fa-input.component.html b/src/angular/src/app/comp/fa-input/fa-input.component.html
@@ -1,3 +1,3 @@
-<i class="fas mr-2" [ngClass]="classes"></i>
+<fa-icon class="mr-2" [icon]="icon"></fa-icon>
 <ng-content></ng-content>
 <!--input #input (focus)="inputFocus = true" (blur)="inputFocus = false" (keyup)="value.emit(input.value)"-->
diff --git a/src/angular/src/app/comp/fa-input/fa-input.component.ts b/src/angular/src/app/comp/fa-input/fa-input.component.ts
@@ -4,7 +4,6 @@ import {
   EventEmitter,
   HostBinding,
   Input,
-  OnInit,
   Output
 } from '@angular/core';
 import { InputRefDirective } from '../../shared/input-ref.directive';
@@ -14,27 +13,15 @@ import { InputRefDirective } from '../../shared/input-ref.directive';
   templateUrl: './fa-input.component.html',
   styleUrls: ['./fa-input.component.scss']
 })
-export class FaInputComponent implements OnInit {
+export class FaInputComponent {
   @Input() icon: string;
   @Output() value = new EventEmitter<string>();
   inputFocus = false;
 
-  @ContentChild(InputRefDirective) input: InputRefDirective;
-
-  constructor() {}
-
-  ngOnInit() {}
-
-  get classes() {
-    const cssClasses = {};
-    cssClasses['fa-' + this.icon] = true;
-    return cssClasses;
-  }
+  @ContentChild(InputRefDirective, {static: false}) input: InputRefDirective;
 
   @HostBinding('class.focus')
   get focus() {
-    // console.log(this.inputFocus);
-    // return this.inputFocus;
     return this.input ? this.input.focus : false;
   }
 }
diff --git a/src/angular/src/app/services/toast.service.ts b/src/angular/src/app/services/toast.service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { EntityAction, OP_ERROR, OP_SUCCESS, ofEntityOp } from 'ngrx-data';
+import { EntityAction, OP_ERROR, OP_SUCCESS, ofEntityOp } from '@ngrx/data';
 import { ToastrService } from 'ngx-toastr';
 import { Actions } from '@ngrx/effects';
 import { filter } from 'rxjs/operators';
diff --git a/src/angular/src/app/services/todos.service.ts b/src/angular/src/app/services/todos.service.ts
@@ -1,9 +1,7 @@
 import { Injectable } from '@angular/core';
-import {
-  EntityCollectionServiceBase,
-  EntityCollectionServiceElementsFactory
-} from 'ngrx-data';
+
 import { Todo } from '../dto/todo';
+import { EntityCollectionServiceBase, EntityCollectionServiceElementsFactory } from '@ngrx/data';
 /**
  * Service qui map les Entities NgRx Data avec l'interface Todo
  */
diff --git a/src/angular/src/app/services/utils.service.spec.ts b/src/angular/src/app/services/utils.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UtilsService } from './utils.service';
+
+describe('UtilsService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: UtilsService = TestBed.get(UtilsService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/angular/src/app/services/utils.service.ts b/src/angular/src/app/services/utils.service.ts
@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
+import { faCheck, faBurn, faCommentAlt, faEdit, faTrash, faCheckSquare, faSquare, faUpload } from '@fortawesome/free-solid-svg-icons';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UtilsService {
+  constructor(private library: FaIconLibrary) {}
+
+  initIcons(): void {
+    this.library.addIcons(
+      faCheck, faBurn, faCommentAlt, faEdit, faTrash, faCheckSquare, faSquare, faUpload
+    );
+  }
+}
+
diff --git a/src/angular/src/app/store/app-store.module.ts b/src/angular/src/app/store/app-store.module.ts
@@ -1,10 +1,10 @@
+import { entityConfig } from './entity-metadata';
+import { EntityDataModule, DefaultDataServiceConfig } from '@ngrx/data';
 import { NgModule } from '@angular/core';
 import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { environment } from '../../environments/environment';
-import { EntityStoreModule } from './entity-store.module';
-import { DefaultDataServiceConfig } from 'ngrx-data';
 
 // TODO : change this config when using json-server or Spring Boot Data
 const defaultDataServiceConfig: DefaultDataServiceConfig = {
@@ -16,7 +16,7 @@ const defaultDataServiceConfig: DefaultDataServiceConfig = {
     StoreModule.forRoot({}),
     EffectsModule.forRoot([]),
     environment.production ? [] : StoreDevtoolsModule.instrument(),
-    EntityStoreModule
+    EntityDataModule.forRoot(entityConfig)
   ],
   providers: [
     { provide: DefaultDataServiceConfig, useValue: defaultDataServiceConfig }
diff --git a/src/angular/src/app/store/entity-metadata.ts b/src/angular/src/app/store/entity-metadata.ts
@@ -0,0 +1,33 @@
+import { Todo } from '../dto/todo';
+import { EntityMetadataMap, EntityDataModuleConfig } from '@ngrx/data';
+
+export function activeFilter(entities: { active: boolean }[], search: boolean) {
+  return entities.filter(e => e.active === search);
+}
+
+/**
+ * Fonction de comparaison pour trier les entities
+ * @param {string} a
+ * @param {string} b
+ * @returns {number}
+ */
+export function sortByTitle(
+  a: { title: string },
+  b: { title: string }
+): number {
+  return a.title.localeCompare(b.title);
+}
+
+const entityMetadata: EntityMetadataMap = {
+  Todo: {
+    filterFn: activeFilter,
+    sortComparer: sortByTitle
+  }
+};
+
+const pluralNames = {  };
+
+export const entityConfig: EntityDataModuleConfig = {
+  entityMetadata,
+  pluralNames
+};
diff --git a/src/angular/src/app/store/entity-store.module.ts b/src/angular/src/app/store/entity-store.module.ts
@@ -1,10 +1,7 @@
+import { EntityDataModule } from '@ngrx/data';
 // entity-store.module.ts
 import { NgModule } from '@angular/core';
-import {
-  EntityMetadataMap,
-  NgrxDataModule,
-  PropsFilterFnFactory
-} from 'ngrx-data';
+import { PropsFilterFnFactory, EntityMetadataMap } from '@ngrx/data';
 
 export function activeFilter(entities: { active: boolean }[], search: boolean) {
   return entities.filter(e => e.active === search);
@@ -43,6 +40,6 @@ export const entityMetadata: EntityMetadataMap = {
   }
 };
 @NgModule({
-  imports: [NgrxDataModule.forRoot({ entityMetadata: entityMetadata })]
+  imports: [EntityDataModule.forRoot({ entityMetadata: entityMetadata })]
 })
 export class EntityStoreModule {}
diff --git a/src/angular/src/app/todo/todo-edit/todo-edit.component.html b/src/angular/src/app/todo/todo-edit/todo-edit.component.html
@@ -23,6 +23,6 @@
     </div>
 
     <button type="submit" class="btn btn-primary" [disabled]="todoForm.invalid || todoForm.pristine">
-      <i class="fas fa-check"></i> Submit</button>
+      <fa-icon icon="check"></fa-icon> Submit</button>
   </form>
 </div>
diff --git a/src/angular/src/app/todo/todo.component.html b/src/angular/src/app/todo/todo.component.html
@@ -20,7 +20,7 @@ <h5>Add a Todo : </h5>
           <small id="descriptionHelp" class="form-text text-muted">This is the new style of Music.</small>
         </div>
         <button type="submit" class="btn btn-primary">
-          <i class="fas fa-check"></i> Submit</button>
+          <fa-icon icon="check"></fa-icon> Submit</button>
       </form>
       <hr>
       <app-counter></app-counter>
diff --git a/src/angular/src/app/todo/todo.module.ts b/src/angular/src/app/todo/todo.module.ts
@@ -1,3 +1,4 @@
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { TodosComponent } from './todos/todos.component';
@@ -17,7 +18,8 @@ import { RouterModule } from '@angular/router';
     FormsModule,
     ReactiveFormsModule,
     CompModule,
-    RouterModule
+    RouterModule,
+    FontAwesomeModule
   ],
   declarations: [
     TodosComponent,
diff --git a/src/angular/src/app/todo/todos/todos.component.html b/src/angular/src/app/todo/todos/todos.component.html
diff --git a/src/angular/src/assets/vendor.scss b/src/angular/src/assets/vendor.scss
diff --git a/src/angular/src/polyfills.ts b/src/angular/src/polyfills.ts
diff --git a/src/angular/src/tsconfig.app.json b/src/angular/src/tsconfig.app.json
diff --git a/src/angular/src/tsconfig.spec.json b/src/angular/src/tsconfig.spec.json
diff --git a/src/angular/tsconfig.json b/src/angular/tsconfig.json
diff --git a/src/angular/tslint.json b/src/angular/tslint.json
