migrate to Angular 6

.angular-cli.json

-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "project": {
-    "name": "oser-app"
-  },
-  "apps": [
-    {
-      "root": "src",
-      "outDir": "dist",
-      "assets": [
-        "assets",
-        "favicon.ico"
-      ],
-      "index": "index.html",
-      "main": "main.ts",
-      "polyfills": "polyfills.ts",
-      "test": "test.ts",
-      "tsconfig": "tsconfig.app.json",
-      "testTsconfig": "tsconfig.spec.json",
-      "prefix": "app",
-      "styles": [
-        "sass/styles.scss",
-        "../node_modules/ng2-emoji/css/ng2-emoji.css"
-      ],
-      "scripts": [
-        "../node_modules/marked/lib/marked.js"
-      ],
-      "environmentSource": "environments/environment.ts",
-      "environments": {
-        "dev": "environments/environment.ts",
-        "local": "environments/environment.local.ts",
-        "prod": "environments/environment.prod.ts"
-      }
-    }
-  ],
-  "e2e": {
-    "protractor": {
-      "config": "./protractor.conf.js"
-    }
-  },
-  "lint": [
-    {
-      "project": "src/tsconfig.app.json"
-    },
-    {
-      "project": "src/tsconfig.spec.json"
-    },
-    {
-      "project": "e2e/tsconfig.e2e.json"
-    }
-  ],
-  "test": {
-    "karma": {
-      "config": "./karma.conf.js"
-    }
-  },
-  "defaults": {
-    "styleExt": "scss",
-    "component": {
-    }
-  }
-}

README.md

@@ -22,10 +22,16 @@ oser-frontend $ npm install -g @angular/cli
 oser-frontend $ npm install
 ```
 
-- Lancez le serveur de développement.
+- Lancez le serveur de développement (`-o` ouvrira l'application à la fin du build).
 
 ```
-oser-app $ ng serve -o
+oser-frontend $ ng serve -o
+```
+
+La commande ci-dessous liera le front à l'API de développement (déployée sur https://oser-backend-dev.herokuapp.com). Pour utiliser un backend local (qui tourne sur votre machine), spécifiez la configuration avec `-c local`:
+
+```
+oser-frontend $ ng serve -o -c local
 ```
 
 ## En cas d'erreur…
@@ -48,4 +54,4 @@ Ainsi, un push sur la branche `master` déclenche un déploiement de l'applicati
 
 Si une erreur survient lors du déploiement, la nouvelle version n'est pas mise en prod (ouf !) et un email est envoyé à l'adresse mail du secteur Geek.
 
-Les applications sont accessibles à leur adresse au format suivant : `www.<NOM_APP>.herokuapp.com`.
+Les applications sont accessibles à leur adresse au format suivant : `<NOM_APP>.herokuapp.com`.

angular.json

+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "oser-app": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "prefix": "app",
+      "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/favicon.ico"
+            ],
+            "styles": [
+              "src/sass/styles.scss",
+              "node_modules/ng2-emoji/css/ng2-emoji.css"
+            ],
+            "scripts": [
+              "node_modules/marked/lib/marked.js"
+            ]
+          },
+          "configurations": {
+            "local": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.local.ts"
+                }
+              ]
+            },
+            "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": "oser-app:build"
+          },
+          "configurations": {
+            "local": {
+              "browserTarget": "oser-app:build:local"
+            },
+            "production": {
+              "browserTarget": "oser-app:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "oser-app: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": [
+              "node_modules/marked/lib/marked.js"
+            ],
+            "styles": [
+              "src/sass/styles.scss",
+              "node_modules/ng2-emoji/css/ng2-emoji.css"
+            ],
+            "assets": [
+              "src/assets",
+              "src/favicon.ico"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": []
+          }
+        }
+      }
+    },
+  },
+  "defaultProject": "oser-app",
+  "schematics": {
+    "@schematics/angular:component": {
+      "styleext": "scss"
+    }
+  }
+}

karma.conf.js

@@ -4,33 +4,31 @@
 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
     },
     files: [
-      { pattern: './src/test.ts', watched: false }
+      
     ],
     preprocessors: {
-      './src/test.ts': ['@angular/cli']
+      
     },
     mime: {
       'text/x-typescript': ['ts','tsx']
     },
     coverageIstanbulReporter: {
-      reports: [ 'html', 'lcovonly' ],
+      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
       fixWebpackSourcePaths: true
     },
-    angularCli: {
-      environment: 'dev'
-    },
+    
     reporters: config.angularCli && config.angularCli.codeCoverage
               ? ['progress', 'coverage-istanbul']
               : ['progress', 'kjhtml'],

package.json

@@ -9,35 +9,35 @@
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
-    "heroku-postbuild": "ng build --env=${ENVIRONMENT:-prod}"
+    "heroku-postbuild": "ng build -c ${ENVIRONMENT:-prod}"
   },
   "private": true,
   "dependencies": {
-    "@agm/core": "^1.0.0-beta.2",
-    "@angular/animations": "^5.2.9",
-    "@angular/cli": "1.7.3",
-    "@angular/common": "^5.0.0",
-    "@angular/compiler": "^5.0.0",
-    "@angular/compiler-cli": "^5.0.0",
-    "@angular/core": "^5.0.0",
-    "@angular/forms": "^5.0.0",
-    "@angular/http": "^5.0.0",
-    "@angular/platform-browser": "^5.0.0",
-    "@angular/platform-browser-dynamic": "^5.0.0",
-    "@angular/router": "^5.0.0",
+    "@agm/core": "^1.0.0-beta.3",
+    "@angular/animations": "6.0.4",
+    "@angular/cli": "6.0.8",
+    "@angular/common": "6.0.4",
+    "@angular/compiler": "6.0.4",
+    "@angular/compiler-cli": "6.0.4",
+    "@angular/core": "6.0.4",
+    "@angular/forms": "6.0.4",
+    "@angular/http": "6.0.4",
+    "@angular/platform-browser": "6.0.4",
+    "@angular/platform-browser-dynamic": "6.0.4",
+    "@angular/router": "6.0.4",
     "autoprefixer": "^8.5.0",
-    "core-js": "^2.4.1",
+    "core-js": "^2.5.7",
     "express": "^4.16.3",
     "fuse.js": "^3.2.0",
     "jump.js": "^1.0.2",
     "ng2-emoji": "^0.2.0",
-    "ngx-markdown": "^1.5.0",
+    "ngx-markdown": "^6.0.1",
     "ngx-moment": "^2.0.0",
     "remove-markdown": "^0.2.2",
-    "rxjs": "^5.1.0",
-    "typescript": "^2.6.2 <2.7.0",
+    "rxjs": "^6.2.0",
+    "typescript": "2.7.2",
     "web-animations-js": "^2.3.1",
-    "zone.js": "^0.8.4"
+    "zone.js": "^0.8.26"
   },
   "devDependencies": {
     "@types/jasmine": "2.5.38",
@@ -54,10 +54,11 @@
     "karma-jasmine-html-reporter": "^0.2.2",
     "protractor": "~5.1.0",
     "ts-node": "~2.0.0",
-    "tslint": "~4.5.0"
+    "tslint": "~4.5.0",
+    "@angular-devkit/build-angular": "~0.6.8"
   },
   "engines": {
     "node": "9.5.0",
-    "npm": "5.6.0"
+    "npm": "6.1.0"
   }
 }

src/app/app.component.ts

 import { Component, OnInit } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
-import 'rxjs/add/operator/filter';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/mergeMap';
+import { filter, map, mergeMap } from 'rxjs/operators';
 
 @Component({
   selector: 'app-root',
@@ -26,20 +24,20 @@ export class AppComponent implements OnInit {
     // Each time we navigate to a new route, update the page
     // title based on the route's data.title value.
     // Source: https://toddmotto.com/dynamic-page-titles-angular-2-router-events
-    this.router.events
+    this.router.events.pipe(
       // React to NavigationEnd events only
-      .filter(event => event instanceof NavigationEnd)
+      filter(event => event instanceof NavigationEnd),
       // Get the activated route object instead of the actual event
-      .map(() => this.activatedRoute)
+      map(() => this.activatedRoute),
       // Traverse the child route path to get the last activated route
-      .map(route => {
+      map(route => {
         while (route.firstChild) route = route.firstChild;
         return route;
-      })
+      }),
       // Retrieve the route's data object
-      .filter(route => route.outlet == 'primary')
-      .mergeMap(route => route.data)
-      .subscribe(
+      filter(route => route.outlet == 'primary'),
+      mergeMap(route => route.data),
+    ).subscribe(
         data => this.titleService.setTitle('OSER' + (data['title'] ? ' | ' + data['title'] : ''))
       );
   }

src/app/core/auth/auth.service.ts

 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Router } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { tap, map } from 'rxjs/operators';
 import { environment } from 'environments/environment';
 import { User } from './models';

src/app/core/auth/token.interceptor.ts

 import { Injectable } from '@angular/core';
 import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse } from '@angular/common/http';
 import { Location } from '@angular/common';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
+import { tap } from 'rxjs/operators';
 import { AuthService } from './auth.service';
 import { ErrorService } from '../error.service';
 
@@ -16,9 +17,11 @@ export class TokenInterceptor implements HttpInterceptor {
 
   intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
     request = this.attachToken(request);
-    return next.handle(request).do(
+    return next.handle(request).pipe(
+      tap(
         (event: HttpEvent<any>) => { },
         (error: any) => this.onError(error),
+      ),
     );
   }
 

src/app/core/document.service.ts

 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs/Observable';
+import { Observable, of } from 'rxjs';
 import { map, tap, catchError } from 'rxjs/operators';
 import { environment } from 'environments/environment';
 import { ActivatedRouteSnapshot, RouterStateSnapshot, Resolve } from '@angular/router';
@@ -43,7 +43,7 @@ export abstract class DocumentResolver implements Resolve<string> {
 
   resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<string> {
     return this.service.get(this.slug, this.opts).pipe(
-      catchError(e => Observable.of(null))
+      catchError(e => of(null))
     );
   }
 }

src/app/core/geocoding.service.ts

 import { Injectable } from '@angular/core';
 import { MapsAPILoader } from '@agm/core';
 import { Resolve } from '@angular/router';
-import { Observable, BehaviorSubject } from 'rxjs';
+import { Observable, BehaviorSubject, from } from 'rxjs';
 import { filter, map, mergeMap } from 'rxjs/operators';
 
 declare const google: any;
@@ -41,7 +41,7 @@ export class MapsAPIResolver implements Resolve<Geocoder> {
   constructor(private loader: MapsAPILoader) { }
 
   resolve(): Observable<Geocoder> {
-    return Observable.fromPromise(this.loader.load()).pipe(
+    return from(this.loader.load()).pipe(
       map(() => new google.maps.Geocoder())
     );
   }

src/app/core/links/link.service.ts

 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { tap, map } from 'rxjs/operators';
 import { HttpClient } from '@angular/common/http';
 import { environment } from '@environments/environment';

src/app/core/messages/message.service.ts

 import { Injectable } from '@angular/core';
 import { Router, NavigationStart } from '@angular/router';
-import { Observable } from 'rxjs';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { Observable, BehaviorSubject } from 'rxjs';
 import { MessageType, Message } from './message.model';
 
 @Injectable()

src/app/core/resolvers/generic.ts

 import { Injectable } from '@angular/core';
 import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
-import { Observable } from 'rxjs';
+import { Observable, of } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 
 interface Listable<T> {
@@ -23,7 +23,7 @@ export abstract class ObjectListResolver<T> implements Resolve<T[]> {
 
   resolve(): Observable<T[]> {
     return this.service.list().pipe(
-      catchError(e => Observable.of(null))
+      catchError(e => of(null))
     );
   }
 }
@@ -40,7 +40,7 @@ export abstract class ObjectResolver<T> implements Resolve<T> {
   resolve(route: ActivatedRouteSnapshot): Observable<T> {
     const id: any = route.paramMap.get(this.lookupKey);
     return this.service.retrieve(id).pipe(
-      catchError(e => Observable.of(null))
+      catchError(e => of(null))
     );
   }
 }

src/app/core/resolvers/simple.resolver.ts

 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
-import { HttpClient } from '@angular/common/http';
+import { Observable, of } from 'rxjs';
 import { map, tap, catchError } from 'rxjs/operators';
+import { HttpClient } from '@angular/common/http';
 import { Resolve } from '@angular/router';
 import { environment } from 'environments/environment';
 
@@ -20,7 +20,7 @@ export abstract class SimpleListResolver<T> implements Resolve<T[]> {
     return this.http.get<T[]>(this.url).pipe(
       map((items: any[]) => items.map(this.adapt)),
       tap(resp => console.log('fetched ' + this.name)),
-      catchError(e => Observable.of(null)),
+      catchError(e => of(null)),
     );
   }
 }

src/app/showcase-site/carousel/carousel.component.ts

@@ -3,13 +3,12 @@
 import {
   Component, OnInit, OnDestroy, Input, AfterViewInit, AfterContentInit,
   ContentChildren, ViewChildren, ViewChild, QueryList, ElementRef,
-  AnimationPlayer,
 } from '@angular/core';
 import {
-  AnimationFactory, AnimationBuilder,
+  AnimationFactory, AnimationBuilder, AnimationPlayer,
   animate, style
 } from '@angular/animations';
-import { Observable } from 'rxjs/Rx';
+import { Observable, interval, timer } from 'rxjs';
 import { CarouselDirective, CarouselItemElement } from './carousel.directive';
 
 @Component({
@@ -45,7 +44,7 @@ export class CarouselComponent implements OnInit, AfterViewInit, AfterContentIni
   }
   ngAfterContentInit() {
     // Go to the next element
-    this.slideSub = Observable.interval(this.interval).subscribe(_ => {
+    this.slideSub = interval(this.interval).subscribe(_ => {
       if (this.paused) return;
       this.next();
     });
@@ -73,7 +72,7 @@ export class CarouselComponent implements OnInit, AfterViewInit, AfterContentIni
       this.pausedSub.unsubscribe();
     }
     // Turn on automatic sliding back after an interval
-    this.pausedSub = Observable.timer(this.interval).subscribe(
+    this.pausedSub = timer(this.interval).subscribe(
       _ => this.paused = false
     );
     this.goTo(index);

src/app/showcase-site/news-page/news-page.component.ts

 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { Subject } from 'rxjs/Subject';
+import { Subject } from 'rxjs';
 import { Article, ArticleService } from '../shared';
 import { FuzzyPipe } from 'app/core';
 

src/app/showcase-site/shared/action.service.ts

 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
 import { map, tap, filter } from 'rxjs/operators';
 import { Action } from './action.model';

src/app/showcase-site/shared/article.service.ts

 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 import { Article } from './article.model';
 import { environment } from 'environments/environment';

src/app/signup-page/signup-page.component.ts

 import { Component, OnInit } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { StudentService } from './student.service';
 
 @Component({