feat(starter): update starter to angular 15

NationalBankBelgium · May 8, 2024 · 13b992f · 13b992f
1 parent a0ef5ef
commit 13b992f
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 41 deletions.
diff --git a/starter/angular.json b/starter/angular.json
@@ -195,6 +195,7 @@
     }
   },
   "cli": {
-    "schematicCollections": ["@angular-eslint/schematics"]
+    "schematicCollections": ["@angular-eslint/schematics"],
+    "analytics": false
   }
 }
diff --git a/starter/base.spec.ts b/starter/base.spec.ts
@@ -31,22 +31,6 @@ globalThis["ENV"] = "development";
 import { getTestBed } from "@angular/core/testing";
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from "@angular/platform-browser-dynamic/testing";
 
-// tslint:disable:completed-docs bool-param-default
-declare const require: {
-	context(
-		path: string,
-		deep?: boolean,
-		filter?: RegExp
-	): {
-		keys(): string[];
-		<T>(id: string): T;
-	};
-};
 getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
-    teardown: { destroyAfterEach: false }
+	teardown: { destroyAfterEach: false }
 });
-
-// Then we find all the tests.
-const context = require.context("./src", true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().forEach(context);
diff --git a/starter/package.json b/starter/package.json
@@ -105,23 +105,23 @@
     ]
   },
   "dependencies": {
-    "@angular/animations": "^14.3.0",
-    "@angular/cdk": "^14.2.7",
-    "@angular/cli": "^14.2.13",
-    "@angular/common": "^14.3.0",
-    "@angular/compiler": "^14.3.0",
-    "@angular/compiler-cli": "^14.3.0",
-    "@angular/core": "^14.3.0",
-    "@angular/flex-layout": "^14.0.0-beta.41",
-    "@angular/forms": "^14.3.0",
-    "@angular/material": "^14.2.7",
-    "@angular/platform-browser": "^14.3.0",
-    "@angular/platform-browser-dynamic": "^14.3.0",
-    "@angular/platform-server": "^14.3.0",
-    "@angular/router": "^14.3.0",
-    "@nationalbankbelgium/code-style": "^1.7.0",
-    "@nationalbankbelgium/stark-core": "next",
+    "@angular/animations": "^15.2.10",
+    "@angular/cdk": "^15.2.9",
+    "@angular/cli": "^15.2.11",
+    "@angular/common": "^15.2.10",
+    "@angular/compiler": "^15.2.10",
+    "@angular/compiler-cli": "^15.2.10",
+    "@angular/core": "^15.2.10",
+    "@angular/flex-layout": "^15.0.0-beta.42",
+    "@angular/forms": "^15.2.10",
+    "@angular/material": "^15.2.9",
+    "@angular/platform-browser": "^15.2.10",
+    "@angular/platform-browser-dynamic": "^15.2.10",
+    "@angular/platform-server": "^15.2.10",
+    "@angular/router": "^15.2.10",
+    "@nationalbankbelgium/code-style": "^1.10.0",
     "@nationalbankbelgium/stark-ui": "next",
+    "@nationalbankbelgium/stark-core": "next",
     "@uirouter/visualizer": "~7.2.1",
     "core-js": "~3.21.1",
     "eligrey-classlist-js-polyfill": "~1.2.20180112",
@@ -134,7 +134,7 @@
   },
   "devDependencies": {
     "@compodoc/compodoc": "1.1.19",
-    "@nationalbankbelgium/eslint-config": "^14.0.0-rc.0",
+    "@nationalbankbelgium/eslint-config": "^15.0.0",
     "@nationalbankbelgium/stark-build": "next",
     "@nationalbankbelgium/stark-testing": "next",
     "@types/core-js": "~2.5.4",
@@ -150,6 +150,6 @@
     "npm-run-all": "~4.1.5",
     "parse5": "~6.0.1",
     "ts-node": "~10.7.0",
-    "typescript": "~4.6.4"
+    "typescript": "~4.9.5"
   }
 }
diff --git a/starter/src/app/app.module.ts b/starter/src/app/app.module.ts
@@ -8,10 +8,10 @@ import { EffectsModule } from "@ngrx/effects";
 import { storeLogger } from "ngrx-store-logger";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { MatIconModule, MatIconRegistry } from "@angular/material/icon";
-import { MatButtonModule } from "@angular/material/button";
+import { MatLegacyButtonModule as MatButtonModule } from "@angular/material/legacy-button";
 import { MatButtonToggleModule } from "@angular/material/button-toggle";
-import { MatCardModule } from "@angular/material/card";
-import { MatTooltipModule } from "@angular/material/tooltip";
+import { MatLegacyCardModule as MatCardModule } from "@angular/material/legacy-card";
+import { MatLegacyTooltipModule as MatTooltipModule } from "@angular/material/legacy-tooltip";
 import { DateAdapter } from "@angular/material/core";
 import { filter } from "rxjs/operators";
 

diff --git a/starter/src/styles/_theme.scss b/starter/src/styles/_theme.scss
@@ -9,5 +9,14 @@ Import the local variables file first to set the correct variables, see:
 @use "@angular/material" as mat;
 @use "@nationalbankbelgium/stark-ui" as stark-ui;
 
-@include mat.core();
+// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
+//  The following line adds:
+//    1. Default typography styles for all components
+//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
+//  If you specify typography styles for the components you use elsewhere, you should delete this line.
+//  If you don't need the default component typographies but still want the hierarchy styles,
+//  you can delete this line and instead use:
+//    `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
+@include mat.all-legacy-component-typographies();
+@include mat.legacy-core();
 @include stark-ui.set-stark-ui-styles();
diff --git a/starter/tsconfig.json b/starter/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "extends": "@nationalbankbelgium/code-style/tsconfig/4.6.x/ng14",
+  "extends": "@nationalbankbelgium/code-style/tsconfig/4.9.x/ng15",
   "compilerOptions": {
     "baseUrl": "./src",
     "outDir": "./dist",