diff --git a/.github/workflows/angular.yml b/.github/workflows/angular.yml index a653d44bc..37f12c8b1 100644 --- a/.github/workflows/angular.yml +++ b/.github/workflows/angular.yml @@ -53,8 +53,8 @@ jobs: working-directory: ./angular run: | npm install -g yarn - # workaround _lruCache is not a constructor issue https://stackoverflow.com/a/79581379/4292075 - rm -rf node_modules/@babel/ + # uncomment the following line to force-clean node_modules/, e.g. in case of cache issues + # rm -rf node_modules/ yarn install yarn run test:coverage yarn run build:prod diff --git a/angular/README.md b/angular/README.md index 2d015ec7e..66ce42edd 100644 --- a/angular/README.md +++ b/angular/README.md @@ -259,16 +259,87 @@ See also [Runtime errors when using buildOptimizer. JIT compilation broken](http ### Update Angular Material 17 +migrate to mdc components, see https://v15.material.angular.dev/guide/mdc-migration + +``` +ng generate @angular/material:mdc-migration +? Limit the migration to a specific directory? (Enter the relative path such as 'src/app/shared' or leave blank for all directories) src +? What components do you want to migrate? Button, Card, Checkbox, Chips, Dialog, Form Field, Input, Select, Autocomplete, List, Menu, Paginator, Progress Bar, Progress Spinner, +Radio, Slide Toggle, Slider, Snack Bar, Table, Tabs, Tooltip + Limiting migration to: src + Migrating components: + button + card + checkbox + chips + dialog + form-field + list + menu + paginator + progress-bar + progress-spinner + radio + slide-toggle + slider + snack-bar + table + tabs + tooltip + autocomplete + input + option + optgroup + select + Migrating project: angkor-ui + Successfully migrated the project. +UPDATE src/app/areas/area-tree.component.html (3660 bytes) +UPDATE src/app/clouds/cloud/cloud.component.html (584 bytes) +UPDATE src/app/dishes/add/dish-add.component.html (1520 bytes) +UPDATE src/app/dishes/detail/dish-detail.component.html (2985 bytes) +UPDATE src/app/dishes/edit/dish-edit.component.html (4906 bytes) +UPDATE src/app/dishes/list/dishes.component.html (3948 bytes) +UPDATE src/app/admin/events/events.component.html (1546 bytes) +UPDATE src/app/links/feeds/feed.component.html (1842 bytes) +UPDATE src/app/home/home.component.html (2297 bytes) +UPDATE src/app/locatables/search/location-search.component.html (6926 bytes) +UPDATE src/app/admin/metrics/metrics.component.html (1322 bytes) +UPDATE src/app/myprofile/my-profile.component.html (1272 bytes) +UPDATE src/app/notes/list/notes.component.html (3432 bytes) +UPDATE src/app/places/add/place-add.component.html (1353 bytes) +UPDATE src/app/places/detail/place-detail.component.html (3007 bytes) +UPDATE src/app/places/edit/place-edit.component.html (5493 bytes) +UPDATE src/app/radio/radio.component.html (5712 bytes) +UPDATE src/app/myprofile/remove-me.component.html (640 bytes) +UPDATE src/app/shared/components/tag-input/tag-input.component.html (1137 bytes) +UPDATE src/app/shared/components/common.component.scss (1421 bytes) +UPDATE src/app/home/home.component.scss (1217 bytes) +UPDATE src/styles.scss (7429 bytes) +UPDATE src/app/app.module.ts (7939 bytes) +UPDATE src/app/shared/modules/material.module.ts (2870 bytes) +UPDATE src/app/locatables/search/location-search.component.ts (12504 bytes) +UPDATE src/app/shared/modules/imagine/file-upload/file-upload.component.ts (6364 bytes) +UPDATE src/app/locatables/location-details.component.ts (4636 bytes) +UPDATE src/app/shared/components/tag-input/tag-input.component.ts (5546 bytes) +UPDATE src/app/dishes/detail/dish-detail.component.ts (2441 bytes) +UPDATE src/app/notes/list/notes.component.ts (8573 bytes) +UPDATE src/app/areas/area-tree.component.ts (2553 bytes) +UPDATE src/app/places/detail/place-detail.component.ts (2519 bytes) +UPDATE src/app/myprofile/my-profile.component.ts (2710 bytes) +UPDATE src/app/notes/detail/note-details.component.ts (5022 bytes) +UPDATE src/app/shared/components/confirm-dialog/confirm-dialog.component.ts (1765 bytes) +UPDATE src/app/shared/services/notification.service.ts (2640 bytes) +``` +Run Actual Material 17 update + ``` -$ ng update @angular/material@17 -Node.js version v25.2.1 detected. -Odd numbered Node.js versions will not enter LTS status and should not be used for production. For more information, please see https://nodejs.org/en/about/previous-releases/. +ng update @angular/material@17 Using package manager: yarn Collecting installed dependencies... Found 44 dependencies. Fetching dependency metadata from registry... -Updating package.json with dependency @angular/cdk @ "17.3.10" (was "16.2.14")... -Updating package.json with dependency @angular/material @ "17.3.10" (was "16.2.14")... + Updating package.json with dependency @angular/cdk @ "17.3.10" (was "16.2.14")... + Updating package.json with dependency @angular/material @ "17.3.10" (was "16.2.14")... UPDATE package.json (3796 bytes) ✔ Packages successfully installed. ** Executing migrations of package '@angular/cdk' ** @@ -277,17 +348,39 @@ UPDATE package.json (3796 bytes) ✓ Updated Angular CDK to version 17 -Migration completed (No changes made). + Migration completed (No changes made). ** Executing migrations of package '@angular/material' ** ❯ Updates Angular Material to v17. -Cannot update to Angular Material v17 because the project is using the legacy Material components -that have been deleted. While Angular Material v16 is compatible with Angular v17, it is recommended -to switch away from the legacy components as soon as possible because they no longer receive bug fixes, -accessibility improvements and new features. + Cannot update to Angular Material v17 because the project is using the legacy Material components + that have been deleted. While Angular Material v16 is compatible with Angular v17, it is recommended + to switch away from the legacy components as soon as possible because they no longer receive bug fixes, + accessibility improvements and new features. Read more about migrating away from legacy components: https://material.angular.io/guide/mdc-migration + + Files in the project using legacy Material components: + - /src/app/app.component.spec.ts (OK) + - /src/app/admin/metrics/metrics.component.spec.ts + - /src/app/areas/area-tree.component.spec.ts + - /src/app/dishes/detail/dish-detail.component.spec.ts + - /src/app/locatables/search/location-search.component.spec.ts + - /src/app/locatables/tours/tour-details.component.spec.ts + - /src/app/myprofile/my-profile.component.spec.ts + - /src/app/notes/detail/note-details.component.spec.ts + - /src/app/notes/list/notes.component.spec.ts + - /src/app/places/detail/place-detail.component.spec.ts + - /src/app/radio/radio.component.spec.ts + - /src/app/shared/components/confirm-dialog/confirm-dialog.component.spec.ts + - /src/app/shared/components/coordindates/input/coordinates-input.component.spec.ts + - /src/app/shared/components/tag-input/tag-input.component.spec.ts + - /src/app/shared/modules/imagine/file-upload/file-upload.component.spec.ts + - /src/app/shared/services/notification.service.spec.ts + +UPDATE package.json (3795 bytes) +✔ Packages installed successfully. + Migration completed (1 file modified). ``` diff --git a/angular/package.json b/angular/package.json index 31a98a984..1a5229f43 100644 --- a/angular/package.json +++ b/angular/package.json @@ -40,12 +40,12 @@ "//dependencies-comment-angular": "For angular compatibility to typescript, rxjs etc. check: https://github.com/angular/angular/blob/master/package.json + https://angular.io/guide/versions", "dependencies": { "@angular/animations": "^17.3.12", - "@angular/cdk": "^16.2.13", + "@angular/cdk": "^17.3.10", "@angular/common": "^17.3.12", "@angular/compiler": "^17.3.12", "@angular/core": "^17.3.12", "@angular/forms": "^17.3.12", - "@angular/material": "^16.2.13", + "@angular/material": "^17.3.10", "@angular/platform-browser": "^17.3.12", "@angular/platform-browser-dynamic": "^17.3.12", "@angular/router": "^17.3.12", diff --git a/angular/src/app/admin/events/events.component.html b/angular/src/app/admin/events/events.component.html index 4db3eda3a..09b5857cc 100644 --- a/angular/src/app/admin/events/events.component.html +++ b/angular/src/app/admin/events/events.component.html @@ -1,6 +1,6 @@
- +

💨 Topic Event Stream

diff --git a/angular/src/app/admin/metrics/metrics.component.html b/angular/src/app/admin/metrics/metrics.component.html index 9287076e1..149e2f41a 100644 --- a/angular/src/app/admin/metrics/metrics.component.html +++ b/angular/src/app/admin/metrics/metrics.component.html @@ -1,6 +1,6 @@
- +

Admin Corner

diff --git a/angular/src/app/admin/metrics/metrics.component.spec.ts b/angular/src/app/admin/metrics/metrics.component.spec.ts index 7f3e47615..0590e4cec 100644 --- a/angular/src/app/admin/metrics/metrics.component.spec.ts +++ b/angular/src/app/admin/metrics/metrics.component.spec.ts @@ -8,8 +8,8 @@ import {MetricsComponent} from '@app/admin/metrics/metrics.component'; import {MatTableModule} from '@angular/material/table'; import {RouterTestingModule} from '@angular/router/testing'; import {MatSnackBarModule} from '@angular/material/snack-bar'; -import {MatLegacySnackBar} from '@angular/material/legacy-snack-bar'; -import {MatLegacyDialog} from '@angular/material/legacy-dialog'; +import {MatSnackBar} from '@angular/material/snack-bar'; +import {MatDialog} from '@angular/material/dialog'; describe('MetricsComponent', () => { let component: MetricsComponent; @@ -21,7 +21,7 @@ describe('MetricsComponent', () => { CUSTOM_ELEMENTS_SCHEMA ], // Angular15 legacy hack - providers: [{provide: MatLegacySnackBar, useValue: {}}, {provide: MatLegacyDialog, useValue: {}}], + providers: [{provide: MatSnackBar, useValue: {}}, {provide: MatDialog, useValue: {}}], imports: [LoggerTestingModule, HttpClientTestingModule, MatIconTestingModule, MatSnackBarModule, MatTableModule, RouterTestingModule], declarations: [MetricsComponent], teardown: {destroyAfterEach: false} diff --git a/angular/src/app/app.component.spec.ts b/angular/src/app/app.component.spec.ts index e6c5e7c72..93c4bf07b 100644 --- a/angular/src/app/app.component.spec.ts +++ b/angular/src/app/app.component.spec.ts @@ -7,8 +7,8 @@ import {HttpClientTestingModule} from '@angular/common/http/testing'; import {NgxWebstorageModule} from 'ngx-webstorage'; import {MatIconTestingModule} from '@angular/material/icon/testing'; import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; -import {MatLegacySnackBar} from '@angular/material/legacy-snack-bar'; -import {MatLegacyDialog} from '@angular/material/legacy-dialog'; +import {MatSnackBar} from '@angular/material/snack-bar'; +import {MatDialog} from '@angular/material/dialog'; describe('AppComponent', () => { beforeEach(waitForAsync(() => { @@ -16,8 +16,8 @@ describe('AppComponent', () => { schemas: [CUSTOM_ELEMENTS_SCHEMA], // Angular15 legacy hack providers: [ - {provide: MatLegacySnackBar, useValue: {}}, - {provide: MatLegacyDialog, useValue: {}} + {provide: MatSnackBar, useValue: {}}, + {provide: MatDialog, useValue: {}} ], imports: [ RouterTestingModule, MatSnackBarModule, LoggerTestingModule, HttpClientTestingModule, diff --git a/angular/src/app/app.module.ts b/angular/src/app/app.module.ts index 10809130c..4471cf48b 100644 --- a/angular/src/app/app.module.ts +++ b/angular/src/app/app.module.ts @@ -29,7 +29,7 @@ import {LoadingInterceptor} from '@shared/services/loading.interceptor'; import {LocationDetailsComponent} from '@app/locatables/location-details.component'; import {LocationSearchComponent} from './locatables/search/location-search.component'; import {LoggerModule, NgxLoggerLevel} from 'ngx-logger'; -import {MAT_LEGACY_SNACK_BAR_DEFAULT_OPTIONS as MAT_SNACK_BAR_DEFAULT_OPTIONS} from '@angular/material/legacy-snack-bar'; +import {MAT_SNACK_BAR_DEFAULT_OPTIONS} from '@angular/material/snack-bar'; import {MapComponent} from './map/map.component'; import {MarkdownModule} from 'ngx-markdown'; import {MaterialModule} from '@shared/modules/material.module'; // see separate module in shared/modules @@ -55,7 +55,7 @@ import {VideoPlayerComponent} from './locatables/videos/video-player.component'; import {NgxWebstorageModule} from 'ngx-webstorage'; import {YouTubePlayerModule} from '@angular/youtube-player'; import {RadioComponent} from './radio/radio.component'; -import {MatLegacySliderModule as MatSliderModule} from '@angular/material/legacy-slider'; +import {MatSliderModule} from '@angular/material/slider'; import {RatingModule} from '@shared/modules/rating/rating.module'; import { RemoveMeComponent } from './myprofile/remove-me.component'; import { MAT_DATE_LOCALE } from '@angular/material/core'; diff --git a/angular/src/app/areas/area-tree.component.html b/angular/src/app/areas/area-tree.component.html index 79f317042..567da4c1e 100644 --- a/angular/src/app/areas/area-tree.component.html +++ b/angular/src/app/areas/area-tree.component.html @@ -1,6 +1,6 @@
- + diff --git a/angular/src/app/areas/area-tree.component.spec.ts b/angular/src/app/areas/area-tree.component.spec.ts index 22961b42c..a60014d56 100644 --- a/angular/src/app/areas/area-tree.component.spec.ts +++ b/angular/src/app/areas/area-tree.component.spec.ts @@ -15,7 +15,7 @@ import {NgxWebstorageModule} from 'ngx-webstorage'; import {MatIconTestingModule} from '@angular/material/icon/testing'; import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; import {MatTreeModule} from '@angular/material/tree'; -import {MatLegacySnackBar} from '@angular/material/legacy-snack-bar'; +import {MatSnackBar} from '@angular/material/snack-bar'; describe('AreaTreeComponent', () => { let component: AreaTreeComponent; @@ -28,7 +28,7 @@ describe('AreaTreeComponent', () => { CUSTOM_ELEMENTS_SCHEMA ], // Angular15 legacy hack - providers: [{provide: MatLegacySnackBar, useValue: {}}], + providers: [{provide: MatSnackBar, useValue: {}}], imports: [MatIconTestingModule, MatCardModule, RouterTestingModule, LoggerTestingModule, HttpClientTestingModule, MatIconModule, MatSelectModule, MatTreeModule, FormsModule, ReactiveFormsModule, MatSnackBarModule, MatInputModule, BrowserAnimationsModule, NgxWebstorageModule.forRoot()], diff --git a/angular/src/app/areas/area-tree.component.ts b/angular/src/app/areas/area-tree.component.ts index 045ba4c34..a9ae5e9e0 100644 --- a/angular/src/app/areas/area-tree.component.ts +++ b/angular/src/app/areas/area-tree.component.ts @@ -4,7 +4,7 @@ import {Component, OnInit} from '@angular/core'; import {DefaultErrorStateMatcher} from '@shared/helpers/form-helper'; import {UntypedFormBuilder, UntypedFormGroup, Validators} from '@angular/forms'; import {ListItem} from '@shared/domain/list-item'; -import {MatLegacySnackBar as MatSnackBar} from '@angular/material/legacy-snack-bar'; +import {MatSnackBar} from '@angular/material/snack-bar'; import {MatTreeNestedDataSource} from '@angular/material/tree'; import {NGXLogger} from 'ngx-logger'; import {NestedTreeControl} from '@angular/cdk/tree'; diff --git a/angular/src/app/clouds/cloud/cloud.component.html b/angular/src/app/clouds/cloud/cloud.component.html index 7c3bb6e1c..997eea151 100644 --- a/angular/src/app/clouds/cloud/cloud.component.html +++ b/angular/src/app/clouds/cloud/cloud.component.html @@ -1,6 +1,6 @@
- +

TiMaFe ❤️ Places Cloud diff --git a/angular/src/app/dishes/add/dish-add.component.html b/angular/src/app/dishes/add/dish-add.component.html index 4f9202bee..30d5d27a7 100644 --- a/angular/src/app/dishes/add/dish-add.component.html +++ b/angular/src/app/dishes/add/dish-add.component.html @@ -1,6 +1,6 @@
- + diff --git a/angular/src/app/dishes/detail/dish-detail.component.html b/angular/src/app/dishes/detail/dish-detail.component.html index 0030257df..a6fc7c01b 100644 --- a/angular/src/app/dishes/detail/dish-detail.component.html +++ b/angular/src/app/dishes/detail/dish-detail.component.html @@ -1,6 +1,6 @@
- + diff --git a/angular/src/app/dishes/detail/dish-detail.component.spec.ts b/angular/src/app/dishes/detail/dish-detail.component.spec.ts index 7e95593a8..e8df72914 100644 --- a/angular/src/app/dishes/detail/dish-detail.component.spec.ts +++ b/angular/src/app/dishes/detail/dish-detail.component.spec.ts @@ -13,7 +13,7 @@ import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; import {MarkdownModule} from 'ngx-markdown'; import {MatDatepickerModule} from '@angular/material/datepicker'; // Angular15 fix -import {MatLegacyDialog} from '@angular/material/legacy-dialog'; +import {MatDialog} from '@angular/material/dialog'; describe('DishDetailComponent', () => { let component: DishDetailComponent; @@ -22,7 +22,7 @@ describe('DishDetailComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [DishDetailComponent], - providers: [{provide: MatLegacyDialog, useValue: {}}], + providers: [{provide: MatDialog, useValue: {}}], schemas: [ CUSTOM_ELEMENTS_SCHEMA ], diff --git a/angular/src/app/dishes/detail/dish-detail.component.ts b/angular/src/app/dishes/detail/dish-detail.component.ts index 447dbd76b..dab6ebaa2 100644 --- a/angular/src/app/dishes/detail/dish-detail.component.ts +++ b/angular/src/app/dishes/detail/dish-detail.component.ts @@ -9,7 +9,7 @@ import { ConfirmDialogModel, ConfirmDialogResult } from '@shared/components/confirm-dialog/confirm-dialog.component'; -import {MatLegacyDialog as MatDialog} from '@angular/material/legacy-dialog'; +import {MatDialog} from '@angular/material/dialog'; import {DishStoreService} from '../dish-store.service'; @Component({ diff --git a/angular/src/app/dishes/edit/dish-edit.component.html b/angular/src/app/dishes/edit/dish-edit.component.html index e7b278665..177555b4b 100644 --- a/angular/src/app/dishes/edit/dish-edit.component.html +++ b/angular/src/app/dishes/edit/dish-edit.component.html @@ -1,6 +1,6 @@
- +
diff --git a/angular/src/app/dishes/list/dishes.component.html b/angular/src/app/dishes/list/dishes.component.html index ff3edfd09..1fca31272 100644 --- a/angular/src/app/dishes/list/dishes.component.html +++ b/angular/src/app/dishes/list/dishes.component.html @@ -1,6 +1,6 @@
- +