Update to Angular 17 and related packages (#236)

* build: prerelease 13.0.1-next.0 * BREAKING CHANGE: update to angular 17 #232 * fix: changes from clarity update and docs * fix: update @schematics/angular for core ui v17.3.8 #232# * fix: update @schematics/angular for core ui v17.3.8 #232 * BREAKING CHANGE: remove @clr/icons and replace it with the icons from @cds/core #64 * fix: add missing icon #64 * fix: styles of clarity after update #232 * fix: add @cds/core to map-ol for icon #64 * build: update other dependencies #232 * fix: schematics create app not standalone #232 * build: fix compodoc version no semserver * BREAKING CHANGE: set node and npm compatibility for angular 17 * docs: set changelog header * build: prerelease 13.0.1-next.1 * build: prerelease 14.0.0-next.0 * fix: spawn options * fix: shell command * feat: replace core-ui custom builder with ng build copy files and tsc script * feat: remove not used cpx and update licenses.json * fix: set correct icon shapes * docs: update how to add Clarity --------- Co-authored-by: lucas-angermann <[email protected]>
dlr-eoc · Jul 17, 2024 · 94c432b · 94c432b
1 parent 55e4fe6
commit 94c432b
Show file tree

Hide file tree

Showing 115 changed files with 4,771 additions and 8,151 deletions.
diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
@@ -12,7 +12,7 @@ jobs:
         uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 20.10.0
+          node-version: 20.15.1
 
       # This builds the project for projects/demo-maps and outputs the result to the 'dist' folder.
       # https://github.com/angular/angular-cli/issues/9016#issuecomment-526825531

diff --git a/.github/workflows/package-main-release.yml b/.github/workflows/package-main-release.yml
@@ -68,7 +68,7 @@ jobs:
           git checkout ${{ needs.checkTitelTag.outputs.VERSION_TAG }}
       - uses: actions/setup-node@v4
         with:
-          node-version: 20.10.0
+          node-version: 20.15.1
       - run: rm -f .npmrc
       - uses: ./.github/actions/check-tag-on-npm
         with:
@@ -88,7 +88,7 @@ jobs:
           git checkout ${{ needs.checkTitelTag.outputs.VERSION_TAG }}
       - uses: actions/setup-node@v4
         with:
-          node-version: 20.10.0
+          node-version: 20.15.1
       - name: build
         run: |
            npm ci
@@ -146,7 +146,7 @@ jobs:
           path: dist
       - uses: actions/setup-node@v4
         with:
-          node-version: 20.10.0
+          node-version: 20.15.1
           registry-url: https://npm.pkg.github.com/
           scope: "@dlr-eoc"
       - run: npm ci
@@ -177,7 +177,7 @@ jobs:
           path: dist
       - uses: actions/setup-node@v4
         with:
-          node-version: 20.10.0
+          node-version: 20.15.1
           registry-url: https://registry.npmjs.org/
           scope: "@dlr-eoc"
       - run: npm ci

diff --git a/.github/workflows/package-pre-release.yml b/.github/workflows/package-pre-release.yml
@@ -16,7 +16,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 20.10.0
+          node-version: 20.15.1
       - run: rm -f .npmrc
       - uses: ./.github/actions/check-tag-on-npm
         with:
@@ -41,7 +41,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 20.10.0
+          node-version: 20.15.1
       - uses: ./.github/actions/test
       - name: build
         run: |
@@ -65,7 +65,7 @@ jobs:
           path: dist
       - uses: actions/setup-node@v4
         with:
-          node-version: 20.10.0
+          node-version: 20.15.1
           registry-url: https://npm.pkg.github.com/
           scope: "@dlr-eoc"
       - run: npm ci
@@ -96,7 +96,7 @@ jobs:
           path: dist
       - uses: actions/setup-node@v4
         with:
-          node-version: 20.10.0
+          node-version: 20.15.1
           registry-url: https://registry.npmjs.org/
           scope: "@dlr-eoc"
       - run: npm ci

diff --git a/.github/workflows/test-build.yml b/.github/workflows/test-build.yml
@@ -19,6 +19,6 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 20.10.0
+          node-version: 20.15.1
       - uses: ./.github/actions/test
       - uses: ./.github/actions/build
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,13 @@
-# [13.X.X](https://github.com/dlr-eoc/ukis-frontend-libraries/tree/v13.X.X) (2024-07-10) (map-cesium)
+# [x.y.z]() (YYYY-mm-dd) (map-cesium, angular update)
+
+### Breaking Changes
+ - Update angular from `^16.2.3` to `^17.3.11` [Issue #232](https://github.com/dlr-eoc/ukis-frontend-libraries/issues/232)
+ - Upadte @clr/angular from `^15.12.0` to `^17.2.1` [Issue #232](https://github.com/dlr-eoc/ukis-frontend-libraries/issues/232)
+ - Upadte @clr/ui from `^15.12.0` to `^17.2.1` [Issue #232](https://github.com/dlr-eoc/ukis-frontend-libraries/issues/232)
+   Clients now have to set the clarity theme as described in their documentation ([Step 3: Set the Theme](https://clarity.design/pages/developing))
+ - Remove `@clr/icons` and replace it with the icons from `@cds/core`.
+   Now each icon that is used must be imported into the component where it is in the template. See [clarity documentation icons](https://clarity.design/documentation/icons). Use `import '@cds/core/icon/register.js';` in a main file of the application so that it is used only once.
+ - Set node and npm compatibility for angular 17 (node: 20.15.1 and npm: 10.7.0)
 
 ### Features
 * **@dlr-eoc/map-cesium:**

diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md
@@ -78,7 +78,8 @@ Example:
             "@angular/core": "<main version>",
             "@angular/cdk": "<main version>",
             "@clr/angular": "<main version>",
-            "@clr/icons": "<main version>",
+            "@cds/core": "<main version>",
+            "@clr/ui": "<main version>",
             "rxjs": "<main version>",
             "md5": "<main version>"
         },
@@ -173,7 +174,7 @@ Whereby after semantic versioning the following order exists: 7.2.0 < 7.3.0-alph
 
 To create a new prerelease, you only have to create a new version from your current branch 
 - `npm version prerelease --preid=next -m "prerelease message" --workspace=projects --include-workspace-root` (premajor | preminor | prepatch). Append `--no-git-tag-version` to `npm version ...` if you want to skip creating a tag.
-- run `node scripts/library/index.js --set-source` to sync all versions and run npm install to regenerate `package-lock.json` (If something failed during the npm version, remove the local tag and create a new one. `git tag -d <version> && git tag -a <(v)version> -m "<description>`).
+- run `node scripts/library/index.js --set-source` to sync all versions and run `npm i --workspaces --include-workspace-root` to regenerate `package-lock.json` (If something failed during the npm version, remove the local tag and create a new one. `git tag -d <version> && git tag -a <(v)version> -m "<description>`).
 And then `git push origin --tags` which will trigger the [Pre Release](.github/workflows/pre-release-package.yml) workflow.
 **Before doing this you should [locally test and build](#further-you-can-test-and-build-locally)!!!** to prevent failed workflows but created tags.
 

diff --git a/TUTORIALS.md b/TUTORIALS.md
@@ -27,19 +27,9 @@ cd project-tutorial-map
 - At the moment Clarity does not support angular schematics ([github ng add issue](https://github.com/vmware-clarity/ng-clarity/issues/120)). Therefore Clarity has to be installed manually. For the versions also see ukis-frontend-libraries [package.json](package.json)
 - Run 
 ```
-npm install @cds/core@<version> @clr/angular@<version> @clr/ui@<version> @clr/icons@<version>
-```
-- Add Clarity styles and scripts in the angular.json:
-```
-  "styles": [
-      "node_modules/@clr/ui/clr-ui.min.css",
-      "node_modules/@clr/icons/clr-icons.min.css"
-      ... any other styles
-            ],
-  "scripts": [
-      "node_modules/@clr/icons/clr-icons.min.js"
-            ]
+npm install @cds/core@<version> @clr/angular@<version> @clr/ui@<version>
 ```
+
 - Add the Clarity module and icons inside the app.module.ts: 
 ``` import { NgModule } from "@angular/core";
       import { BrowserModule } from "@angular/platform-browser";
@@ -63,6 +53,11 @@ npm install @cds/core@<version> @clr/angular@<version> @clr/ui@<version> @clr/ic
       })
       export class AppModule { }
 ```
+
+- Set Clarity Theme (index.html)
+```
+<body cds-theme="light" />
+```
 - For more information see [Adding Clarity to an Angular project](https://clarity.design/documentation/get-started#seedProjectAngular)
 
 
@@ -191,7 +186,7 @@ More information about this library can be found [in the layer-control library f
 <clr-vertical-nav [clrVerticalNavCollapsible]="true" [clr-nav-level]="2" class="right">
 
   <clr-vertical-nav-group [clrVerticalNavGroupExpanded]="true" class="layers">
-    <clr-icon shape="world" title="Overlays" clrVerticalNavIcon></clr-icon>
+    <cds-icon shape="world" title="Overlays" clrVerticalNavIcon></cds-icon>
     Overlays
     <clr-vertical-nav-group-children class="padding title-ellipsis">
       <ukis-layer-control [layersSvc]="layerSvc" [mapStateSvc]="mapStateSvc" [layerfilter]="'Overlays'">
@@ -200,15 +195,15 @@ More information about this library can be found [in the layer-control library f
   </clr-vertical-nav-group>
 
   <clr-vertical-nav-group [clrVerticalNavGroupExpanded]="true" class="layers">
-    <clr-icon shape="layers" clrVerticalNavIcon title="layers"></clr-icon>
+    <cds-icon shape="layers" clrVerticalNavIcon title="layers"></cds-icon>
     Layers
     <clr-vertical-nav-group-children class="padding title-ellipsis">
       <ukis-layer-control [layersSvc]="layerSvc" [mapStateSvc]="mapStateSvc"></ukis-layer-control>
     </clr-vertical-nav-group-children>
   </clr-vertical-nav-group>
 
   <clr-vertical-nav-group [clrVerticalNavGroupExpanded]="true" class="layers">
-    <clr-icon shape="world" title="Baselayers" clrVerticalNavIcon></clr-icon>
+    <cds-icon shape="world" title="Baselayers" clrVerticalNavIcon></cds-icon>
     Baselayers
     <clr-vertical-nav-group-children class="padding title-ellipsis">
       <ukis-base-layer-control [layersSvc]="layerSvc" [mapStateSvc]="mapStateSvc"></ukis-base-layer-control>

diff --git a/angular.json b/angular.json
@@ -66,7 +66,7 @@
       "prefix": "ukis",
       "architect": {
         "build": {
-          "builder": "./projects/core-ui/core-ui-packagr:build",
+          "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
             "tsConfig": "projects/core-ui/tsconfig.lib.json",
             "project": "projects/core-ui/ng-package.json"
@@ -367,14 +367,8 @@
             "styles": [
               "node_modules/@fontsource/metropolis/all.css",
               "node_modules/@fontsource/noto-sans/index.css",
-              "node_modules/@clr/icons/clr-icons.min.css",
-              "node_modules/@clr/ui/clr-ui.min.css",
               "projects/demo-maps/src/styles.scss"
             ],
-            "scripts": [
-              "node_modules/@webcomponents/custom-elements/custom-elements.min.js",
-              "node_modules/@clr/icons/clr-icons.min.js"
-            ],
             "vendorChunk": true,
             "extractLicenses": false,
             "buildOptimizer": false,
@@ -426,18 +420,18 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "demo-maps:build"
+            "buildTarget": "demo-maps:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "demo-maps:build:production"
+              "buildTarget": "demo-maps:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "demo-maps:build"
+            "buildTarget": "demo-maps:build"
           }
         },
         "test": {
@@ -505,14 +499,8 @@
               }
             ],
             "styles": [
-              "node_modules/@clr/icons/clr-icons.min.css",
-              "node_modules/@clr/ui/clr-ui.min.css",
               "projects/demo-auth/src/styles.scss"
             ],
-            "scripts": [
-              "node_modules/@webcomponents/custom-elements/custom-elements.min.js",
-              "node_modules/@clr/icons/clr-icons.min.js"
-            ],
             "vendorChunk": true,
             "extractLicenses": false,
             "buildOptimizer": false,
@@ -554,18 +542,18 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "demo-auth:build"
+            "buildTarget": "demo-auth:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "demo-auth:build:production"
+              "buildTarget": "demo-auth:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "demo-auth:build"
+            "buildTarget": "demo-auth:build"
           }
         },
         "test": {