feat(*): support angular 6

This enables Angular version 6 support for all @agm packages:

* @agm/core
* @agm/snazzy-info-window
* @agm/js-marker-clusterer

BREAKING CHANGES
Angular 4 is not supported anymore. Please update to Angular 5/6 or use the previous version
of AGM beta.2.

.travis.yml

@@ -1,7 +1,7 @@
 language: node_js
 sudo: false
 node_js:
-- '7'
+- '10'
 
 env:
   global:
@@ -32,8 +32,7 @@ before_install:
 # - time npm i -g yarn --cache-min 999999999
 
 install:
-  - time npm prune
-  - time npm install
+  - time yarn
 
 script:
   - npm run ci

package.json

@@ -2,7 +2,7 @@
   "name": "@agm/_dev",
   "private": true,
   "version": "1.0.0-beta.2",
-  "description": "Angular 2+ components for Google Maps",
+  "description": "Angular components for Google Maps",
   "repository": {
     "type": "git",
     "url": "https://github.com/SebastianM/angular-google-maps.git"
@@ -14,7 +14,6 @@
     "maps",
     "google",
     "gmaps",
-    "ng2",
     "angular2"
   ],
   "scripts": {
@@ -50,62 +49,63 @@
   },
   "homepage": "https://angular-maps.com",
   "peerDependencies": {
-    "@angular/common": "^4.0.0 || ^5.0.0",
-    "@angular/core": "^4.0.0 || ^5.0.0"
+    "@angular/common": "^5.0.0 || ^6.0.0",
+    "@angular/core": "^5.0.0 || ^6.0.0"
   },
   "devDependencies": {
-    "@angular/animations": "^4.0.0",
-    "@angular/common": "^4.0.0",
-    "@angular/compiler": "^4.0.0",
-    "@angular/compiler-cli": "^4.0.0",
-    "@angular/core": "^4.0.0",
-    "@angular/platform-browser": "^4.0.0",
-    "@angular/platform-browser-dynamic": "^4.0.0",
-    "@angular/platform-server": "^4.0.0",
-    "@angular/tsc-wrapped": "4.0.0",
+    "@angular/animations": "^6.0.0",
+    "@angular/common": "^6.0.0",
+    "@angular/compiler": "^6.0.0",
+    "@angular/compiler-cli": "^6.0.0",
+    "@angular/core": "^6.0.0",
+    "@angular/platform-browser": "^6.0.0",
+    "@angular/platform-browser-dynamic": "^6.0.0",
+    "@angular/platform-server": "^6.0.0",
+    "@angular/tsc-wrapped": "4.4.6",
     "@compodoc/compodoc": "^1.0.0-beta.9",
-    "@ngtools/webpack": "1.3.0",
-    "@types/jasmine": "2.5.46",
+    "@ngtools/webpack": "6.0.0",
+    "@types/jasmine": "2.8.7",
     "angular2-template-loader": "^0.6.2",
-    "awesome-typescript-loader": "3.1.2",
-    "clang-format": "1.0.46",
-    "codelyzer": "^3.2.2",
+    "awesome-typescript-loader": "^5.0.0",
+    "clang-format": "1.2.3",
+    "codelyzer": "^4.3.0",
     "conventional-changelog": "^1.1.0",
     "copy-webpack-plugin": "^4.0.1",
-    "copyfiles": "^1.0.0",
-    "extract-text-webpack-plugin": "^2.0.0-beta.4",
+    "copyfiles": "^2.0.0",
     "glob": "^7.1.2",
-    "html-webpack-plugin": "^2.8.1",
-    "istanbul-instrumenter-loader": "^2.0.0",
-    "jasmine-core": "2.5.0",
+    "html-webpack-plugin": "^3.2.0",
+    "istanbul-instrumenter-loader": "^3.0.1",
+    "jasmine-core": "3.1.0",
     "js-marker-clusterer": "^1.0.0",
-    "karma": "^1.3.0",
-    "karma-chrome-launcher": "2.0.0",
+    "karma": "^2.0.2",
+    "karma-chrome-launcher": "2.2.0",
     "karma-coverage": "^1.1.1",
     "karma-jasmine": "^1.0.2",
     "karma-mocha-reporter": "^2.2.0",
-    "karma-remap-istanbul": "^0.5.0",
+    "karma-remap-istanbul": "^0.6.0",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^1.8.0",
+    "karma-webpack": "^3.0.0",
     "mkdirp": "^0.5.1",
     "ncp": "^2.0.0",
     "reflect-metadata": "^0.1.8",
-    "remap-istanbul": "^0.9.1",
-    "rimraf": "2.6.1",
-    "rollup": "0.41.6",
-    "rxjs": "^5.2.0",
+    "remap-istanbul": "^0.11.1",
+    "rimraf": "2.6.2",
+    "rollup": "0.58.2",
+    "rxjs": "^6.1.0",
+    "snazzy-info-window": "^1.1.1",
     "ts-helpers": "^1.1.2",
+    "ts-loader": "^4.3.0",
     "tslint": "^5.8.0",
     "tslint-loader": "^3.4.3",
-    "typescript": "~2.5.0",
-    "webpack": "2.3.3",
+    "typescript": "~2.7.2",
+    "webpack": "4.8.0",
     "zone.js": "^0.8.4"
   },
   "jspm": {
     "jspmNodeConversion": false,
     "dependencies": {
-      "@angular/common": "^4.0.0 || ^5.0.0",
-      "@angular/core": "^4.0.0 || ^5.0.0"
+      "@angular/common": "^5.0.0 || ^6.0.0",
+      "@angular/core": "^5.0.0 || ^6.0.0"
     }
   }
 }

packages/core/directives/circle.ts

@@ -1,5 +1,5 @@
 import {Directive, EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChange, Input, Output} from '@angular/core';
-import {Subscription} from 'rxjs/Subscription';
+import {Subscription} from 'rxjs';
 
 import {MouseEvent} from '../map-types';
 import {LatLng, LatLngBounds, LatLngLiteral} from '../services/google-maps-types';

packages/core/directives/data-layer.ts

@@ -1,5 +1,5 @@
 import { Directive, EventEmitter, OnDestroy, OnInit, OnChanges, SimpleChanges, Input, Output } from '@angular/core';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import { DataMouseEvent, DataOptions } from './../services/google-maps-types';
 import { DataLayerManager } from './../services/managers/data-layer-manager';

packages/core/directives/kml-layer.ts

@@ -1,5 +1,5 @@
 import { Directive, EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges, Input, Output } from '@angular/core';
-import {Subscription} from 'rxjs/Subscription';
+import {Subscription} from 'rxjs';
 
 import {KmlMouseEvent} from './../services/google-maps-types';
 import {KmlLayerManager} from './../services/managers/kml-layer-manager';

packages/core/directives/map.ts

@@ -1,5 +1,5 @@
 import { Component, ElementRef, EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges, Input, Output } from '@angular/core';
-import {Subscription} from 'rxjs/Subscription';
+import {Subscription} from 'rxjs';
 
 import {MouseEvent} from '../map-types';
 import {GoogleMapsAPIWrapper} from '../services/google-maps-api-wrapper';

packages/core/directives/marker.ts

@@ -1,7 +1,7 @@
 import {Directive, EventEmitter, OnChanges, OnDestroy, SimpleChange,
   AfterContentInit, ContentChildren, QueryList, Input, Output
 } from '@angular/core';
-import {Subscription} from 'rxjs/Subscription';
+import {Subscription} from 'rxjs';
 
 import {MouseEvent} from '../map-types';
 import * as mapTypes from '../services/google-maps-types';

packages/core/directives/polygon.ts

@@ -1,5 +1,5 @@
 import { AfterContentInit, Directive, EventEmitter, OnChanges, OnDestroy, SimpleChanges, Input, Output } from '@angular/core';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import { LatLng, LatLngLiteral, PolyMouseEvent, PolygonOptions } from '../services/google-maps-types';
 import { PolygonManager } from '../services/managers/polygon-manager';

packages/core/directives/polyline.ts

@@ -1,5 +1,5 @@
 import { AfterContentInit, ContentChildren, Directive, EventEmitter, OnChanges, OnDestroy, QueryList, SimpleChanges, Input, Output } from '@angular/core';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import { PolyMouseEvent } from '../services/google-maps-types';
 import { PolylineManager } from '../services/managers/polyline-manager';

packages/core/services/google-maps-api-wrapper.ts

@@ -1,6 +1,5 @@
 import {Injectable, NgZone} from '@angular/core';
-import {Observable} from 'rxjs/Observable';
-import {Observer} from 'rxjs/Observer';
+import {Observable, Observer} from 'rxjs';
 
 import * as mapTypes from './google-maps-types';
 import {Polyline} from './google-maps-types';
@@ -100,7 +99,7 @@ export class GoogleMapsAPIWrapper {
   }
 
   subscribeToMapEvent<E>(eventName: string): Observable<E> {
-    return Observable.create((observer: Observer<E>) => {
+    return new Observable((observer: Observer<E>) => {
       this._map.then((m: mapTypes.GoogleMap) => {
         m.addListener(eventName, (arg: E) => { this._zone.run(() => observer.next(arg)); });
       });

packages/core/services/managers/circle-manager.ts

@@ -1,7 +1,6 @@
 import {Injectable, NgZone} from '@angular/core';
 
-import {Observable} from 'rxjs/Observable';
-import {Observer} from 'rxjs/Observer';
+import {Observable, Observer} from 'rxjs';
 
 import {AgmCircle} from '../../directives/circle';
 import {GoogleMapsAPIWrapper} from '../google-maps-api-wrapper';
@@ -80,7 +79,7 @@ export class CircleManager {
   }
 
   createEventObservable<T>(eventName: string, circle: AgmCircle): Observable<T> {
-    return Observable.create((observer: Observer<T>) => {
+    return new Observable((observer: Observer<T>) => {
       let listener: mapTypes.MapsEventListener = null;
       this._circles.get(circle).then((c) => {
         listener = c.addListener(eventName, (e: T) => this._zone.run(() => observer.next(e)));

packages/core/services/managers/data-layer-manager.ts

@@ -1,6 +1,5 @@
 import { Injectable, NgZone } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
-import { Observer } from 'rxjs/Observer';
+import { Observable ,  Observer } from 'rxjs';
 
 import { AgmDataLayer } from './../../directives/data-layer';
 import { GoogleMapsAPIWrapper } from './../google-maps-api-wrapper';
@@ -69,7 +68,7 @@ export class DataLayerManager {
    * Creates a Google Maps event listener for the given DataLayer as an Observable
    */
   createEventObservable<T>(eventName: string, layer: AgmDataLayer): Observable<T> {
-    return Observable.create((observer: Observer<T>) => {
+    return new Observable((observer: Observer<T>) => {
       this._layers.get(layer).then((d: Data) => {
         d.addListener(eventName, (e: T) => this._zone.run(() => observer.next(e)));
       });

packages/core/services/managers/info-window-manager.ts

@@ -1,5 +1,4 @@
-import { Observable } from 'rxjs/Observable';
-import { Observer } from 'rxjs/Observer';
+import { Observable ,  Observer } from 'rxjs';
 import {Injectable, NgZone} from '@angular/core';
 
 import {AgmInfoWindow} from '../../directives/info-window';
@@ -80,7 +79,7 @@ export class InfoWindowManager {
     * Creates a Google Maps event listener for the given InfoWindow as an Observable
     */
   createEventObservable<T>(eventName: string, infoWindow: AgmInfoWindow): Observable<T> {
-    return Observable.create((observer: Observer<T>) => {
+    return new Observable((observer: Observer<T>) => {
       this._infoWindows.get(infoWindow).then((i: InfoWindow) => {
         i.addListener(eventName, (e: T) => this._zone.run(() => observer.next(e)));
       });

packages/core/services/managers/kml-layer-manager.ts

@@ -1,6 +1,5 @@
 import {Injectable, NgZone} from '@angular/core';
-import {Observable} from 'rxjs/Observable';
-import {Observer} from 'rxjs/Observer';
+import {Observable, Observer} from 'rxjs';
 
 import {AgmKmlLayer} from './../../directives/kml-layer';
 import {GoogleMapsAPIWrapper} from './../google-maps-api-wrapper';
@@ -51,7 +50,7 @@ export class KmlLayerManager {
    * Creates a Google Maps event listener for the given KmlLayer as an Observable
    */
   createEventObservable<T>(eventName: string, layer: AgmKmlLayer): Observable<T> {
-    return Observable.create((observer: Observer<T>) => {
+    return new Observable((observer: Observer<T>) => {
       this._layers.get(layer).then((m: KmlLayer) => {
         m.addListener(eventName, (e: T) => this._zone.run(() => observer.next(e)));
       });

packages/core/services/managers/marker-manager.ts

@@ -1,6 +1,5 @@
 import {Injectable, NgZone} from '@angular/core';
-import {Observable} from 'rxjs/Observable';
-import {Observer} from 'rxjs/Observer';
+import {Observable, Observer} from 'rxjs';
 
 import {AgmMarker} from './../../directives/marker';
 
@@ -99,7 +98,7 @@ export class MarkerManager {
   }
 
   createEventObservable<T>(eventName: string, marker: AgmMarker): Observable<T> {
-    return Observable.create((observer: Observer<T>) => {
+    return new Observable((observer: Observer<T>) => {
       this._markers.get(marker).then((m: Marker) => {
         m.addListener(eventName, (e: T) => this._zone.run(() => observer.next(e)));
       });

packages/core/services/managers/polygon-manager.ts

@@ -1,6 +1,5 @@
 import {Injectable, NgZone} from '@angular/core';
-import {Observable} from 'rxjs/Observable';
-import {Observer} from 'rxjs/Observer';
+import {Observable, Observer} from 'rxjs';
 
 import {AgmPolygon} from '../../directives/polygon';
 import {GoogleMapsAPIWrapper} from '../google-maps-api-wrapper';
@@ -57,7 +56,7 @@ export class PolygonManager {
   }
 
   createEventObservable<T>(eventName: string, path: AgmPolygon): Observable<T> {
-    return Observable.create((observer: Observer<T>) => {
+    return new Observable((observer: Observer<T>) => {
       this._polygons.get(path).then((l: Polygon) => {
         l.addListener(eventName, (e: T) => this._zone.run(() => observer.next(e)));
       });

packages/core/services/managers/polyline-manager.ts

@@ -1,6 +1,5 @@
 import {Injectable, NgZone} from '@angular/core';
-import {Observable} from 'rxjs/Observable';
-import {Observer} from 'rxjs/Observer';
+import {Observable, Observer} from 'rxjs';
 
 import {AgmPolyline} from '../../directives/polyline';
 import {AgmPolylinePoint} from '../../directives/polyline-point';
@@ -66,7 +65,7 @@ export class PolylineManager {
   }
 
   createEventObservable<T>(eventName: string, line: AgmPolyline): Observable<T> {
-    return Observable.create((observer: Observer<T>) => {
+    return new Observable((observer: Observer<T>) => {
       this._polylines.get(line).then((l: Polyline) => {
         l.addListener(eventName, (e: T) => this._zone.run(() => observer.next(e)));
       });

packages/js-marker-clusterer/package.tpl.json

@@ -20,8 +20,8 @@
     "url": "https://github.com/SebastianM/angular-google-maps/issues"
   },
   "peerDependencies": {
-    "@angular/core": "^4.0.0 || ^5.0.0",
-    "@agm/core": "^1.0.0-beta.2",
+    "@angular/core": "^5.0.0 || ^6.0.0",
+    "@agm/core": "^1.0.0-beta.3",
     "js-marker-clusterer": "^1.0.0"
   },
   "homepage": "https://github.com/SebastianM/angular-google-maps#readme"

packages/snazzy-info-window/directives/snazzy-info-window.ts

@@ -1,7 +1,7 @@
 import { Host, SkipSelf, OnChanges, AfterViewInit, EventEmitter, Input, SimpleChanges, ViewContainerRef, TemplateRef, Output, Optional, OnDestroy, ElementRef, Component, ViewChild, ContentChild } from '@angular/core';
 import { AgmMarker, GoogleMapsAPIWrapper, MarkerManager, MapsAPILoader } from '@agm/core';
 
-declare var System: any;
+declare var require: any;
 
 @Component({
   // tslint:disable-next-line:component-selector
@@ -181,7 +181,7 @@ export class AgmSnazzyInfoWindow implements AfterViewInit, OnDestroy, OnChanges
   ngAfterViewInit() {
     const m = this._manager != null ? this._manager.getNativeMarker(this._marker) : null;
     this._snazzyInfoWindowInitialized = this._loader.load()
-      .then(() => System.import('snazzy-info-window'))
+      .then(() => require('snazzy-info-window'))
       .then((module: any) => Promise.all([module, m, this._wrapper.getNativeMap()]))
       .then((elems) => {
         const options: any = {

packages/snazzy-info-window/package.tpl.json

@@ -21,8 +21,8 @@
     "url": "https://github.com/SebastianM/angular-google-maps/issues"
   },
   "peerDependencies": {
-    "@angular/core": "^4.0.0 || ^5.0.0",
-    "@agm/core": "^1.0.0-beta.2",
+    "@angular/core": "^5.0.0 || ^6.0.0",
+    "@agm/core": "^1.0.0-beta.3",
     "snazzy-info-window": "^1.1.0"
   },
   "homepage": "https://github.com/SebastianM/angular-google-maps#readme"