Merge branch '100-mettre-a-jour-proprement-vers-angular-7' into 'master'

Resolve "Mettre à jour proprement vers Angular 7"

Closes #100, #102, #98, and #96

See merge request !30

.angular-cli.json

-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "project": {
-    "name": "ngHyd"
-  },
-  "apps": [
-    {
-      "root": "src",
-      "outDir": "dist",
-      "assets": [
-        "assets",
-        "favicon.ico",
-        "**/*.json",
-        "**/*.md",
-        "**/*.png"
-      ],
-      "index": "index.html",
-      "main": "main.ts",
-      "polyfills": "polyfills.ts",
-      "test": "test.ts",
-      "tsconfig": "tsconfig.app.json",
-      "testTsconfig": "tsconfig.spec.json",
-      "prefix": "app",
-      "styles": [
-        "../node_modules/font-awesome/scss/font-awesome.scss",
-        "../node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
-        "../node_modules/angular-bootstrap-md/scss/mdb-free.scss",
-        "./styles.scss"
-      ],
-      "scripts": [],
-      "environmentSource": "environments/environment.ts",
-      "environments": {
-        "dev": "environments/environment.ts",
-        "prod": "environments/environment.prod.ts"
-      }
-    }
-  ],
-  "e2e": {
-    "protractor": {
-      "config": "./protractor.conf.js"
-    }
-  },
-  "lint": [
-    {
-      "project": "src/tsconfig.app.json",
-      "exclude": "**/node_modules/**"
-    },
-    {
-      "project": "src/tsconfig.spec.json",
-      "exclude": "**/node_modules/**"
-    },
-    {
-      "project": "e2e/tsconfig.e2e.json",
-      "exclude": "**/node_modules/**"
-    }
-  ],
-  "test": {
-    "karma": {
-      "config": "./karma.conf.js"
-    }
-  },
-  "defaults": {
-    "styleExt": "scss",
-    "component": {}
-  }
-}
\ No newline at end of file

.gitignore

@@ -5,6 +5,7 @@
 /tmp
 /out-tsc
 /src/assets/docs-*
+/compodoc-fr
 
 # dependencies
 /node_modules

angular.json

+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "ngHyd": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "assets": [
+              "src/assets",
+              "src/locale",
+              "src/favicon.ico",
+              { "glob": "**/*.json", "input": "src/", "output": "/" },
+              { "glob": "**/*.md", "input": "src/", "output": "/" },
+              { "glob": "**/*.png", "input": "src/", "output": "/" }
+            ],
+            "styles": [
+              "node_modules/font-awesome/scss/font-awesome.scss",
+              "node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
+              "node_modules/angular-bootstrap-md/scss/mdb-free.scss",
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "ngHyd:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "ngHyd:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "ngHyd:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "karmaConfig": "./karma.conf.js",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "scripts": [],
+            "styles": [
+              "node_modules/font-awesome/scss/font-awesome.scss",
+              "node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
+              "node_modules/angular-bootstrap-md/scss/mdb-free.scss",
+              "src/styles.scss"
+            ],
+            "assets": [
+              "src/assets",
+              "src/favicon.ico",
+              "src/**/*.json",
+              "src/**/*.md",
+              "src/**/*.png"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    },
+    "ngHyd-e2e": {
+      "root": "e2e",
+      "sourceRoot": "e2e",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "./protractor.conf.js",
+            "devServerTarget": "ngHyd:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "e2e/tsconfig.e2e.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "ngHyd",
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "styleext": "scss"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  }
+}
\ No newline at end of file

karma.conf.js

@@ -4,24 +4,22 @@
 module.exports = function (config) {
   config.set({
     basePath: '',
-    frameworks: ['jasmine', '@angular/cli'],
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
-      require('@angular/cli/plugins/karma')
+      require('@angular-devkit/build-angular/plugins/karma')
     ],
     client:{
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
-      reports: [ 'html', 'lcovonly' ],
+      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
       fixWebpackSourcePaths: true
     },
-    angularCli: {
-      environment: 'dev'
-    },
+    
     reporters: ['progress', 'kjhtml'],
     port: 9876,
     colors: true,

package.json

@@ -6,58 +6,65 @@
     "ng": "ng",
     "start": "npm run preprocess; ng serve --host 0.0.0.0",
     "prod": "npm run preprocess; ng serve --host 0.0.0.0 --prod",
-    "build": "npm run preprocess; ng build",
+    "build": "npm run preprocess; ng build --prod --build-optimizer=false",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
     "jalhyd": "rm -rf node_modules/jalhyd; cd ../jalhyd; npm run package; cd ../nghyd; npm install ../jalhyd/jalhyd-1.0.0.tgz;",
     "mathjax": "rsync -az --delete node_modules/mathjax src/assets;",
     "mkdocs": "python3 -m mkdocs build",
-    "preprocess": "node preprocessors.js; npm run mathjax; npm run mkdocs;"
+    "preprocess": "node preprocessors.js; npm run mathjax; npm run mkdocs;",
+    "compodoc-patch": "sed -i '/Application.prototype.detectAngularJSProjects = function () {/a return false; // patch cracra, voir https://github.com/compodoc/compodoc/issues/667' node_modules/@compodoc/compodoc/dist/index-cli.js",
+    "compodoc": "nodejs node_modules/@compodoc/compodoc/bin/index-cli.js -p src/tsconfig.app.json -s --language fr-FR -d compodoc-fr"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^5.2.11",
-    "@angular/common": "^5.2.11",
-    "@angular/compiler": "^5.2.11",
-    "@angular/core": "^5.2.11",
-    "@angular/forms": "^5.2.11",
-    "@angular/http": "^5.2.11",
-    "@angular/platform-browser": "^5.2.11",
-    "@angular/platform-browser-dynamic": "^5.2.11",
-    "@angular/router": "^5.2.11",
-    "angular-bootstrap-md": "~6.0.0",
-    "angular2-chartjs": "^0.4.1",
-    "core-js": "^2.5.7",
-    "file-saver": "^1.3.8",
+    "@angular/animations": "^7.1.4",
+    "@angular/common": "^7.1.4",
+    "@angular/compiler": "^7.1.4",
+    "@angular/core": "^7.1.4",
+    "@angular/forms": "^7.1.4",
+    "@angular/http": "^7.1.4",
+    "@angular/platform-browser": "^7.1.4",
+    "@angular/platform-browser-dynamic": "^7.1.4",
+    "@angular/router": "^7.1.4",
+    "angular-bootstrap-md": "^7.2.0",
+    "angular2-chartjs": "^0.5.1",
+    "core-js": "^2.6.1",
+    "file-saver": "^2.0.0",
     "font-awesome": "^4.7.0",
-    "he": "^1.1.1",
+    "he": "^1.2.0",
     "jalhyd": "file:../jalhyd/jalhyd-1.0.0.tgz",
-    "mathjax": "^2.7.4",
-    "ngx-md": "^3.1.1",
-    "rxjs": "^5.5.11",
+    "mathjax": "^2.7.5",
+    "ngx-md": "^7.0.0",
+    "rxjs": "^6.3.3",
+    "rxjs-compat": "^6.3.3",
+    "tslib": "^1.9.0",
     "zone.js": "^0.8.26"
   },
   "devDependencies": {
-    "@angular/cli": "1.7.4",
-    "@angular/compiler-cli": "~5.2.0",
-    "@angular/language-service": "^5.0.0",
-    "@types/file-saver": "^1.3.0",
-    "@types/jasmine": "~2.5.53",
-    "@types/jasminewd2": "~2.0.2",
-    "@types/node": "~6.0.60",
-    "codelyzer": "^4.0.1",
-    "jasmine-core": "~2.6.2",
-    "jasmine-spec-reporter": "~4.1.0",
-    "karma": "~1.7.0",
-    "karma-chrome-launcher": "~2.1.1",
-    "karma-cli": "~1.0.1",
-    "karma-coverage-istanbul-reporter": "^1.2.1",
-    "karma-jasmine": "~1.1.0",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.1.2",
-    "ts-node": "~3.2.0",
-    "tslint": "~5.7.0",
-    "typescript": "~2.6.0"
+    "@angular-devkit/build-angular": "~0.11.4",
+    "@angular/cli": "^7.1.4",
+    "@angular/compiler-cli": "^7.1.4",
+    "@angular/language-service": "^7.1.4",
+    "@compodoc/compodoc": "^1.1.7",
+    "@types/file-saver": "^2.0.0",
+    "@types/jasmine": "~3.3.5",
+    "@types/jasminewd2": "^2.0.6",
+    "@types/node": "^8.10.39",
+    "codelyzer": "^4.5.0",
+    "jasmine-core": "~3.3.0",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "^3.1.4",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-cli": "~2.0.0",
+    "karma-coverage-istanbul-reporter": "^2.0.4",
+    "karma-jasmine": "^2.0.1",
+    "karma-jasmine-html-reporter": "^1.4.0",
+    "protractor": "^5.4.2",
+    "ts-node": "~7.0.1",
+    "tslint": "~5.12.0",
+    "typescript": "~3.1.1",
+    "webpack-dev-server": "^3.1.14"
   }
 }

src/app/app.component.html

@@ -17,8 +17,8 @@
     <!-- Collapsible content -->
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
       <ul class="navbar-nav mr-auto">
-        <li class="nav-item" *ngFor="let c of _calculators">
-          <a class="nav-link waves-light {{getHighlightClass(c.uid)}}" mdbRippleRadius [routerLink]="['/calculator/',c.uid]">{{c.title}}</a>
+        <li class="nav-item" *ngFor="let c of calculators">
+          <a class="nav-link waves-light {{getHighlightClass(c.uid)}}" mdbRippleRadius [routerLink]="['/calculator/',c.uid]">{{ c.title }}</a>
         </li>
         <li class="nav-item">
             <i class="fa fa-plus-square fa-2x fa-inverse" style='vertical-align: middle' (click)='newCalc()'></i>
@@ -36,14 +36,14 @@
       <div id="mySidenav" class="sidenav">
         <!-- ATTENTION ! pas de href="#" sous peine de rechargement de la page et réinitialisation de l'appli -->
         <a class="closebtn" (click)="closeNav()">×</a>
-        <a (click)="newCalc()">{{uitextSidenavNewCalc}}</a>
-        <a (click)="loadSession()">{{uitextSidenavLoadSession}}</a>
-        <a (click)="params()">{{uitextSidenavParams}}</a>
+        <a (click)="newCalc()">{{ uitextSidenavNewCalc }}</a>
+        <a (click)="loadSession()">{{ uitextSidenavLoadSession }}</a>
+        <a (click)="params()">{{ uitextSidenavParams }}</a>
         <a target="_blank" href="assets/docs-fr/">Aide</a>
         <div class="hyd_fillvertical"></div>
         <div class="hyd_version">
-          JaLHyd version: {{getDateRevision()[0]}}<br/>
-          ngHyd version: {{getDateRevision()[1]}}
+          JaLHyd version: {{ getDateRevision()[0] }}<br/>
+          ngHyd version: {{ getDateRevision()[1] }}
         </div>
       </div>
     </div>

src/app/app.component.ts

@@ -5,7 +5,7 @@ import { Router, ActivatedRoute } from "@angular/router";
 import { Observer, jalhydDateRev } from "jalhyd";
 
 import { environment } from "../environments/environment";
-import { InternationalisationService, Language, LanguageCode } from "./services/internationalisation/internationalisation.service";
+import { InternationalisationService } from "./services/internationalisation/internationalisation.service";
 import { ErrorService } from "./services/error/error.service";
 // import { AlertDialog } from './components/alert-dialog/alert-dialog.component';
 import { FormulaireService } from "./services/formulaire/formulaire.service";
@@ -24,7 +24,8 @@ import { nghydDateRev } from "../date_revision";
 @Component({
   selector: "nghyd-app",
   templateUrl: "./app.component.html",
-  styleUrls: ["./app.component.scss"]
+  styleUrls: ["./app.component.scss"],
+  providers: [ErrorService]
 })
 export class AppComponent implements OnInit, OnDestroy, Observer {
   private _displayErrorDialog = false;
@@ -53,7 +54,8 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
    */
   private _routerCurrentComponent: Component;
 
-  constructor(private intlService: InternationalisationService,
+  constructor(
+    private intlService: InternationalisationService,
     private paramService: ParamService,
     private appSetupService: ApplicationSetupService,
     private appRef: ApplicationRef,
@@ -61,8 +63,7 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
     private router: Router,
     private route: ActivatedRoute,
     private formulaireService: FormulaireService,
-    private httpService: HttpService,
-
+    private httpService: HttpService
   ) {
     ServiceFactory.instance.applicationSetupService = appSetupService;
     ServiceFactory.instance.paramService = paramService;
@@ -89,18 +90,22 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
     this.formulaireService.removeObserver(this);
   }
 
-  private get uitextSidenavNewCalc() {
+  public get uitextSidenavNewCalc() {
     return this.intlService.localizeText("INFO_MENU_NOUVELLE_CALC");
   }
 
-  private get uitextSidenavParams() {
+  public get uitextSidenavParams() {
     return this.intlService.localizeText("INFO_SETUP_TITLE");
   }
 
-  private get uitextSidenavLoadSession() {
+  public get uitextSidenavLoadSession() {
     return "Charger une session";
   }
 
+  public get calculators() {
+    return this._calculators;
+  }
+
   /**
    * abonnement au service d'erreurs
    */
@@ -185,7 +190,7 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
 
   private getCalculatorIndexFromId(formId: number) {
     const index = this._calculators.reduce((resultIndex, calc, currIndex) => {
-      if (resultIndex === -1 && calc["uid"] === formId) {
+      if (resultIndex === -1 && +calc["uid"] === formId) {
         resultIndex = currIndex;
       }
       return resultIndex;
@@ -220,7 +225,7 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
 
     // passage de la liste, récupération d'une Promise pour traiter le résultat
     const prom: Promise<any[]> = compRef.instance.run(list);
-    prom.then(list => {
+    prom.then(innerList => {
       let name = compRef.instance.filename;
 
       // ajout extension ".json"
@@ -230,8 +235,8 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
         name = name + ".json";
       }
 
-      this.saveSession(list, name);
-    });
+      this.saveSession(innerList, name);
+    }).catch(err => { });
   }
 
   private saveSession(calcList: any[], filename) {
@@ -301,7 +306,7 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
   /**
    * récupération du composant affiché par le routeur
    */
-  private onRouterOutletActivated(a) {
+  public onRouterOutletActivated(a) {
     this._routerCurrentComponent = a;
   }
 
@@ -311,27 +316,27 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
 
   // flag d'affichage des repères des colonnes Bootstrap : uniquement en mode dev
   // cf. src/environments/*, ng build --env=<mode> (par ex : ng build --env=prod)
-  private get ruler(): boolean {
+  public get ruler(): boolean {
     // return !environment.production;
     return false;
   }
 
   // sidenav
 
-  private openNav() {
+  public openNav() {
     document.getElementById("mySidenav").style.width = "300px";
   }
 
-  private closeNav() {
+  public closeNav() {
     document.getElementById("mySidenav").style.width = "0";
   }
 
-  private newCalc() {
+  public newCalc() {
     this.closeNav();
     this.toList();
   }
 
-  private loadSession() {
+  public loadSession() {
     this.closeNav();
 
     // création du dialogue de sélection des formulaires à sauver
@@ -341,15 +346,15 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
     prom.then(list => {
       this.formulaireService.loadSession(compRef.instance.selectedFile, compRef.instance.calculators);
       compRef.destroy();
-    });
+    }).catch(err => { });
   }
 
-  private params() {
+  public params() {
     this.closeNav();
     this.router.navigate(["/setup"]);
   }
 
-  private getDateRevision(): string[] {
+  public getDateRevision(): string[] {
     const dr: string[] = [jalhydDateRev, nghydDateRev];
     return dr;
   }

src/app/app.module.ts

@@ -2,12 +2,12 @@ import { BrowserModule } from "@angular/platform-browser";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
 import { MDBBootstrapModule } from "angular-bootstrap-md";
-import { HttpModule } from "@angular/http";
+import { HttpClientModule } from "@angular/common/http";
 import { FormsModule } from "@angular/forms"; // <-- NgModel lives here
 // import { MdInputModule, MdDialogModule } from '@angular/material';
 import { ChartModule } from "angular2-chartjs";
 import { RouterModule, Routes } from "@angular/router";
-import { MarkdownModule } from "ngx-md";
+import { NgxMdModule } from "ngx-md";
 
 import { FormulaireService } from "./services/formulaire/formulaire.service";
 import { ParamService } from "./services/param/param.service";
@@ -26,8 +26,6 @@ import { ParamValuesComponent } from "./components/param-values/param-values.com
 import { ValueListComponent } from "./components/param-values/value-list.component";
 import { SelectFieldLineComponent } from "./components/select-field-line/select-field-line.component";
 import { CheckFieldLineComponent } from "./components/check-field-line/check-field-line.component";
-// import { AlertDialog } from './components/alert-dialog/alert-dialog.component';
-import { AppErrorModule } from "./error.module";
 import { CalculatorResultsComponent } from "./components/calculator-results/calculator-results.component";
 import { FixedVarResultsComponent } from "./components/fixedvar-results/fixedvar-results.component";
 import { SectionResultsComponent } from "./components/section-results/section-results.component";
@@ -69,15 +67,14 @@ const appRoutes: Routes = [
       { enableTracing: false }
     ),
     BrowserModule,
-    MarkdownModule.forRoot(),
+    NgxMdModule.forRoot(),
     BrowserAnimationsModule,
     MDBBootstrapModule.forRoot(),
     FormsModule, // <-- import the FormsModule before binding with [(ngModel)]
-    HttpModule,
+    HttpClientModule,
     // MdInputModule,
     // MdDialogModule,
-    ChartModule,
-    AppErrorModule
+    ChartModule
   ],
   declarations: [ // composants, pipes et directives
     AppComponent,

src/app/components/app-setup/app-setup.component.html

 <div class="container-fluid">
     <div class="row">
         <div class="col-4 mx-auto">
-            <h1>{{uitextTitle}}</h1>
+            <h1>{{ uitextTitle }}</h1>
             <br/>
         </div>
     </div>
@@ -9,7 +9,7 @@
     <!-- précision d'affichage -->
     <div class="row">
         <div class="col-4 mx-auto">
-            <base-param-input #displayAccurary title="{{uitextDisplayAccuracy}}"></base-param-input>
+            <base-param-input #displayAccuracy title="{{uitextDisplayAccuracy}}"></base-param-input>
         </div>
     </div>
 
@@ -33,12 +33,12 @@
         <div class="col-4 mx-auto">
             <div class="btn-group" dropdown>
                 <button dropdownToggle mdbRippleRadius type="button" class="btn btn-primary dropdown-toggle">
-                    Language ({{currentLanguageLabel}})
+                    Language ({{ currentLanguageLabel }})
                     <span class="caret"></span>
                 </button>
                 <ul *dropdownMenu class="dropdown-menu" role="menu">
                     <li role="menuitem" *ngFor="let l of intlService.languages">
-                        <a class="dropdown-item" (click)="selectLang(l.code)">{{l.label}}</a>
+                        <a class="dropdown-item" (click)="selectLang(l.code)">{{ l.label }}</a>
                     </li>
                 </ul>
             </div>

src/app/components/app-setup/app-setup.component.ts

-import { Component, ViewChild } from "@angular/core";
+import { Component, ViewChild, OnInit } from "@angular/core";
 
-import { BaseParam, ParamDomainValue, Observer } from "jalhyd";
+import { ParamDomainValue, Observer } from "jalhyd";
 
-import { ApplicationSetupService } from '../../services/app-setup/app-setup.service';
-import { InternationalisationService, Language, LanguageCode } from '../../services/internationalisation/internationalisation.service';
+import { ApplicationSetupService } from "../../services/app-setup/app-setup.service";
+import { InternationalisationService, LanguageCode } from "../../services/internationalisation/internationalisation.service";
 import { NgBaseParam, BaseParamInputComponent } from "../base-param-input/base-param-input.component";
 import { BaseComponent } from "../base/base.component";
 
 @Component({
     selector: "setup",
-    templateUrl: "./app-setup.component.html",
+    templateUrl: "./app-setup.component.html"
 })
-export class ApplicationSetupComponent extends BaseComponent implements Observer {
+export class ApplicationSetupComponent extends BaseComponent implements Observer, OnInit {
     /**
      * précision d'affichage
      */
@@ -27,11 +27,11 @@ export class ApplicationSetupComponent extends BaseComponent implements Observer
      */
     private _newtonMaxIter: NgBaseParam;
 
-    @ViewChild("displayAccurary")
-    private _displayAccuraryComponent: BaseParamInputComponent;
+    @ViewChild("displayAccuracy")
+    private _displayAccuracyComponent: BaseParamInputComponent;
 
     @ViewChild("computeAccuracy")
-    private _computeAccuraryComponent: BaseParamInputComponent;
+    private _computeAccuracyComponent: BaseParamInputComponent;
 
     @ViewChild("newtonMaxIter")
     private _newtonMaxIterComponent: BaseParamInputComponent;
@@ -43,7 +43,7 @@ export class ApplicationSetupComponent extends BaseComponent implements Observer
         super();
     }
 
-    private get currentLanguageLabel(): string {
+    public get currentLanguageLabel(): string {
         return this.intlService.currentLanguage.label;
     }
 
@@ -51,19 +51,19 @@ export class ApplicationSetupComponent extends BaseComponent implements Observer
         this.intlService.setLocale(lc);
     }
 
-    private get uitextTitle(): string {
+    public get uitextTitle(): string {
         return this.intlService.localizeText("INFO_SETUP_TITLE");
     }
 
-    private get uitextDisplayAccuracy(): string {
+    public get uitextDisplayAccuracy(): string {
         return this.intlService.localizeText("INFO_SETUP_PRECISION_AFFICHAGE");
     }
 
-    private get uitextComputeAccuracy(): string {
+    public get uitextComputeAccuracy(): string {
         return this.intlService.localizeText("INFO_SETUP_PRECISION_CALCUL");
     }
 
-    private get uitextNewtonMaxIteration(): string {
+    public get uitextNewtonMaxIteration(): string {
         return this.intlService.localizeText("INFO_SETUP_NEWTON_MAX_ITER");
     }
 
@@ -71,12 +71,12 @@ export class ApplicationSetupComponent extends BaseComponent implements Observer
         // modèle du composant BaseParamInputComponent de précision d'affichage
         this._displayPrec = new NgBaseParam("dp", ParamDomainValue.POS, this.appSetupService.displayPrecision);
         this._displayPrec.addObserver(this);
-        this._displayAccuraryComponent.model = this._displayPrec;
+        this._displayAccuracyComponent.model = this._displayPrec;
 
         // modèle du composant BaseParamInputComponent de précision de calcul
         this._computePrec = new NgBaseParam("cp", ParamDomainValue.POS, this.appSetupService.computePrecision);
         this._computePrec.addObserver(this);
-        this._computeAccuraryComponent.model = this._computePrec;
+        this._computeAccuracyComponent.model = this._computePrec;
 
         // modèle du composant BaseParamInputComponent du max d'itérations pour Newton
         this._newtonMaxIter = new NgBaseParam("nmi", ParamDomainValue.POS, this.appSetupService.newtonMaxIter);
@@ -84,15 +84,11 @@ export class ApplicationSetupComponent extends BaseComponent implements Observer
         this._newtonMaxIterComponent.model = this._newtonMaxIter;
     }
 
-    /**
-     * appelé une fois, après l'affichage complet du composant
-     */
-    protected afterFirstViewChecked() {
+    ngOnInit() {
         this.init();
     }
 
     // interface Observer
-
     public update(sender: any, data: any): void {
         const p: NgBaseParam = sender;
         switch (p.symbol) {

src/app/components/base-param-input/base-param-input.component.ts

@@ -72,25 +72,24 @@ export class BaseParamInputComponent extends GenericInputComponent {
         this._tmp = v;
         try {
             this._paramDef.setValue(v);
-        }
-        catch (e) {
+        } catch (e) {
             // géré par validateModelValue()
         }
     }
 
     protected validateModelValue(v: any): { isValid: boolean, message: string } {
-        let msg = undefined;
+        let msg;
         let valid = false;
 
         try {
             this._paramDef.checkValue(v);
             valid = true;
-        }
-        catch (e) {
-            if (e instanceof Message)
+        } catch (e) {
+            if (e instanceof Message) {
                 msg = this.intlService.localizeMessage(e);
-            else
+            } else {
                 msg = "invalid value";
+            }
         }
 
         return { isValid: valid, message: msg };
@@ -101,14 +100,15 @@ export class BaseParamInputComponent extends GenericInputComponent {
     }
 
     protected validateUIValue(ui: string): { isValid: boolean, message: string } {
-        let valid: boolean = false;
-        let msg: string = undefined;
+        let valid = false;
+        let msg: string;
 
-        let v: NumericalString = new NumericalString(ui);
-        if (!v.isNumerical)
+        const v: NumericalString = new NumericalString(ui);
+        if (!v.isNumerical) {
             msg = "Veuillez entrer une valeur numérique";
-        else
+        } else {
             valid = true;
+        }
 
         return { isValid: valid, message: msg };
     }

src/app/components/base/base.component.ts

@@ -9,7 +9,7 @@ export abstract class BaseComponent implements AfterViewChecked, OnChanges {
     /**
      * true si on souhaite qu'un événement soit émis en même temps que l'appel à afterFirstViewChecked()
      */
-    protected emitFirstViewCheck: boolean = false;
+    protected emitFirstViewCheck = false;
 
     /**
      * événement émis en même temps que l'appel à afterFirstViewChecked()
@@ -27,8 +27,9 @@ export abstract class BaseComponent implements AfterViewChecked, OnChanges {
 
             this.afterFirstViewChecked();
 
-            if (this.emitFirstViewCheck)
+            if (this.emitFirstViewCheck) {
                 this.onFirstViewCheck.emit();
+            }
         }
     }
 
@@ -40,4 +41,4 @@ export abstract class BaseComponent implements AfterViewChecked, OnChanges {
      */
     protected afterFirstViewChecked() {
     }
-}
\ No newline at end of file
+}

src/app/components/calculator-list/calculator-list.component.html

 <div class="container-fluid">
     <div class="row">
         <div class="offset-1 col-10 mx-auto">
-            <ul *ngFor="let l of _items" class="list-group">
+            <ul *ngFor="let l of items" class="list-group">
                 <!-- on utilise [innerHTML] pour que les codes HTML comme &nbsp; soient interprétés correctement -->
                 <button class="list-group-item" (click)="create(l.type)" [innerHTML]="l.label"></button>
             </ul>

src/app/components/calculator-list/calculator-list.component.ts

@@ -16,8 +16,8 @@ class ListElement {
         this._label = ServiceFactory.instance.formulaireService.getLocalisedTitleFromCalculatorType(_type);
     }
 
-    public get label() { return this._label }
-    public get type() { return this._type }
+    public get label() { return this._label; }
+    public get type() { return this._type; }
 }
 
 @Component({
@@ -59,6 +59,10 @@ export class CalculatorListComponent implements OnInit {
         });
     }
 
+    public get items() {
+        return this._items;
+    }
+
     // interface Observer
 
     update(sender: any, data: any): void {

src/app/components/calculator-results/calculator-results.component.ts

@@ -42,8 +42,7 @@ export class CalculatorResultsComponent implements AfterViewChecked {
             this.fixedVarResultsComponent.results = undefined;
             this.sectionResultsComponent.results = undefined;
             this.remousResultsComponent.results = undefined;
-        }
-        else {
+        } else {
             this.fixedVarResultsComponent.results = f.results;
             this.sectionResultsComponent.results = f.results;
             this.remousResultsComponent.results = f.results;

src/app/components/canvas/canvas.component.ts

-import { Component, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+import { Component, Input, ViewChild, ElementRef, AfterViewInit } from "@angular/core";
 
 @Component({
-    selector: 'calc-canvas',
+    selector: "calc-canvas",
     template: `<canvas #canvas
-    [attr.width] = '_width'
-    [attr.height] = '_height'>
+    [attr.width]="width"
+    [attr.height]="height">
     </canvas>
     `
 })
 export class CalcCanvasComponent implements AfterViewInit {
-    private _width: number = 300;
-    private _height: number = 200;
+    private _width = 300;
+    private _height = 200;
 
     public get width(): number {
         return this._calcCanvas.nativeElement.width;
@@ -19,6 +19,7 @@ export class CalcCanvasComponent implements AfterViewInit {
     @Input()
     public set width(w: number) {
         this._width = w;
+        this._calcCanvas.nativeElement.width = w;
     }
 
     public get height(): number {
@@ -28,6 +29,7 @@ export class CalcCanvasComponent implements AfterViewInit {
     @Input()
     public set height(h: number) {
         this._height = h;
+        this._calcCanvas.nativeElement.height = h;
     }
 
     private _context2d: CanvasRenderingContext2D;
@@ -38,24 +40,25 @@ export class CalcCanvasComponent implements AfterViewInit {
     ngAfterViewInit() { // wait for the view to init before using the element
         this._context2d = this._calcCanvas.nativeElement.getContext("2d");
 
-        //this._context2d.fillStyle = 'blue';
+        // this._context2d.fillStyle = 'blue';
         // this._context2d.fillRect(10, 10, 350, 350);
 
         // this.drawRect(0, 0, this._width, this._height);
     }
 
     public clear() {
-        if (this._context2d != undefined)
+        if (this._context2d) {
             this._context2d.clearRect(0, 0, this.width, this.height);
+        }
     }
 
     public setStrokeColor(r: number, g: number, b: number) {
-        let col: string = "rgb(" + r + "," + g + "," + b + ")";
+        const col: string = "rgb(" + r + "," + g + "," + b + ")";
         this._context2d.strokeStyle = col;
     }
 
     public setFillColor(r: number, g: number, b: number) {
-        let col: string = "rgb(" + r + "," + g + "," + b + ")";
+        const col: string = "rgb(" + r + "," + g + "," + b + ")";
         this._context2d.fillStyle = col;
     }
 
@@ -63,9 +66,10 @@ export class CalcCanvasComponent implements AfterViewInit {
         this._context2d.font = f;
     }
 
-    public fillText(s: string, x: number, y: number, align: string = undefined) {
-        if (align != undefined)
+    public fillText(s: string, x: number, y: number, align?: any) {
+        if (align) {
             this._context2d.textAlign = align;
+        }
         this._context2d.fillText(s, x, y);
     }
 
@@ -93,7 +97,7 @@ export class CalcCanvasComponent implements AfterViewInit {
     }
 
     /**
-     * 
+     *
      * @param x The x axis of the coordinate for the ellipse's center.
      * @param y The y axis of the coordinate for the ellipse's center.
      * @param radiusX The ellipse's major-axis radius.

src/app/components/check-field-line/check-field-line.component.html

 <tr>
-    <td align="right">{{_check.label}}</td>
+    <td align="right">{{ check.label }}</td>
     <td colspan="3">
         <!--
         <input type="checkbox" >
         -->
-        <input type="checkbox" [(ngModel)]=_currentValue (ngModelChange)="onChange($event)">
+        <input type="checkbox" [(ngModel)]=currentValue (ngModelChange)="onChange($event)">
     </td>
 </tr>
\ No newline at end of file

src/app/components/check-field-line/check-field-line.component.ts

@@ -8,13 +8,13 @@ import { CheckField } from "../../formulaire/check-field";
 })
 export class CheckFieldLineComponent {
     @Input("param")
-    private _check: CheckField;
+    public check: CheckField;
 
-    private _currentValue: boolean;
+    public currentValue: boolean;
 
     constructor() { }
 
-    private onChange(event: any) {
-        this._check.setValue(event);
+    public onChange(event: any) {
+        this.check.setValue(event);
     }
 }

src/app/components/field-set/field-set.component.html

 <div class="row fieldset_backgrd">
     <div class="col fieldset_title">
-        {{title}}
+        {{ title }}
     </div>
-    <div *ngIf="_showButtons" class="col-sm-4 fa-stack fa-2x hyd-window-btns">
+    <div *ngIf="showButtons" class="col-sm-4 fa-stack fa-2x hyd-window-btns">
         <i class="fa fa-plus" (click)='onAddClick()'></i>
         <i class="fa fa-trash" [style.color]='removeButtonColor' (click)='onRemoveClick()'></i>
         <i class="fa fa-arrow-up" [style.color]='upButtonColor' (click)='onMoveUpClick()'></i>
@@ -24,7 +24,7 @@
     <param-field-line *ngIf="isInputField(p)" [param]=p (onRadio)=onRadioClick($event) (onValid)=onParamLineValid() (inputChange)=onInputChange()>
     </param-field-line>
 
-    <select-field-line *ngIf="isSelectField(p)" [param]=p>
+    <select-field-line *ngIf="isSelectField(p)" [_select]=p>
     </select-field-line>
 
     <check-field-line *ngIf="isCheckField(p)" [param]=p></check-field-line>