upgrade to Angular v18, closes DethAriel#324

LakhveerChahal · May 25, 2024 · 5494fca · 5494fca
1 parent e32d5aa
commit 5494fca
Show file tree

Hide file tree

Showing 5 changed files with 3,553 additions and 2,929 deletions.
diff --git a/angular.json b/angular.json
@@ -39,23 +39,23 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/demo/ng-recaptcha",
+            "outputPath": {
+              "base": "dist/demo/ng-recaptcha"
+            },
             "index": "projects/demo/src/index.html",
-            "main": "projects/demo/src/app/demo-wrapper/demo-wrapper.main.ts",
-            "polyfills": "projects/demo/src/polyfills.ts",
+            "polyfills": ["projects/demo/src/polyfills.ts"],
             "tsConfig": "projects/demo/tsconfig.app.json",
             "baseHref": "/ng-recaptcha/",
             "assets": ["projects/demo/src/favicon.ico", "projects/demo/src/images"],
             "styles": ["projects/demo/src/styles.css"],
             "scripts": [],
-            "vendorChunk": true,
             "extractLicenses": false,
-            "buildOptimizer": false,
             "sourceMap": true,
             "optimization": false,
-            "namedChunks": true
+            "namedChunks": true,
+            "browser": "projects/demo/src/app/demo-wrapper/demo-wrapper.main.ts"
           },
           "configurations": {
             "production": {
@@ -70,8 +70,6 @@
               "sourceMap": false,
               "namedChunks": false,
               "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",

diff --git a/package.json b/package.json
@@ -29,35 +29,35 @@
   },
   "peerDependencies": {},
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.0.0",
-    "@angular-eslint/builder": "17.0.1",
-    "@angular-eslint/eslint-plugin": "17.0.1",
-    "@angular-eslint/eslint-plugin-template": "17.0.1",
-    "@angular-eslint/schematics": "17.0.1",
-    "@angular-eslint/template-parser": "17.0.1",
-    "@angular/animations": "^17.0.1",
-    "@angular/cdk": "^17.0.0",
-    "@angular/cli": "^17.0.0",
-    "@angular/common": "^17.0.1",
-    "@angular/compiler": "^17.0.1",
-    "@angular/compiler-cli": "^17.0.1",
-    "@angular/core": "^17.0.1",
-    "@angular/forms": "^17.0.1",
-    "@angular/material": "^17.0.0",
-    "@angular/platform-browser": "^17.0.1",
-    "@angular/platform-browser-dynamic": "^17.0.1",
-    "@angular/router": "^17.0.1",
+    "@angular-devkit/build-angular": "^18.0.1",
+    "@angular-eslint/builder": "18.0.0-alpha.1",
+    "@angular-eslint/eslint-plugin": "18.0.0-alpha.1",
+    "@angular-eslint/eslint-plugin-template": "18.0.0-alpha.1",
+    "@angular-eslint/schematics": "18.0.0-alpha.1",
+    "@angular-eslint/template-parser": "18.0.0-alpha.1",
+    "@angular/animations": "^18.0.0",
+    "@angular/cdk": "^18.0.0",
+    "@angular/cli": "^18.0.1",
+    "@angular/common": "^18.0.0",
+    "@angular/compiler": "^18.0.0",
+    "@angular/compiler-cli": "^18.0.0",
+    "@angular/core": "^18.0.0",
+    "@angular/forms": "^18.0.0",
+    "@angular/material": "^18.0.0",
+    "@angular/platform-browser": "^18.0.0",
+    "@angular/platform-browser-dynamic": "^18.0.0",
+    "@angular/router": "^18.0.0",
     "@cypress/schematic": "2.4.0",
     "@types/core-js": "^2.5.4",
     "@types/jasmine": "^3.8.1",
     "@types/node": "^12",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
     "conventional-changelog-cli": "^2.1.1",
     "conventional-github-releaser": "^3.1.5",
     "coveralls": "^3.1.1",
     "cypress": "^11.2.0",
-    "eslint": "^8.53.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-deprecation": "^2.0.0",
     "eslint-plugin-jest": "^27.6.0",
@@ -74,12 +74,12 @@
     "karma-jasmine": "^4.0.1",
     "karma-jasmine-html-reporter": "^1.7.0",
     "lint-staged": "^11.0.1",
-    "ng-packagr": "^17.0.0",
+    "ng-packagr": "^18.0.0",
     "prettier": "^2.3.2",
     "rimraf": "^3.0.2",
     "rxjs": "^6.5.3",
     "ts-node": "^10.8.1",
-    "typescript": "^5.2.2",
+    "typescript": "^5.4.5",
     "typescript-eslint": "^0.0.1-alpha.0",
     "zone.js": "~0.14.2"
   }

diff --git a/projects/demo/src/app/demo-wrapper/demo-wrapper.module.ts b/projects/demo/src/app/demo-wrapper/demo-wrapper.module.ts
@@ -1,6 +1,6 @@
 import { LayoutModule } from "@angular/cdk/layout";
 import { APP_INITIALIZER, NgModule } from "@angular/core";
-import { HttpClientModule } from "@angular/common/http";
+import { provideHttpClient, withInterceptorsFromDi } from "@angular/common/http";
 import { BrowserModule } from "@angular/platform-browser";
 
 import { MatButtonModule } from "@angular/material/button";
@@ -29,6 +29,7 @@ function appLoadFactory(config: ConfigService) {
 @NgModule({
   bootstrap: [DemoWrapperComponent],
   declarations: [DemoWrapperComponent],
+  exports: [DemoWrapperComponent],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
@@ -45,9 +46,7 @@ function appLoadFactory(config: ConfigService) {
     MatRadioModule,
     LayoutModule,
     DemoWrapperRoutingModule,
-    HttpClientModule,
   ],
-  exports: [DemoWrapperComponent],
   providers: [
     { provide: NAV_LINKS, useValue: navLinks },
     {
@@ -56,6 +55,7 @@ function appLoadFactory(config: ConfigService) {
       deps: [ConfigService],
       multi: true,
     },
+    provideHttpClient(withInterceptorsFromDi()),
   ],
 })
 export class DemoWrapperModule {}
diff --git a/tsconfig.json b/tsconfig.json
@@ -4,12 +4,12 @@
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
+    "esModuleInterop": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
     "declaration": false,
     "strictNullChecks": true,
-    "downlevelIteration": true,
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,