chore: update support for Angular 17 and ng-bootstrap 16 (#2760)

Co-authored-by: imagoiq <[email protected]>
swisspost · Mar 13, 2024 · d892db0 · d892db0
1 parent 981ea81
commit d892db0
Show file tree

Hide file tree

Showing 20 changed files with 4,733 additions and 5,499 deletions.
diff --git a/.changeset/great-jobs-attend.md b/.changeset/great-jobs-attend.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': major
+---
+
+Added support for Angular 17 and ng-bootstrap 16.
diff --git a/.changeset/orange-tigers-punch.md b/.changeset/orange-tigers-punch.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components-angular': major
+---
+
+Added support for Angular 17.
diff --git a/.changeset/tall-ravens-ring.md b/.changeset/tall-ravens-ring.md
@@ -0,0 +1,7 @@
+---
+'@swisspost/design-system-demo': patch
+'@swisspost/design-system-components-angular-workspace': patch
+'@swisspost/design-system-intranet-header-workspace': patch
+---
+
+Updated Angular to version 17.
diff --git a/packages/components-angular/angular.json b/packages/components-angular/angular.json
@@ -100,18 +100,18 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "consumer-app:build:production"
+              "buildTarget": "consumer-app:build:production"
             },
             "development": {
-              "browserTarget": "consumer-app:build:development"
+              "buildTarget": "consumer-app:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "consumer-app:build"
+            "buildTarget": "consumer-app:build"
           }
         },
         "test": {

diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json
@@ -10,40 +10,39 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "16.2.12",
-    "@angular/common": "16.2.12",
-    "@angular/compiler": "16.2.12",
-    "@angular/core": "16.2.12",
-    "@angular/forms": "16.2.12",
-    "@angular/platform-browser": "16.2.12",
-    "@angular/platform-browser-dynamic": "16.2.12",
-    "@angular/router": "16.2.12",
+    "@angular/animations": "17.2.4",
+    "@angular/common": "17.2.4",
+    "@angular/compiler": "17.2.4",
+    "@angular/core": "17.2.4",
+    "@angular/forms": "17.2.4",
+    "@angular/platform-browser": "17.2.4",
+    "@angular/platform-browser-dynamic": "17.2.4",
+    "@angular/router": "17.2.4",
     "@swisspost/design-system-styles": "workspace:6.6.4",
     "@swisspost/design-system-components": "workspace:2.1.0",
     "rxjs": "7.8.1",
     "tslib": "2.6.2",
     "zone.js": "0.14.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "16.2.12",
-    "@angular-eslint/builder": "16.3.1",
-    "@angular-eslint/eslint-plugin": "16.3.1",
-    "@angular-eslint/eslint-plugin-template": "16.3.1",
-    "@angular-eslint/schematics": "16.3.1",
-    "@angular-eslint/template-parser": "16.3.1",
-    "@angular/cli": "16.2.12",
-    "@angular/compiler-cli": "16.2.12",
+    "@angular-devkit/build-angular": "17.2.3",
+    "@angular-eslint/builder": "17.2.1",
+    "@angular-eslint/eslint-plugin": "17.2.1",
+    "@angular-eslint/eslint-plugin-template": "17.2.1",
+    "@angular-eslint/template-parser": "17.2.1",
+    "@angular/cli": "17.2.3",
+    "@angular/compiler-cli": "17.2.4",
     "@cypress/schematic": "2.5.1",
-    "@typescript-eslint/eslint-plugin": "5.62.0",
-    "@typescript-eslint/parser": "5.62.0",
+    "@typescript-eslint/eslint-plugin": "7.2.0",
+    "@typescript-eslint/parser": "7.2.0",
     "cypress": "13.6.4",
     "eslint": "8.56.0",
     "karma": "6.4.2",
     "karma-chrome-launcher": "3.2.0",
     "karma-coverage": "2.2.1",
     "karma-jasmine": "5.1.0",
     "karma-jasmine-html-reporter": "2.1.0",
-    "ng-packagr": "16.2.3",
-    "typescript": "4.9.5"
+    "ng-packagr": "17.2.0",
+    "typescript": "5.3.3"
   }
 }
diff --git a/packages/components-angular/projects/components/package.json b/packages/components-angular/projects/components/package.json
@@ -21,8 +21,8 @@
     "tslib": "2.6.2"
   },
   "peerDependencies": {
-    "@angular/common": "^16.0.0",
-    "@angular/core": "^16.0.0",
+    "@angular/common": "^16.0.0 || ^17.0.0",
+    "@angular/core": "^16.0.0 || ^17.0.0",
     "@swisspost/design-system-components": "workspace:2.1.0"
   },
   "sideEffects": false

diff --git a/packages/demo/angular.json b/packages/demo/angular.json
@@ -76,18 +76,18 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "design-system-demo:build"
+            "buildTarget": "design-system-demo:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "design-system-demo:build:production"
+              "buildTarget": "design-system-demo:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "design-system-demo:build"
+            "buildTarget": "design-system-demo:build"
           }
         },
         "test": {

diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -12,17 +12,17 @@
     "lint": "ng lint"
   },
   "dependencies": {
-    "@angular/animations": "16.2.12",
-    "@angular/cdk": "16.2.14",
-    "@angular/common": "16.2.12",
-    "@angular/compiler": "16.2.12",
-    "@angular/core": "16.2.12",
-    "@angular/forms": "16.2.12",
-    "@angular/localize": "16.2.12",
-    "@angular/platform-browser": "16.2.12",
-    "@angular/platform-browser-dynamic": "16.2.12",
-    "@angular/router": "16.2.12",
-    "@ng-bootstrap/ng-bootstrap": "15.1.2",
+    "@angular/animations": "17.2.4",
+    "@angular/cdk": "17.2.2",
+    "@angular/common": "17.2.4",
+    "@angular/compiler": "17.2.4",
+    "@angular/core": "17.2.4",
+    "@angular/forms": "17.2.4",
+    "@angular/localize": "17.2.4",
+    "@angular/platform-browser": "17.2.4",
+    "@angular/platform-browser-dynamic": "17.2.4",
+    "@angular/router": "17.2.4",
+    "@ng-bootstrap/ng-bootstrap": "16.0.0",
     "@popperjs/core": "2.11.8",
     "@swimlane/ngx-datatable": "20.1.0",
     "@swisspost/design-system-intranet-header": "workspace:5.0.11",
@@ -38,22 +38,21 @@
     "zone.js": "0.14.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "16.2.12",
-    "@angular-eslint/builder": "16.3.1",
-    "@angular-eslint/eslint-plugin": "16.3.1",
-    "@angular-eslint/eslint-plugin-template": "16.3.1",
-    "@angular-eslint/schematics": "16.3.1",
-    "@angular-eslint/template-parser": "16.3.1",
-    "@angular/cli": "16.2.12",
-    "@angular/compiler-cli": "16.2.12",
-    "@angular/elements": "16.2.12",
-    "@angular/language-service": "16.2.12",
+    "@angular-devkit/build-angular": "17.2.3",
+    "@angular-eslint/builder": "17.2.1",
+    "@angular-eslint/eslint-plugin": "17.2.1",
+    "@angular-eslint/eslint-plugin-template": "17.2.1",
+    "@angular-eslint/template-parser": "17.2.1",
+    "@angular/cli": "17.2.3",
+    "@angular/compiler-cli": "17.2.4",
+    "@angular/elements": "17.2.4",
+    "@angular/language-service": "17.2.4",
     "@types/jasmine": "5.1.4",
     "@types/jasminewd2": "2.0.13",
     "@types/node": "18.17.19",
-    "@typescript-eslint/eslint-plugin": "6.20.0",
-    "@typescript-eslint/parser": "6.20.0",
-    "eslint": "8.56.0",
+    "@typescript-eslint/eslint-plugin": "6.21.0",
+    "@typescript-eslint/parser": "6.21.0",
+    "eslint": "8.57.0",
     "jasmine-core": "5.1.1",
     "jasmine-marbles": "0.9.2",
     "jasmine-spec-reporter": "7.0.0",
@@ -68,7 +67,7 @@
     "sass": "1.70.0",
     "sockjs": "0.3.24",
     "ts-node": "10.9.2",
-    "typescript": "5.1.6",
+    "typescript": "5.3.3",
     "webpack": "5.90.1"
   }
-}
+}
diff --git a/packages/demo/src/app/bootstrap/components/card/post-card-demo/post-card-demo.component.html b/packages/demo/src/app/bootstrap/components/card/post-card-demo/post-card-demo.component.html
@@ -107,7 +107,7 @@ <h3 class="d-inline font-weight-bold text-large m-0">Login & Sicherheit</h3>
           </div>
           <div class="list-group list-group-flush">
             <div class="list-group-item d-flex">
-              <p class="mb-0">hans.muster@post.ch</p>
+              <p class="mb-0">hans.muster&#64;post.ch</p>
               <a href="#" class="ms-auto"><span class="pi pi-3193"></span></a>
             </div>
           </div>

diff --git a/packages/demo/src/app/bootstrap/components/tables/tables-demo/tables-demo.component.html b/packages/demo/src/app/bootstrap/components/tables/tables-demo/tables-demo.component.html
@@ -12,18 +12,18 @@
       <th scope="row">1</th>
       <td>Mark</td>
       <td>Otto</td>
-      <td>@mdo</td>
+      <td>&#64;mdo</td>
     </tr>
     <tr>
       <th scope="row">2</th>
       <td>Jacob</td>
       <td>Thornton</td>
-      <td>@fat</td>
+      <td>&#64;fat</td>
     </tr>
     <tr>
       <th scope="row">3</th>
       <td colspan="2">Larry the Bird</td>
-      <td>@twitter</td>
+      <td>&#64;twitter</td>
     </tr>
   </tbody>
 </table>
diff --git a/packages/demo/src/app/common/ngb-localization/ngb-localization.component.html b/packages/demo/src/app/common/ngb-localization/ngb-localization.component.html
@@ -8,9 +8,9 @@ <h3 class="bold mt-5">Internationalization</h3>
 
   <p class="light font-curve-regular mt-4">
     The internationalization of this content is done using the
-    <code>@angular/localize</code>
+    <code>&#64;angular/localize</code>
     package. To do this, make sure to add
-    <code>import '@angular/localize/init';</code>
+    <code>import '&#64;angular/localize/init';</code>
     to your
     <code>polyfills.ts</code>
     file, then use the implementation below to enable translations: