feat: add Angular 10 support

Wykks · Jul 20, 2020 · 3976db7 · 3976db7
1 parent 76cf685
commit 3976db7
Show file tree

Hide file tree

Showing 23 changed files with 2,558 additions and 1,864 deletions.
diff --git a/angular.json b/angular.json
@@ -17,7 +17,8 @@
           },
           "configurations": {
             "production": {
-              "project": "projects/ngx-mapbox-gl/ng-package.prod.json"
+              "project": "projects/ngx-mapbox-gl/ng-package.prod.json",
+              "tsConfig": "projects/ngx-mapbox-gl/tsconfig.lib.prod.json"
             }
           }
         },
@@ -49,6 +50,8 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
+            "allowedCommonJsDependencies": ["@mapbox/mapbox-gl-geocoder", "@mapbox/mapbox-sdk", "suggestions"],
+            "aot": true,
             "outputPath": "dist/showcase",
             "index": "projects/showcase/src/index.html",
             "main": "projects/showcase/src/main.ts",
@@ -61,11 +64,16 @@
             ],
             "styles": ["projects/showcase/src/styles.css"],
             "scripts": [],
-            "showCircularDependencies": false,
-            "es5BrowserSupport": true
+            "showCircularDependencies": false
           },
           "configurations": {
             "production": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
               "fileReplacements": [
                 {
                   "replace": "projects/showcase/src/environments/environment.ts",

diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     }
   },
   "lint-staged": {
-    "*.ts": "tslint --project ./tsconfig.json --config ./tslint.json --fix",
+    "*.ts": "tslint --project ./tsconfig.base.json --config ./tslint.json --fix",
     "*.{js,ts,md,html,css,json}": "prettier --config ./.prettierrc --write"
   },
   "husky": {
@@ -36,66 +36,63 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^8.1.0",
-    "@angular/cdk": "^8.0.2",
-    "@angular/common": "^8.1.0",
-    "@angular/compiler": "^8.1.0",
-    "@angular/core": "^8.1.0",
-    "@angular/forms": "^8.1.0",
-    "@angular/material": "^8.0.2",
-    "@angular/platform-browser": "^8.1.0",
-    "@angular/platform-browser-dynamic": "^8.1.0",
-    "@angular/router": "^8.1.0",
+    "@angular/animations": "^10.0.4",
+    "@angular/cdk": "^10.0.2",
+    "@angular/common": "^10.0.4",
+    "@angular/compiler": "^10.0.4",
+    "@angular/core": "^10.0.4",
+    "@angular/forms": "^10.0.4",
+    "@angular/material": "^10.0.2",
+    "@angular/platform-browser": "^10.0.4",
+    "@angular/platform-browser-dynamic": "^10.0.4",
+    "@angular/router": "^10.0.4",
     "@mapbox/mapbox-gl-geocoder": "^3.1.6",
-    "@ngrx/effects": "^8.0.1",
-    "@ngrx/router-store": "^8.0.1",
-    "@ngrx/store": "^8.0.1",
-    "@ngrx/store-devtools": "^8.0.1",
+    "@ngrx/effects": "^9.2.0",
+    "@ngrx/router-store": "^9.2.0",
+    "@ngrx/store": "^9.2.0",
+    "@ngrx/store-devtools": "^9.2.0",
     "@stackblitz/sdk": "^1.3.0",
-    "hammerjs": "^2.0.8",
     "lodash-es": "^4.17.11",
     "mapbox-gl": "^1.1.0",
     "ngx-md": "^8.0.0",
     "rxjs": "^6.5.2",
     "scroll-into-view-if-needed": "^2.2.20",
-    "tslib": "^1.10.0",
-    "zone.js": "~0.9.1"
+    "tslib": "^2.0.0",
+    "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.803.0",
-    "@angular-devkit/build-ng-packagr": "^0.803.0",
-    "@angular/cli": "^8.3.0",
-    "@angular/compiler-cli": "^8.1.0",
-    "@ngrx/schematics": "^8.0.1",
+    "@angular-devkit/build-angular": "~0.1000.3",
+    "@angular-devkit/build-ng-packagr": "~0.1000.3",
+    "@angular/cli": "^10.0.3",
+    "@angular/compiler-cli": "^10.0.4",
+    "@ngrx/schematics": "^9.2.0",
     "@types/jasmine": "^3.3.13",
     "@types/jasminewd2": "^2.0.6",
     "@types/lodash-es": "^4.17.3",
     "@types/mapbox-gl": "^1.5.2",
-    "@types/node": "^12.0.11",
     "angular-cli-ghpages": "^0.6.0",
-    "codelyzer": "^5.1.0",
-    "commitizen": "4.0.3",
-    "cz-conventional-changelog": "3.1.0",
-    "husky": "4.2.1",
-    "jasmine-core": "^3.4.0",
-    "jasmine-spec-reporter": "^4.2.1",
-    "karma": "^4.1.0",
-    "karma-chrome-launcher": "^3.0.0",
-    "karma-coverage-istanbul-reporter": "^2.0.5",
-    "karma-jasmine": "^2.0.1",
-    "karma-jasmine-html-reporter": "^1.4.2",
+    "codelyzer": "^6.0.0",
+    "commitizen": "^4.0.3",
+    "cz-conventional-changelog": "^3.1.0",
+    "husky": "^4.2.1",
+    "jasmine-core": "~3.5.0",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~5.0.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-jasmine": "~3.3.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
     "karma-mocha-reporter": "^2.2.5",
-    "lint-staged": "10.0.7",
-    "ng-packagr": "^5.3.0",
+    "lint-staged": "^10.0.7",
+    "ng-packagr": "^10.0.0",
     "pixel-diff": "^1.0.1",
     "prettier": "^2.0.5",
-    "protractor": "^5.4.2",
+    "protractor": "~7.0.0",
     "protractor-browser-logs": "^1.0.446",
     "standard-version": "^8.0.1",
     "ts-node": "^8.3.0",
-    "tsickle": "^0.37.0",
-    "tslint": "^5.18.0",
-    "typescript": "~3.5.3",
+    "tslint": "~6.1.0",
+    "typescript": "~3.9.7",
     "typescript-tslint-plugin": "^0.5.3"
   },
   "config": {

diff --git a/projects/ngx-mapbox-gl/package.json b/projects/ngx-mapbox-gl/package.json
@@ -20,8 +20,8 @@
   },
   "homepage": "https://github.com/Wykks/ngx-mapbox-gl#readme",
   "peerDependencies": {
-    "@angular/common": ">= 8.0.0 < 10.0.0",
-    "@angular/core": ">= 8.0.0 < 10.0.0",
+    "@angular/common": ">= 8.0.0 < 11.0.0",
+    "@angular/core": ">= 8.0.0 < 11.0.0",
     "mapbox-gl": "^1.1.0",
     "rxjs": "^6.5.0"
   },

diff --git a/projects/ngx-mapbox-gl/src/lib/ngx-mapbox-gl.module.ts b/projects/ngx-mapbox-gl/src/lib/ngx-mapbox-gl.module.ts
@@ -81,7 +81,10 @@ import { VideoSourceComponent } from './source/video-source.component';
   ],
 })
 export class NgxMapboxGLModule {
-  static withConfig(config: { accessToken: string; geocoderAccessToken?: string }): ModuleWithProviders<NgxMapboxGLModule> {
+  static withConfig(config: {
+    accessToken: string;
+    geocoderAccessToken?: string;
+  }): ModuleWithProviders<NgxMapboxGLModule> {
     return {
       ngModule: NgxMapboxGLModule,
       providers: [

diff --git a/projects/ngx-mapbox-gl/tsconfig.lib.json b/projects/ngx-mapbox-gl/tsconfig.lib.json
@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/lib",
     "moduleResolution": "node",
@@ -13,7 +13,6 @@
     "lib": ["dom", "es2015"]
   },
   "angularCompilerOptions": {
-    "annotateForClosureCompiler": true,
     "skipTemplateCodegen": true,
     "strictMetadataEmit": true,
     "fullTemplateTypeCheck": true,

diff --git a/projects/ngx-mapbox-gl/tsconfig.lib.prod.json b/projects/ngx-mapbox-gl/tsconfig.lib.prod.json
@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "angularCompilerOptions": {
+    "enableIvy": false
+  }
+}
diff --git a/projects/ngx-mapbox-gl/tsconfig.spec.json b/projects/ngx-mapbox-gl/tsconfig.spec.json
@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/spec",
     "types": ["jasmine", "node"]

diff --git a/projects/showcase-e2e/tsconfig.e2e.json b/projects/showcase-e2e/tsconfig.e2e.json
@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/app",
     "module": "commonjs",

diff --git a/projects/showcase/browserslist → projects/showcase/.browserslistrc b/projects/showcase/browserslist → projects/showcase/.browserslistrc
diff --git a/projects/showcase/src/app/app.module.ts b/projects/showcase/src/app/app.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, Injectable } from '@angular/core';
 import { MatIconRegistry } from '@angular/material/icon';
 import { BrowserModule, DomSanitizer } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -9,10 +9,10 @@ import {
   RouterReducerState,
   RouterStateSerializer,
   StoreRouterConnectingModule,
+  DefaultRouterStateSerializer,
 } from '@ngrx/router-store';
 import { StoreModule } from '@ngrx/store';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
-import 'hammerjs';
 import { NgxMapboxGLModule } from 'ngx-mapbox-gl';
 import { environment } from '../environments/environment';
 import { DEMO_ROUTES, DemoModule } from './demo/demo.module';
@@ -32,6 +32,7 @@ export interface State {
   demo: fromDemo.State;
 }
 
+@Injectable()
 export class SimpleSerializer implements RouterStateSerializer<RouterStateUrl> {
   serialize(routerState: RouterStateSnapshot): RouterStateUrl {
     let route = routerState.root;
@@ -90,9 +91,7 @@ export const showcaseRoutes: Routes = [
     RouterModule.forRoot(showcaseRoutes),
     EffectsModule.forRoot([]),
     !environment.production ? StoreDevtoolsModule.instrument() : [],
-    StoreRouterConnectingModule.forRoot({
-      stateKey: 'router',
-    }),
+    StoreRouterConnectingModule.forRoot({ serializer: DefaultRouterStateSerializer, stateKey: 'router' }),
     NgxMapboxGLModule.withConfig({
       accessToken: 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA',
     }),

diff --git a/projects/showcase/src/app/demo/examples/cluster-html.component.ts b/projects/showcase/src/app/demo/examples/cluster-html.component.ts
@@ -15,7 +15,7 @@ const COLORS = ['#fed976', '#feb24c', '#fd8d3c', '#fc4e2a', '#e31a1c'];
 @Component({
   selector: 'showcase-demo',
   template: `
-    <mgl-map style="mapbox://styles/mapbox/light-v10" [zoom]="[0.3]" [center]="[0, 20]">
+    <mgl-map [style]="'mapbox://styles/mapbox/light-v10'" [zoom]="[0.3]" [center]="[0, 20]">
       <mgl-geojson-source
         id="earthquakes"
         data="https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson"

diff --git a/projects/showcase/src/app/demo/examples/cluster.component.ts b/projects/showcase/src/app/demo/examples/cluster.component.ts
@@ -3,7 +3,11 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'showcase-demo',
   template: `
-    <mgl-map style="mapbox://styles/mapbox/dark-v9" [zoom]="[3]" [center]="[-103.59179687498357, 40.66995747013945]">
+    <mgl-map
+      [style]="'mapbox://styles/mapbox/dark-v9'"
+      [zoom]="[3]"
+      [center]="[-103.59179687498357, 40.66995747013945]"
+    >
       <ng-container *ngIf="earthquakes">
         <mgl-geojson-source
           id="earthquakes"

diff --git a/projects/showcase/src/app/demo/examples/heatmap.component.ts b/projects/showcase/src/app/demo/examples/heatmap.component.ts
@@ -4,7 +4,11 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'showcase-demo',
   template: `
-    <mgl-map style="mapbox://styles/mapbox/dark-v9" [zoom]="[3]" [center]="[-103.59179687498357, 40.66995747013945]">
+    <mgl-map
+      [style]="'mapbox://styles/mapbox/dark-v9'"
+      [zoom]="[3]"
+      [center]="[-103.59179687498357, 40.66995747013945]"
+    >
       <ng-container *ngIf="earthquakes">
         <mgl-geojson-source
           id="earthquakes"

diff --git a/projects/showcase/src/app/demo/examples/hover-styles.component.ts b/projects/showcase/src/app/demo/examples/hover-styles.component.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'showcase-demo',
   template: `
-    <mgl-map style="mapbox://styles/mapbox/streets-v9" [zoom]="[2]" [center]="[-100.486052, 37.830348]">
+    <mgl-map [style]="'mapbox://styles/mapbox/streets-v9'" [zoom]="[2]" [center]="[-100.486052, 37.830348]">
       <mgl-geojson-source
         id="states"
         data="https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_admin_1_states_provinces.geojson"

diff --git a/projects/showcase/src/app/demo/examples/language-switch.component.ts b/projects/showcase/src/app/demo/examples/language-switch.component.ts
@@ -4,7 +4,7 @@ import { Map } from 'mapbox-gl';
 @Component({
   selector: 'showcase-demo',
   template: `
-    <mgl-map style="mapbox://styles/mapbox/light-v9" [zoom]="[2.9]" [center]="[16.05, 48]" (load)="map = $event">
+    <mgl-map [style]="'mapbox://styles/mapbox/light-v9'" [zoom]="[2.9]" [center]="[16.05, 48]" (load)="map = $event">
       <mgl-control>
         <button mat-raised-button class="lang-button" (click)="changeLangTo('fr')">
           French

diff --git a/projects/showcase/src/app/demo/examples/ngx-cluster-html.component.ts b/projects/showcase/src/app/demo/examples/ngx-cluster-html.component.ts
@@ -12,7 +12,11 @@ import { GeoJSONSourceComponent } from 'ngx-mapbox-gl';
 @Component({
   selector: 'showcase-demo',
   template: `
-    <mgl-map style="mapbox://styles/mapbox/dark-v9" [zoom]="[3]" [center]="[-103.59179687498357, 40.66995747013945]">
+    <mgl-map
+      [style]="'mapbox://styles/mapbox/dark-v9'"
+      [zoom]="[3]"
+      [center]="[-103.59179687498357, 40.66995747013945]"
+    >
       <ng-container *ngIf="earthquakes">
         <mgl-geojson-source
           #clusterComponent

diff --git a/projects/showcase/src/app/demo/examples/toggle-layers.component.ts b/projects/showcase/src/app/demo/examples/toggle-layers.component.ts
@@ -5,7 +5,7 @@ import { AnyLayout } from 'mapbox-gl';
   selector: 'showcase-demo',
   template: `
     <mgl-map
-      style="mapbox://styles/mapbox/streets-v9"
+      [style]="'mapbox://styles/mapbox/streets-v9'"
       [zoom]="[15]"
       [center]="[-71.97722138410576, -13.517379300798098]"
     >

diff --git a/projects/showcase/src/app/demo/examples/zoomto-linestring.component.ts b/projects/showcase/src/app/demo/examples/zoomto-linestring.component.ts
@@ -5,7 +5,7 @@ import { LngLatBounds } from 'mapbox-gl';
   selector: 'showcase-demo',
   template: `
     <mgl-map
-      style="mapbox://styles/mapbox/light-v9"
+      [style]="'mapbox://styles/mapbox/light-v9'"
       [zoom]="[12]"
       [center]="[-77.0214, 38.897]"
       [fitBounds]="bounds"

diff --git a/projects/showcase/tsconfig.app.json b/projects/showcase/tsconfig.app.json
@@ -1,12 +1,14 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/app",
+    "resolveJsonModule": true,
     "types": []
   },
   "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,
     "preserveWhitespaces": false
   },
-  "exclude": ["src/test.ts", "**/*.spec.ts"]
+  "files": ["src/main.ts", "src/polyfills.ts"],
+  "include": ["projects/showcase/src/**/*.d.ts"]
 }
diff --git a/projects/showcase/tsconfig.spec.json b/projects/showcase/tsconfig.spec.json
@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/spec",
     "types": ["jasmine", "node"]

diff --git a/tsconfig.base.json b/tsconfig.base.json
@@ -0,0 +1,33 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "downlevelIteration": true,
+    "importHelpers": true,
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "module": "es2020",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "es2015",
+    "typeRoots": ["node_modules/@types"],
+    "lib": ["es2017", "dom"],
+    "paths": {
+      "ngx-mapbox-gl": ["projects/ngx-mapbox-gl/src/public_api"]
+    },
+    "strict": true,
+    "skipLibCheck": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "strictPropertyInitialization": false,
+    "plugins": [
+      {
+        "name": "typescript-tslint-plugin"
+      }
+    ]
+  }
+}