chore: upgrade to angular 19 (#585)

* chore: upgrade angular 19

* chore: upgrade ng 19

* chore: migrate cdkscrollable to wrapper

* fix: fix unit test

* chore: fix jest test

* fix: unit test case

* chore: add @babel/helper-environment-visitor

* chore: add @babel/plugin-syntax-class-static-block

* chore: add @babel/plugin-syntax-private-property-in-object

* chore: add @babel/plugin-syntax-export-namespace-from

* chore: add @babel/plugin-syntax-dynamic-import

* fix: fullscreen fitviewport dialog style

* Create unlucky-days-yawn.md

* Update .changeset/unlucky-days-yawn.md

Co-authored-by: JounQin <admin@1stg.me>

* chore: use prettier lint manually

* chore: prettier stories ts

* chore: prettier empty line

* chore: revert test:ci

* chore: rm unexpected empty line

---------

Co-authored-by: Haoxin Yang <hxyang@alauda.io>
Co-authored-by: JounQin <admin@1stg.me>

Author: 3 people

.changeset/unlucky-days-yawn.md

@@ -0,0 +1,5 @@
+---
+"@alauda/ui": major
+---
+
+chore/upgrade angular 19 & migrate fix

angular.json

@@ -24,16 +24,18 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular/build:application",
           "options": {
-            "outputPath": "dist",
-            "index": "",
-            "main": "",
+            "outputPath": {
+              "base": "dist"
+            },
+            "index": false,
             "tsConfig": "tsconfig.json",
             "inlineStyleLanguage": "scss",
             "styles": [
               "src/theme/style.scss"
-            ]
+            ],
+            "browser": ""
           },
           "configurations": {
             "production": {
@@ -52,9 +54,7 @@
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true

jest.config.ts

@@ -2,7 +2,7 @@ import { Config } from '@jest/types';
 
 const config: Config.InitialOptions = {
   preset: 'jest-preset-angular',
-  testMatch: ['<rootDir>/src/**/+(*.)+(spec|test).+(ts|js)?(x)'],
+  testMatch: ['<rootDir>/src/**/*.+(spec|test).+(ts|js)?(x)'],
   testEnvironment: 'jsdom',
   setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
   coverageReporters: ['text', 'html'],

jest.setup.ts

@@ -1,12 +1,11 @@
 import 'jest-preset-angular/setup-jest';
 
-// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
-globalThis.ngJest = {
-  testEnvironmentOptions: {
+Object.assign(globalThis, {
+  ngJest: {
     errorOnUnknownElements: true,
     errorOnUnknownProperties: true,
   },
-};
+});
 
 // https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
 Object.defineProperty(window, 'matchMedia', {

package.json

@@ -40,12 +40,7 @@
     "test:watch": "jest --watch"
   },
   "peerDependencies": {
-    "@angular/animations": ">=18.0.0",
-    "@angular/cdk": ">=18.0.0",
-    "@angular/common": ">=18.0.0",
-    "@angular/core": ">=18.0.0",
-    "@angular/forms": ">=18.0.0",
-    "@angular/platform-browser": ">=18.0.0",
+    "@angular/cdk": ">=19.0.0",
     "dayjs": "^1.0.0",
     "rxjs": "^7.0.0"
   },
@@ -55,34 +50,40 @@
     "@1stg/remark-preset": "^2.0.0",
     "@1stg/simple-git-hooks": "^0.2.3",
     "@1stg/stylelint-config": "^6.0.0",
-    "@angular-devkit/build-angular": "^18.0.7",
-    "@angular/animations": "^18.0.6",
-    "@angular/cdk": "^18.0.6",
-    "@angular/cli": "^18.0.7",
-    "@angular/common": "^18.0.6",
-    "@angular/compiler": "^18.0.6",
-    "@angular/compiler-cli": "^18.0.6",
-    "@angular/core": "^18.0.6",
-    "@angular/forms": "^18.0.6",
-    "@angular/platform-browser": "^18.0.6",
-    "@angular/platform-browser-dynamic": "^18.0.6",
+    "@angular-devkit/build-angular": "^19.1.7",
+    "@angular/animations": "^19.1.6",
+    "@angular/build": "^19.1.7",
+    "@angular/cdk": "^19.1.5",
+    "@angular/cli": "^19.1.7",
+    "@angular/common": "^19.1.6",
+    "@angular/compiler": "^19.1.6",
+    "@angular/compiler-cli": "^19.1.6",
+    "@angular/core": "^19.1.6",
+    "@angular/forms": "^19.1.6",
+    "@angular/platform-browser": "^19.1.6",
+    "@angular/platform-browser-dynamic": "^19.1.6",
+    "@babel/helper-environment-visitor": "^7.24.7",
+    "@babel/plugin-syntax-class-static-block": "^7.14.5",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
+    "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
     "@changesets/changelog-github": "^0.4.8",
     "@changesets/cli": "^2.26.2",
     "@commitlint/cli": "^17.7.1",
     "@compodoc/compodoc": "^1.1.25",
     "@eslint/compat": "^1.1.1",
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.7.0",
-    "@storybook/addon-essentials": "^8.2.1",
-    "@storybook/addon-interactions": "^8.2.1",
-    "@storybook/addon-links": "^8.2.1",
-    "@storybook/angular": "^8.2.1",
-    "@storybook/blocks": "^8.2.1",
+    "@storybook/addon-essentials": "^8.5.6",
+    "@storybook/addon-interactions": "^8.5.6",
+    "@storybook/addon-links": "^8.5.6",
+    "@storybook/angular": "^8.5.6",
+    "@storybook/blocks": "^8.5.6",
     "@types/chroma-js": "^2.4.0",
     "@types/file-saver": "^2.0.5",
     "@types/jest": "29.5.12",
     "@types/node": "^20.5.7",
-    "angular-eslint": "18.1.0",
+    "angular-eslint": "19.1.0",
     "chroma-js": "^2.4.2",
     "dayjs": "^1.11.11",
     "eslint": "^9.6.0",
@@ -96,25 +97,25 @@
     "gulp-dart-sass": "^1.1.0",
     "jest": "^29.7.0",
     "jest-junit": "^16.0.0",
-    "jest-preset-angular": "^14.1.0",
+    "jest-preset-angular": "^14.5.1",
     "jsdom": "^24.1.0",
     "lint-staged": "^15.2.7",
-    "ng-packagr": "^18.0.0",
+    "ng-packagr": "^19.1.2",
     "npm-run-all": "^4.1.5",
     "patch-package": "^8.0.0",
     "remark-gfm": "^4.0.0",
     "rxjs": "^7.8.1",
     "simple-git-hooks": "^2.11.1",
-    "storybook": "^8.2.1",
+    "storybook": "^8.5.6",
     "storybook-dark-mode": "^4.0.2",
     "style-loader": "^4.0.0",
     "stylelint": "^16.6.1",
     "ts-jest": "29.2.0",
     "ts-node": "^10.9.2",
-    "typescript": "~5.4.0",
+    "typescript": "~5.7.3",
     "typescript-eslint": "7.16.1",
     "yarn-deduplicate": "^6.0.2",
-    "zone.js": "^0.14.7"
+    "zone.js": "^0.15.0"
   },
   "publishConfig": {
     "access": "public",

patches/@angular-eslint+eslint-plugin-template+18.1.0.patch

@@ -49,7 +49,6 @@ export class AccordionItemContentDirective {}
     ]),
   ],
   viewProviders: [AccordionItemComponent],
-  standalone: true,
   imports: [IconComponent, NgIf, NgTemplateOutlet],
 })
 export class AccordionItemComponent
@@ -67,7 +66,6 @@ export class AccordionItemComponent
 
   lazyContentTpl: TemplateRef<unknown>;
 
-  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
   constructor(
     accordion: AccordionComponent,
     cdr: ChangeDetectorRef,

src/accordion/accordion-item/accordion-item.component.ts

@@ -52,7 +52,6 @@ describe('AccordionComponent', () => {
       </aui-accordion-item>
     </aui-accordion>
   `,
-  standalone: true,
   imports: [...ACCORDION_MODULE],
 })
 class TestComponent {

src/accordion/accordion.component.spec.ts

@@ -36,7 +36,6 @@ const bem = buildBem('aui-anchor');
   templateUrl: 'anchor-tree.component.html',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [NgFor, NgIf, NgTemplateOutlet],
 })
 export class AnchorTreeComponent
@@ -123,7 +122,6 @@ export class AnchorTreeComponent
   styleUrls: ['anchor.component.scss'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [AnchorTreeComponent],
 })
 export class AnchorComponent

src/anchor/anchor.component.ts

@@ -38,7 +38,6 @@ import { SuggestionComponent } from './suggestion/suggestion.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
-  standalone: true,
   imports: [AsyncPipe],
 })
 export class AutocompleteComponent implements AfterContentInit {

src/autocomplete/autocomplete.component.ts

@@ -20,7 +20,6 @@ import { SuggestionComponent } from '../suggestion/suggestion.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
-  standalone: true,
   imports: [AsyncPipe],
 })
 export class SuggestionGroupComponent implements AfterContentInit {

src/autocomplete/suggestion-group/suggestion-group.component.ts

@@ -35,7 +35,6 @@ import { AutocompleteComponent } from '../autocomplete.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
-  standalone: true,
   imports: [AsyncPipe],
 })
 export class SuggestionComponent {

src/autocomplete/suggestion/suggestion.component.ts

@@ -32,7 +32,6 @@ type TargetType = Element | Window | string;
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   preserveWhitespaces: false,
-  standalone: true,
   imports: [ButtonComponent, IconComponent, AsyncPipe],
 })
 export class BackTopComponent {

src/back-top/back-top.component.ts

@@ -15,7 +15,6 @@ import { IconComponent } from '../icon/icon.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
-  standalone: true,
   imports: [NgIf, IconComponent],
 })
 export class BreadcrumbItemComponent {

src/breadcrumb/breadcrumb-item.component.ts

@@ -29,7 +29,6 @@ describe('BreadcrumbComponent', () => {
       <aui-breadcrumb-item>default</aui-breadcrumb-item>
     </aui-breadcrumb>
   `,
-  standalone: true,
   imports: [...BREADCRUMB_MODULE],
 })
 class TestComponent {}

src/breadcrumb/breadcrumb.component.spec.ts

@@ -108,7 +108,6 @@ describe('ButtonComponent', () => {
       {{ content }}
     </button>
   `,
-  standalone: true,
   imports: [ButtonComponent],
 })
 class TestComponent {

src/button/button.component.spec.ts

@@ -25,7 +25,6 @@ const prefix = 'aui-button--';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   preserveWhitespaces: false,
-  standalone: true,
   imports: [NgIf, IconComponent],
 })
 export class ButtonComponent implements OnDestroy {

src/button/button.component.ts

@@ -94,7 +94,6 @@ describe('CheckboxGroupComponent', () => {
       </aui-checkbox-group>
     </div>
   `,
-  standalone: true,
   imports: [FormsModule, NgForOf, ...CHECKBOX_MODULE],
 })
 class TestComponent {

src/checkbox/checkbox-group/checkbox-group.component.spec.ts

@@ -119,7 +119,6 @@ describe('CheckboxComponent', () => {
       {{ content }}
     </aui-checkbox>
   `,
-  standalone: true,
   imports: [FormsModule, CheckboxComponent],
 })
 export class TestComponent {

src/checkbox/checkbox.component.spec.ts

@@ -37,7 +37,6 @@ let uniqueId = 0;
       multi: true,
     },
   ],
-  standalone: true,
   imports: [NgIf, IconComponent],
 })
 export class CheckboxComponent<T>

src/checkbox/checkbox.component.ts

@@ -49,7 +49,6 @@ import {
       multi: true,
     },
   ],
-  standalone: true,
   imports: [
     CalendarHeaderComponent,
     PickerPanelComponent,

src/date-picker/calendar/date-picker-panel/component.ts

@@ -18,7 +18,6 @@ import { I18nPipe } from '../../../i18n/i18n.pipe';
   styleUrls: ['./style.scss'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [NgIf, NgTemplateOutlet, ButtonComponent, I18nPipe],
 })
 export class CalendarFooterComponent {

src/date-picker/calendar/footer/component.ts

@@ -27,7 +27,6 @@ const bem = buildBem('aui-calendar-header');
   styleUrls: ['./style.scss'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [NgIf, NgTemplateOutlet, ButtonComponent, IconComponent, I18nPipe],
 })
 export class CalendarHeaderComponent {
@@ -142,8 +141,8 @@ export class CalendarHeaderComponent {
     return constrainValue.isSame(range.start, MONTH)
       ? 0
       : constrainValue.isBefore(range.start, MONTH)
-        ? -1
-        : 1;
+      ? -1
+      : 1;
   }
 
   navHead(range: DateNavRange, value: number) {

src/date-picker/calendar/header/component.ts

@@ -49,7 +49,6 @@ const bem = buildBem('aui-picker-panel');
   styleUrls: ['./picker-panel.style.scss'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [NgClass, NgIf, NgFor, ButtonComponent, I18nPipe],
 })
 export class PickerPanelComponent implements OnChanges {
@@ -132,7 +131,6 @@ export class PickerPanelComponent implements OnChanges {
   }
 
   // 根据当前数据，计算渲染表格
-   
   renderPanelData(date: Dayjs, navRange: DateNavRange) {
     const value = [];
     let colCounts = 0;
@@ -203,8 +201,8 @@ export class PickerPanelComponent implements OnChanges {
       this.navRange === DateNavRange.Decade
         ? value.isSame(dateValue, YEAR)
         : this.navRange === DateNavRange.Year
-        ? value.isSame(dateValue, MONTH)
-        : value.isSame(dateValue, DAY),
+          ? value.isSame(dateValue, MONTH)
+          : value.isSame(dateValue, DAY),
     );
   }
 

src/date-picker/calendar/panel/picker-panel.ts

@@ -48,7 +48,6 @@ const bem = buildBem('aui-date-range-picker-panel');
       multi: true,
     },
   ],
-  standalone: true,
   imports: [
     CalendarHeaderComponent,
     PickerPanelComponent,