feat: Upgrade to Angular 18 (#417 #418) (#420)

* (fix) Added esModuleInterop tsconfig

* (feat) Upgraded to angular 18

* Updated browser list

* Fixing filter

* Updated some dependencies

* Upgraded jest

* Upgraded angular ngrx eslint

* Upgraded CI to use v0.15 of the nrwl workflows

* Bumped package version to 11 and updated readme

.eslintrc.json

@@ -24,12 +24,18 @@
     {
       "files": ["*.ts", "*.tsx"],
       "extends": ["plugin:@nx/typescript"],
-      "rules": {}
+      "rules": {
+        "@typescript-eslint/no-extra-semi": "error",
+        "no-extra-semi": "off"
+      }
     },
     {
       "files": ["*.js", "*.jsx"],
       "extends": ["plugin:@nx/javascript"],
-      "rules": {}
+      "rules": {
+        "@typescript-eslint/no-extra-semi": "error",
+        "no-extra-semi": "off"
+      }
     }
   ]
 }

.github/workflows/ci.yml

@@ -4,12 +4,14 @@ on:
   push:
     branches:
       - main
+      - feature/*
+      - bugfix/*
   pull_request:
 
 jobs:
   main:
     name: Nx Cloud - Main Job
-    uses: nrwl/ci/.github/workflows/nx-cloud-main.yml@v0.13.0
+    uses: nrwl/ci/.github/workflows/nx-cloud-main.yml@v0.15.0
     with:
       main-branch-name: main
       number-of-agents: 3
@@ -24,6 +26,6 @@ jobs:
 
   agents:
     name: Nx Cloud - Agents
-    uses: nrwl/ci/.github/workflows/nx-cloud-agents.yml@v0.13.0
+    uses: nrwl/ci/.github/workflows/nx-cloud-agents.yml@v0.15.0
     with:
       number-of-agents: 3

.gitignore

@@ -49,3 +49,6 @@ Thumbs.db
 !.yarn/versions
 
 .angular
+
+.nx/cache
+.nx/workspace-data

.prettierignore

@@ -2,3 +2,6 @@
 
 /dist
 /coverage
+
+/.nx/cache
+/.nx/workspace-data

README.md

@@ -20,7 +20,9 @@ v8.X : Angular 13
 
 v9.X : Angular 14
 
-v10.X : Angular 16
+v10.X : Angular 16 - 17
+
+v11.X : Angular 18
 
 Include the following components:
 

apps/showcase/project.json

@@ -4,6 +4,7 @@
   "projectType": "application",
   "sourceRoot": "apps/showcase/src",
   "prefix": "ngx-mapbox-gl",
+  "tags": [],
   "targets": {
     "build": {
       "executor": "@angular-devkit/build-angular:browser",
@@ -62,34 +63,29 @@
       "executor": "@angular-devkit/build-angular:dev-server",
       "configurations": {
         "production": {
-          "browserTarget": "showcase:build:production"
+          "buildTarget": "showcase:build:production"
         },
         "development": {
-          "browserTarget": "showcase:build:development"
+          "buildTarget": "showcase:build:development"
         }
       },
       "defaultConfiguration": "development"
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",
       "options": {
-        "browserTarget": "showcase:build"
+        "buildTarget": "showcase:build"
       }
     },
     "lint": {
-      "executor": "@nx/linter:eslint",
-      "options": {
-        "lintFilePatterns": ["apps/showcase/**/*.ts", "apps/showcase/**/*.html"]
-      }
+      "executor": "@nx/eslint:lint"
     },
     "test": {
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/apps/showcase"],
       "options": {
-        "jestConfig": "apps/showcase/jest.config.ts",
-        "passWithNoTests": true
+        "jestConfig": "apps/showcase/jest.config.ts"
       }
     }
-  },
-  "tags": []
+  }
 }

apps/showcase/src/app/demo/demo-index.component.scss

@@ -33,7 +33,7 @@ mat-form-field.search {
 
 a.active {
   color: white;
-  background-color: mat.get-color-from-palette(
-    mat.define-palette(mat.$indigo-palette)
+  background-color: mat.m2-get-color-from-palette(
+    mat.m2-define-palette(mat.$m2-indigo-palette)
   ) !important;
 }

apps/showcase/src/app/demo/demo.module.ts

@@ -1,5 +1,8 @@
 import { CommonModule } from '@angular/common';
-import { HttpClientModule } from '@angular/common/http';
+import {
+  provideHttpClient,
+  withInterceptorsFromDi,
+} from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -69,29 +72,6 @@ import { StackblitzEditGuard } from './stackblitz-edit/stackblitz-edit-guard.ser
 import { StackblitzEditComponent } from './stackblitz-edit/stackblitz-edit.component';
 
 @NgModule({
-  imports: [
-    RouterModule,
-    HttpClientModule,
-    CommonModule,
-    FormsModule,
-
-    NgxMapboxGLModule,
-
-    LayoutModule,
-
-    MatRadioModule,
-    MatButtonToggleModule,
-    MatButtonModule,
-    MatListModule,
-    MatCardModule,
-    MatProgressSpinnerModule,
-    MatInputModule,
-    MatIconModule,
-    MatSidenavModule,
-    MatPaginatorModule,
-    MatSlideToggleModule,
-  ],
-  providers: [StackblitzEditGuard],
   declarations: [
     DemoIndexComponent,
     MglMapResizeDirective,
@@ -140,5 +120,24 @@ import { StackblitzEditComponent } from './stackblitz-edit/stackblitz-edit.compo
     MapProjectionComponent,
   ],
   exports: [DemoIndexComponent],
+  imports: [
+    RouterModule,
+    CommonModule,
+    FormsModule,
+    NgxMapboxGLModule,
+    LayoutModule,
+    MatRadioModule,
+    MatButtonToggleModule,
+    MatButtonModule,
+    MatListModule,
+    MatCardModule,
+    MatProgressSpinnerModule,
+    MatInputModule,
+    MatIconModule,
+    MatSidenavModule,
+    MatPaginatorModule,
+    MatSlideToggleModule,
+  ],
+  providers: [StackblitzEditGuard, provideHttpClient(withInterceptorsFromDi())],
 })
 export class DemoModule {}

apps/showcase/src/app/doc/doc.module.ts

@@ -1,5 +1,9 @@
 import { CommonModule } from '@angular/common';
-import { HttpClient, HttpClientModule } from '@angular/common/http';
+import {
+  HttpClient,
+  provideHttpClient,
+  withInterceptorsFromDi,
+} from '@angular/common/http';
 import { NgModule, SecurityContext } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -18,20 +22,19 @@ const DOC_ROUTES: Routes = [
 ];
 
 @NgModule({
+  declarations: [DocComponent],
   imports: [
     CommonModule,
     RouterModule.forChild(DOC_ROUTES),
     FormsModule,
-    HttpClientModule,
     MarkdownModule.forRoot({
       loader: HttpClient,
       sanitize: SecurityContext.NONE,
     }),
     MatFormFieldModule,
     MatSelectModule,
-
     LayoutModule,
   ],
-  declarations: [DocComponent],
+  providers: [provideHttpClient(withInterceptorsFromDi())],
 })
 export class DocModule {}

apps/showcase/tsconfig.json

@@ -20,7 +20,8 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "esModuleInterop": true
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,

libs/ngx-mapbox-gl/project.json

@@ -4,6 +4,7 @@
   "projectType": "library",
   "sourceRoot": "libs/ngx-mapbox-gl/src",
   "prefix": "ngx-mapbox-gl",
+  "tags": [],
   "targets": {
     "build": {
       "executor": "@nx/angular:package",
@@ -25,19 +26,11 @@
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/libs/ngx-mapbox-gl"],
       "options": {
-        "jestConfig": "libs/ngx-mapbox-gl/jest.config.ts",
-        "passWithNoTests": true
+        "jestConfig": "libs/ngx-mapbox-gl/jest.config.ts"
       }
     },
     "lint": {
-      "executor": "@nx/linter:eslint",
-      "options": {
-        "lintFilePatterns": [
-          "libs/ngx-mapbox-gl/**/*.ts",
-          "libs/ngx-mapbox-gl/**/*.html"
-        ]
-      }
+      "executor": "@nx/eslint:lint"
     }
-  },
-  "tags": []
+  }
 }

libs/ngx-mapbox-gl/tsconfig.json

@@ -20,7 +20,8 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "esModuleInterop": true
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,

nx.json

@@ -1,18 +1,5 @@
 {
   "$schema": "./node_modules/nx/schemas/nx-schema.json",
-  "npmScope": "ngx-mapbox-gl",
-  "affected": {
-    "defaultBase": "main"
-  },
-  "tasksRunnerOptions": {
-    "default": {
-      "runner": "nx-cloud",
-      "options": {
-        "cacheableOperations": ["build", "lint", "test", "e2e"],
-        "accessToken": "MWI1ZDBhMWEtMmEwNy00MmRmLWE1ZmMtYmZjYmI1MmNjN2YxfHJlYWQtd3JpdGU="
-      }
-    }
-  },
   "generators": {
     "@nx/angular:application": {
       "style": "scss",
@@ -31,13 +18,25 @@
   "targetDefaults": {
     "build": {
       "dependsOn": ["^build"],
-      "inputs": ["production", "^production"]
+      "inputs": ["production", "^production"],
+      "cache": true
     },
-    "lint": {
-      "inputs": ["default", "{workspaceRoot}/.eslintrc.json"]
+    "@nx/jest:jest": {
+      "inputs": ["default", "^production", "{workspaceRoot}/jest.preset.js"],
+      "cache": true,
+      "options": {
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
     },
-    "test": {
-      "inputs": ["default", "^production", "{workspaceRoot}/jest.preset.js"]
+    "@nx/eslint:lint": {
+      "inputs": ["default", "{workspaceRoot}/.eslintrc.json"],
+      "cache": true
     }
   },
   "namedInputs": {
@@ -48,7 +47,11 @@
       "!{projectRoot}/.eslintrc.json",
       "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
       "!{projectRoot}/tsconfig.spec.json",
-      "!{projectRoot}/jest.config.[jt]s"
+      "!{projectRoot}/jest.config.[jt]s",
+      "!{projectRoot}/src/test-setup.[jt]s"
     ]
-  }
+  },
+  "nxCloudAccessToken": "MWI1ZDBhMWEtMmEwNy00MmRmLWE1ZmMtYmZjYmI1MmNjN2YxfHJlYWQtd3JpdGU=",
+  "useInferencePlugins": false,
+  "defaultBase": "main"
 }