Upgrade to Angular 6.0, RxJS to 6.2, making changes to respect the new RxJS API

.angular-cli.json

-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "project": {
-    "name": "webapp"
-  },
-  "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": [
-        "styles.scss",
-        "../node_modules/leaflet/dist/leaflet.css",
-        "../node_modules/leaflet.markercluster/dist/MarkerCluster.css",
-        "../node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css"
-      ],
-      "scripts": [
-        "../node_modules/leaflet.markercluster/dist/leaflet.markercluster.js"
-      ],
-      "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": {}
-  }
-}

angular.json

+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "webapp": {
+      "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/favicon.ico"
+            ],
+            "styles": [
+              "src/styles.scss",
+              "node_modules/leaflet/dist/leaflet.css",
+              "node_modules/leaflet.markercluster/dist/MarkerCluster.css",
+              "node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css"
+            ],
+            "scripts": [
+              "node_modules/leaflet.markercluster/dist/leaflet.markercluster.js"
+            ]
+          },
+          "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": "webapp:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "webapp:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "webapp: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/leaflet.markercluster/dist/leaflet.markercluster.js"
+            ],
+            "styles": [
+              "src/styles.scss",
+              "node_modules/leaflet/dist/leaflet.css",
+              "node_modules/leaflet.markercluster/dist/MarkerCluster.css",
+              "node_modules/leaflet.markercluster/dist/MarkerCluster.Default.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": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    },
+    "webapp-e2e": {
+      "root": "",
+      "sourceRoot": "e2e",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "./protractor.conf.js",
+            "devServerTarget": "webapp:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "e2e/tsconfig.e2e.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "webapp",
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "styleext": "scss"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  }
+}
\ No newline at end of file

karma.conf.js

@@ -4,14 +4,14 @@
 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-htmlfile-reporter'),
       require('karma-coverage-istanbul-reporter'),
-      require('@angular/cli/plugins/karma')
+      require('@angular-devkit/build-angular/plugins/karma')
     ],
     customLaunchers: {
       ChromeHeadlessCI: {
@@ -23,12 +23,10 @@ module.exports = function (config) {
       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','html'],
     htmlReporter: {
       outputFile: 'tests/index.html',            

package.json

@@ -8,61 +8,63 @@
     "start-aot-fr": "ng serve --aot --i18nFile=src/i18n/messages.fr.xlf --i18nFormat=xlf --locale=fr --env=dev",
     "start-aot-en": "ng serve --aot --i18nFile=src/i18n/messages.en.xlf --i18nFormat=xlf --locale=en --env=dev",
     "build": "ng build --env=dev",
-    "build-prod": "ng build --prod",
-    "build-i18n": "for lang in en fr; do ng build --env=prod --output-path=dist/$lang --aot --bh /$lang/ --i18n-file=src/i18n/messages.$lang.xlf --i18n-format=xlf --locale=$lang; done",
+    "build-prod": "ng build --prod --build-optimizer",
+    "build-i18n": "for lang in en fr; do ng build --prod --build-optimizer --output-path=dist/$lang --bh /$lang/ --i18n-file=src/i18n/messages.$lang.xlf --i18n-format=xlf --locale=$lang; done",
     "win-build-i18n:fr": "ng build --env=dev --output-path=dist/fr --aot --bh /fr/ --i18n-file=src/i18n/messages.fr.xlf --i18n-format=xlf --locale=fr",
     "win-build-i18n:en": "ng build --env=dev --output-path=dist/en --aot --bh /en/ --i18n-file=src/i18n/messages.en.xlf --i18n-format=xlf --locale=en",
     "win-build-i18n": "npm run win-build-i18n:en && npm run win-build-i18n:fr",
-    "test": "ng test --browser=Chrome --code-coverage=true",
-    "test:ci": "ng test --browser ChromeHeadlessCI --code-coverage=true --single-run=true --reporters html,progress,kjhtml",
+    "test": "ng test --browsers=Chrome --code-coverage=true",
+    "test:ci": "ng test --browsers ChromeHeadlessCI --code-coverage=true --watch=false",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^5.2.9",
-    "@angular/cdk": "^5.2.4",
-    "@angular/common": "^5.2.0",
-    "@angular/compiler": "^5.2.0",
-    "@angular/core": "^5.2.0",
-    "@angular/forms": "^5.2.0",
-    "@angular/http": "^5.2.0",
-    "@angular/platform-browser": "^5.2.0",
-    "@angular/platform-browser-dynamic": "^5.2.0",
-    "@angular/router": "^5.2.0",
+    "@angular/animations": "6.0.4",
+    "@angular/cdk": "^5.2.5",
+    "@angular/common": "6.0.4",
+    "@angular/compiler": "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",
     "@types/leaflet": "^1.2.7",
     "@types/leaflet.markercluster": "^1.0.3",
     "bulma": "^0.7.1",
-    "core-js": "^2.4.1",
+    "core-js": "^2.5.7",
     "font-awesome": "^4.7.0",
     "leaflet": "^1.3.1",
     "leaflet.markercluster": "^1.3.0",
     "lodash": "^4.17.10",
-    "rxjs": "^5.5.6",
-    "zone.js": "^0.8.19"
+    "rxjs": "^6.2.0",
+    "zone.js": "^0.8.26"
   },
   "devDependencies": {
-    "@angular/cli": "~1.7.3",
-    "@angular/compiler-cli": "^5.2.0",
-    "@angular/language-service": "^5.2.0",
-    "@types/jasmine": "~2.8.3",
+    "@angular-devkit/build-angular": "~0.6.8",
+    "@angular/cli": "^6.0.8",
+    "@angular/compiler-cli": "6.0.4",
+    "@angular/language-service": "6.0.4",
+    "@types/jasmine": "^2.8.8",
     "@types/jasminewd2": "~2.0.2",
-    "@types/node": "~6.0.60",
-    "codelyzer": "^4.0.1",
+    "@types/node": "^6.0.112",
+    "codelyzer": "^4.3.0",
     "jasmine-core": "~2.8.0",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "^2.0.2",
     "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "^1.2.1",
+    "karma-coverage-istanbul-reporter": "^1.4.3",
     "karma-htmlfile-reporter": "^0.3.5",
-    "karma-jasmine": "~1.1.0",
+    "karma-jasmine": "^1.1.2",
     "karma-jasmine-html-reporter": "^0.2.2",
     "ng2-mock-component": "0.0.6",
     "protractor": "^5.3.2",
+    "rxjs-tslint": "^0.1.4",
     "sass-recursive-map-merge": "^1.0.1",
     "ts-node": "~4.1.0",
     "tslint": "~5.9.1",
     "tslint-config-airbnb": "^5.9.2",
-    "typescript": "~2.5.3"
+    "typescript": "2.7.2"
   }
 }

src/app/editorialisation/components/accessibility/accessibility.component.spec.ts

@@ -5,7 +5,7 @@ import { WordpressPageComponent } from '..';
 import { HttpClientModule } from '@angular/common/http';
 import { SharedModule } from '../../../shared/shared.module';
 import { ActivatedRoute } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs';
 
 describe('AccessibilityComponent', () => {
   let component: AccessibilityComponent;
@@ -26,7 +26,7 @@ describe('AccessibilityComponent', () => {
           provide: ActivatedRoute,
           useValue: {
             snapshot: {
-              data: Observable.of({ page: {} }),
+              data: of({ page: {} }),
             },
           },
         },

src/app/editorialisation/components/approach/approach.component.spec.ts

@@ -5,7 +5,7 @@ import { WordpressPageComponent } from '..';
 import { HttpClientModule } from '@angular/common/http';
 import { SharedModule } from '../../../shared/shared.module';
 import { ActivatedRoute } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs';
 
 describe('ApproachComponent', () => {
   let component: ApproachComponent;
@@ -26,7 +26,7 @@ describe('ApproachComponent', () => {
           provide: ActivatedRoute,
           useValue: {
             snapshot: {
-              data: Observable.of({}),
+              data: of({}),
             },
           },
         },

src/app/editorialisation/components/legal-mentions/legal-mentions.component.spec.ts

@@ -4,7 +4,7 @@ import { LegalMentionsComponent } from './legal-mentions.component';
 import { WordpressPageComponent } from '..';
 import { HttpClientModule } from '@angular/common/http';
 import { ActivatedRoute } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs';
 import { SharedModule } from '../../../shared/shared.module';
 
 describe('LegalMentionsComponent', () => {
@@ -26,7 +26,7 @@ describe('LegalMentionsComponent', () => {
           provide: ActivatedRoute,
           useValue: {
             snapshot: {
-              data: Observable.of({}),
+              data: of({}),
             },
           },
         },

src/app/editorialisation/components/site-map/site-map.component.spec.ts

@@ -5,7 +5,7 @@ import { WordpressPageComponent } from '..';
 import { HttpClientModule } from '@angular/common/http';
 import { SharedModule } from '../../../shared/shared.module';
 import { ActivatedRoute } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs';
 
 describe('SiteMapComponent', () => {
   let component: SiteMapComponent;
@@ -26,7 +26,7 @@ describe('SiteMapComponent', () => {
           provide: ActivatedRoute,
           useValue: {
             snapshot: {
-              data: Observable.of({}),
+              data: of({}),
             },
           },
         },

src/app/editorialisation/components/wordpress-page/wordpress-page.component.spec.ts

@@ -4,7 +4,7 @@ import { WordpressPageComponent } from './wordpress-page.component';
 import { HttpClientModule } from '@angular/common/http';
 import { SharedModule } from '../../../shared/shared.module';
 import { ActivatedRoute } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs';
 
 describe('WordpressPageComponent', () => {
   let component: WordpressPageComponent;
@@ -22,7 +22,7 @@ describe('WordpressPageComponent', () => {
           provide: ActivatedRoute,
           useValue: {
             snapshot: {
-              data: Observable.of({}),
+              data: of({}),
             },
           },
         },

src/app/editorialisation/components/wordpress-post-detail/wordpress-post-detail.component.spec.ts

@@ -3,7 +3,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { WordpressPostDetailComponent } from './wordpress-post-detail.component';
 import { SharedModule } from '../../../shared/shared.module';
 import { ActivatedRoute } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs';
 
 describe('WordpressPostDetailComponent', () => {
   let component: WordpressPostDetailComponent;
@@ -17,7 +17,7 @@ describe('WordpressPostDetailComponent', () => {
           provide: ActivatedRoute,
           useValue: {
             snapshot: {
-              data: Observable.of({}),
+              data: of({}),
             },
           },
         },

src/app/editorialisation/resolvers/page.resolver.ts

@@ -2,8 +2,9 @@ import { Injectable } from '@angular/core';
 import { EditorialisationService } from '../services/editorialisation.service';
 import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
 import { WordpressPage } from '../models';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { environment } from '../../../environments/environment';
+import { map } from 'rxjs/operators';
 
 @Injectable()
 export class PageResolver implements Resolve<Observable<WordpressPage>>  {
@@ -22,8 +23,10 @@ export class PageResolver implements Resolve<Observable<WordpressPage>>  {
       page = '';
     }
 
-    return this._editorialisationService.getPage(page).map((res) => {
+    return this._editorialisationService.getPage(page).pipe(
+      map((res) => {
         return res;
-    });
+      }),
+    );
   }
 }

src/app/editorialisation/services/editorialisation.service.mock.ts

-import { Observable } from 'rxjs/Observable';
+import { Observable, of } from 'rxjs';
 import { WordpressPage } from '../models';
 import { WordpressPost } from '../models/wordpress-post.model';
 import { EditorialisationService } from '.';
-import 'rxjs/add/observable/of';
 
 export class EditorialisationServiceMock extends EditorialisationService {
 
   public getPage(slug: string): Observable<WordpressPage> {
-    return Observable.of(new WordpressPage({
+    return of(
+      new WordpressPage({
         title: {
           rendered: 'title',
         },
@@ -15,11 +15,12 @@ export class EditorialisationServiceMock extends EditorialisationService {
         content: {
           rendered: 'content',
         },
-    }));
+      }),
+    );
   }
 
   public getPostsList(): Observable<WordpressPost[]> {
-    return Observable.of([new WordpressPost({
+    return of([new WordpressPost({
       id: 111111,
       date: '01-01-2018',
       title: {
@@ -38,7 +39,7 @@ export class EditorialisationServiceMock extends EditorialisationService {
   }
 
   public getPostById(id: string): Observable<WordpressPost> {
-    return Observable.of(new WordpressPost({
+    return of(new WordpressPost({
       id: 111111,
       date: '01-01-2018',
       title: {
@@ -57,7 +58,7 @@ export class EditorialisationServiceMock extends EditorialisationService {
   }
 
   public getPostVideoHome(): Observable<WordpressPost> {
-    return Observable.of(new WordpressPost({
+    return of(new WordpressPost({
       id: 111111,
       date: '01-01-2018',
       title: {
@@ -76,6 +77,6 @@ export class EditorialisationServiceMock extends EditorialisationService {
   }
 
   getMediaUrl(): Observable<string> {
-    return Observable.of('url');
+    return of('url');
   }
 }

src/app/editorialisation/services/editorialisation.service.ts

-import 'rxjs/add/observable/forkJoin';
-import { Observable } from 'rxjs/Observable';
+
+import { Observable, forkJoin } from 'rxjs';
+import { map } from 'rxjs/operators';
 import { Injectable } from '@angular/core';
 import { environment } from '../../../environments/environment';
 import { HttpClient } from '@angular/common/http';
 import { WordpressPage, IWordpressPageResponse } from '../models/wordpress-page.model';
-import { WordpressPost, IWordpressPostResponse,
-         IWordpressMedia, IWordpressCategory } from '../models/wordpress-post.model';
+import {
+  WordpressPost, IWordpressPostResponse,
+  IWordpressMedia, IWordpressCategory,
+} from '../models/wordpress-post.model';
 
 @Injectable()
 export class EditorialisationService {
@@ -19,9 +22,11 @@ export class EditorialisationService {
   */
   getPage(slug: string): Observable<WordpressPage> {
     const url = environment.wordpressUrl + 'pages?slug=' + slug;
-    return this._http.get<IWordpressPageResponse[]>(url).map((pages) => {
+    return this._http.get<IWordpressPageResponse[]>(url).pipe(
+      map((pages) => {
         return pages.length > 0 ? new WordpressPage(pages[0]) : null;
-    });
+      }),
+    );
   }
 
   /*
@@ -34,10 +39,17 @@ export class EditorialisationService {
     const url = environment.wordpressUrl + 'posts';
     const postsList: WordpressPost[] = [];
 
-    return Observable.forkJoin([
-      this._http.get<IWordpressCategory[]>(environment.wordpressUrl + 'categories').map(categories => categories),
-      this._http.get<IWordpressPostResponse[]>(url).map(posts => posts),
-    ]).map(([categories, posts]) => {
+    return forkJoin(
+      [
+        this._http.get<IWordpressCategory[]>(environment.wordpressUrl + 'categories').pipe(
+          map(categories => categories),
+        ),
+        this._http.get<IWordpressPostResponse[]>(url).pipe(
+          map(posts => posts),
+        ),
+      ],
+    ).pipe(
+      map(([categories, posts]) => {
         posts.map((post) => {
           if (!post.categories.includes(environment.wordpressContent.categoryIdUniqueContent)) {
             const wpPost = new WordpressPost(post);
@@ -59,17 +71,25 @@ export class EditorialisationService {
           }
         });
         return postsList;
-    });
+      }),
+    );
 
   }
 
   getPostById(id: string): Observable<WordpressPost> {
     const url = environment.wordpressUrl + 'posts/' + id;
 
-    return Observable.forkJoin([
-      this._http.get<IWordpressCategory[]>(environment.wordpressUrl + 'categories').map(categories => categories),
-      this._http.get<IWordpressPostResponse[]>(url).map(posts => posts),
-    ]).map(([categories, post]) => {
+    return forkJoin(
+      [
+        this._http.get<IWordpressCategory[]>(environment.wordpressUrl + 'categories').pipe(
+          map(categories => categories),
+        ),
+        this._http.get<IWordpressPostResponse>(url).pipe(
+          map(post => post),
+        ),
+      ],
+    ).pipe(
+      map(([categories, post]) => {
         const wpPost = new WordpressPost(post);
         // For each post get the media url
         if (post.featured_media !== 0) {
@@ -86,7 +106,8 @@ export class EditorialisationService {
           wpPost.categories.push(category.name);
         });
         return wpPost;
-    });
+      }),
+    );
   }
 
   /*
@@ -94,16 +115,20 @@ export class EditorialisationService {
   */
   getPostVideoHome(): Observable<WordpressPost> {
     const url = environment.wordpressUrl + 'posts?slug=' + environment.wordpressContent.slugPostVideo;
-    return this._http.get<IWordpressPostResponse[]>(url).map((posts) => {
+    return this._http.get<IWordpressPostResponse[]>(url).pipe(
+      map((posts) => {
         return new WordpressPost(posts[0]);
-    });
+      }),
+    );
   }
 
   getMediaUrl(id: number): Observable<string> {
     const url = environment.wordpressUrl + 'media/' + id;
-    return this._http.get<IWordpressMedia>(url).map((media) => {
+    return this._http.get<IWordpressMedia>(url).pipe(
+      map((media) => {
         return media.guid.rendered;
-    });
+      }),
+    );
   }
 
 }

src/app/geosource/components/dataset-detail/dataset-detail.component.spec.ts

@@ -3,7 +3,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { DatasetDetailComponent } from './dataset-detail.component';
 import { RouterTestingModule } from '@angular/router/testing';
 import { ActivatedRoute } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
+import { Observable, of } from 'rxjs';
 import { DatasetDetailService, ElasticsearchService } from '../../services';
 import { HttpClientModule } from '@angular/common/http';
 import { Metadata } from '../../models';
@@ -25,7 +25,7 @@ describe('DatasetDetailComponent', () => {
           provide: ActivatedRoute,
           useValue: {
             get paramMap(): Observable<any> {
-              return Observable.of();
+              return of();
             },
           },
         },
@@ -40,7 +40,7 @@ describe('DatasetDetailComponent', () => {
     fixture = TestBed.createComponent(DatasetDetailComponent);
     component = fixture.componentInstance;
     service = TestBed.get(DatasetDetailService);
-    spyOn(service, 'getDatasetMetadata').and.returnValue(Observable.of(new Metadata()));
+    spyOn(service, 'getDatasetMetadata').and.returnValue(of(new Metadata()));
     fixture.detectChanges();
   });
 

src/app/geosource/components/dataset-detail/dataset-export/dataset-export.component.spec.ts

@@ -3,7 +3,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { DatasetExportComponent } from './dataset-export.component';
 import { LicenseModalComponent } from '../..';
 import { ActivatedRoute } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
+import { Observable, of } from 'rxjs';
 import { DatasetDetailService, ElasticsearchService } from '../../../services';
 import { HttpClientModule } from '@angular/common/http';
 import { Metadata } from '../../../models';
@@ -25,7 +25,7 @@ describe('DatasetExportComponent', () => {
           useValue: {
             parent: {
               get paramMap(): Observable<any> {
-                return Observable.of();
+                return of();
               },
             },
           },
@@ -41,7 +41,7 @@ describe('DatasetExportComponent', () => {
     fixture = TestBed.createComponent(DatasetExportComponent);
     component = fixture.componentInstance;
     service = TestBed.get(DatasetDetailService);
-    spyOn(service, 'getDatasetMetadata').and.returnValue(Observable.of(new Metadata()));
+    spyOn(service, 'getDatasetMetadata').and.returnValue(of(new Metadata()));
     fixture.detectChanges();
   });
 

src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ActivatedRoute } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
+import { Observable, of } from 'rxjs';
 import { DatasetInfoComponent } from './dataset-info.component';
 import { DatasetDetailService, ElasticsearchService } from '../../../services';
 import { Metadata } from '../../../models';
 import { RouterTestingModule } from '@angular/router/testing';
-import 'rxjs/add/observable/of';
 import { DatasetDescriptionComponent } from '../..';
 import { HttpClientModule } from '@angular/common/http';
 
@@ -55,7 +54,7 @@ describe('DatasetInfoComponent', () => {
           useValue: {
             parent: {
               get paramMap(): Observable<any> {
-                return Observable.of({
+                return of({
                   get: (param) => {
                     return 1;
                   },
@@ -73,7 +72,7 @@ describe('DatasetInfoComponent', () => {
     component = fixture.componentInstance;
     service = TestBed.get(DatasetDetailService);
     component.descriptions = [];
-    spyOn(service, 'getDatasetMetadata').and.returnValue(Observable.of(metadata));
+    spyOn(service, 'getDatasetMetadata').and.returnValue(of(metadata));
     fixture.detectChanges();
   });
 

src/app/geosource/components/dataset-list/dataset-list.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { DatasetListComponent } from './dataset-list.component';
 import { DatasetResearchService, ElasticsearchService } from '../../services';
-import { Observable } from 'rxjs/Observable';
+import { Observable, Subject, of } from 'rxjs';
 import { Dataset, SearchSuggestion } from '../../models';
 import { RouterTestingModule } from '@angular/router/testing';
-import { Subject } from 'rxjs/Subject';
 import { HttpClientModule } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MockComponent } from 'ng2-mock-component';
@@ -91,7 +90,7 @@ describe('DatasetListComponent', () => {
     component = fixture.componentInstance;
     service = TestBed.get(DatasetResearchService);
     elasticsearchService  = TestBed.get(ElasticsearchService);
-    spyOn(elasticsearchService, 'getSuggestion').and.returnValue(Observable.of(new SearchSuggestion()));
+    spyOn(elasticsearchService, 'getSuggestion').and.returnValue(of(new SearchSuggestion()));
     fixture.detectChanges();
   });
 
@@ -105,7 +104,7 @@ describe('DatasetListComponent', () => {
     beforeEach(() => {
 
       spyOnProperty(service, 'pageIndex', 'get').and.returnValue(5);
-      spyOn(service, 'getDatasetList').and.returnValue(Observable.of(datasetList));
+      spyOn(service, 'getDatasetList').and.returnValue(of(datasetList));
       spyOn(service, 'searchChange$').and.returnValue(searchSubject.asObservable());
       spyOn(component, 'search').and.callThrough();
       spyOn(component, 'getSuggestion').and.callThrough();
@@ -132,7 +131,7 @@ describe('DatasetListComponent', () => {
 
   describe('search()', () => {
     beforeEach(() => {
-      spyOn(service, 'getDatasetList').and.returnValue(Observable.of(datasetList));
+      spyOn(service, 'getDatasetList').and.returnValue(of(datasetList));
       spyOnProperty(service, 'pageIndex', 'get').and.returnValue(2);
       spyOnProperty(service, 'pageSize', 'get').and.returnValue(5);
       spyOnProperty(service, 'resultsCount', 'get').and.returnValue(10);

src/app/geosource/components/dataset-list/dataset-list.component.ts

 import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
 import { DatasetResearchService, ElasticsearchService } from '../../services';
 import { Dataset, IMetadataUri, SearchSuggestion } from '../../models';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 import { PaginatorOptions } from '../../../shared/models';
 
 @Component({

src/app/geosource/components/filter-list/filter-list.component.ts

 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { DatasetResearchService } from '../../services';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 import { IFilter } from '../../models';
 
 @Component({