chore: upgrade to angular 19

.changeset/unlucky-days-yawn.md

@@ -0,0 +1,5 @@
+---
+"@alauda/ui": minor
+---
+
+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

@@ -34,18 +34,13 @@
     "storybook": "ng run storybook:storybook",
     "storybook:build": "ng run storybook:build-storybook",
     "test": "jest --coverage",
-    "test:ci": "JEST_JUNIT_OUTPUT_DIR=reports jest --runInBand --coverage --reporters=jest-junit",
+    "test:ci": "JEST_JUNIT_OUTPUT_DIR=reports jest --runInBand",
     "test:clear": "jest --clearCache",
     "test:update": "jest -u",
     "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",

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

@@ -35,22 +35,21 @@ export class AccordionItemHeaderDirective {}
 })
 export class AccordionItemContentDirective {}
 @Component({
-  selector: 'aui-accordion-item',
-  templateUrl: 'accordion-item.component.html',
-  styleUrls: ['accordion-item.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  preserveWhitespaces: false,
-  animations: [
-    trigger('expand', [
-      state('*', style({ height: 0 })),
-      state('expanded', style({ height: '*' })),
-      transition('* <=> expanded', [animate('0.1s ease-in-out')]),
-    ]),
-  ],
-  viewProviders: [AccordionItemComponent],
-  standalone: true,
-  imports: [IconComponent, NgIf, NgTemplateOutlet],
+    selector: 'aui-accordion-item',
+    templateUrl: 'accordion-item.component.html',
+    styleUrls: ['accordion-item.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    preserveWhitespaces: false,
+    animations: [
+        trigger('expand', [
+            state('*', style({ height: 0 })),
+            state('expanded', style({ height: '*' })),
+            transition('* <=> expanded', [animate('0.1s ease-in-out')]),
+        ]),
+    ],
+    viewProviders: [AccordionItemComponent],
+    imports: [IconComponent, NgIf, NgTemplateOutlet]
 })
 export class AccordionItemComponent
   extends CdkAccordionItem

src/accordion/accordion.component.spec.ts

@@ -40,7 +40,7 @@ describe('AccordionComponent', () => {
 });
 
 @Component({
-  template: `
+    template: `
     <aui-accordion
       class="aui-accordion-test"
       #accordionRef
@@ -52,8 +52,7 @@ describe('AccordionComponent', () => {
       </aui-accordion-item>
     </aui-accordion>
   `,
-  standalone: true,
-  imports: [...ACCORDION_MODULE],
+    imports: [...ACCORDION_MODULE]
 })
 class TestComponent {
   multi: boolean;

src/anchor/anchor.component.ts

@@ -32,12 +32,11 @@ import { getAnchorTreeItems } from './utils';
 const bem = buildBem('aui-anchor');
 
 @Component({
-  selector: 'aui-anchor-tree',
-  templateUrl: 'anchor-tree.component.html',
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [NgFor, NgIf, NgTemplateOutlet],
+    selector: 'aui-anchor-tree',
+    templateUrl: 'anchor-tree.component.html',
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [NgFor, NgIf, NgTemplateOutlet]
 })
 export class AnchorTreeComponent
   extends AnchorDirectiveChild
@@ -118,13 +117,12 @@ export class AnchorTreeComponent
 }
 
 @Component({
-  selector: 'aui-anchor',
-  templateUrl: 'anchor.component.html',
-  styleUrls: ['anchor.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [AnchorTreeComponent],
+    selector: 'aui-anchor',
+    templateUrl: 'anchor.component.html',
+    styleUrls: ['anchor.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [AnchorTreeComponent]
 })
 export class AnchorComponent
   extends AnchorDirectiveChild

src/autocomplete/autocomplete.component.ts

@@ -32,14 +32,13 @@ import { AutoCompleteDirective } from './autocomplete.directive';
 import { SuggestionComponent } from './suggestion/suggestion.component';
 
 @Component({
-  selector: 'aui-autocomplete',
-  templateUrl: './autocomplete.component.html',
-  styleUrls: ['./autocomplete.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  preserveWhitespaces: false,
-  standalone: true,
-  imports: [AsyncPipe],
+    selector: 'aui-autocomplete',
+    templateUrl: './autocomplete.component.html',
+    styleUrls: ['./autocomplete.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    preserveWhitespaces: false,
+    imports: [AsyncPipe]
 })
 export class AutocompleteComponent implements AfterContentInit {
   @ContentChildren(SuggestionComponent, { descendants: true })

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

@@ -14,14 +14,13 @@ import { publishRef } from '../../internal/utils';
 import { SuggestionComponent } from '../suggestion/suggestion.component';
 
 @Component({
-  selector: 'aui-suggestion-group',
-  templateUrl: './suggestion-group.component.html',
-  styleUrls: ['./suggestion-group.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  preserveWhitespaces: false,
-  standalone: true,
-  imports: [AsyncPipe],
+    selector: 'aui-suggestion-group',
+    templateUrl: './suggestion-group.component.html',
+    styleUrls: ['./suggestion-group.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    preserveWhitespaces: false,
+    imports: [AsyncPipe]
 })
 export class SuggestionGroupComponent implements AfterContentInit {
   @ContentChildren(forwardRef(() => SuggestionComponent))

src/autocomplete/suggestion/suggestion.component.ts

@@ -29,14 +29,13 @@ import {
 import { AutocompleteComponent } from '../autocomplete.component';
 
 @Component({
-  selector: 'aui-suggestion',
-  templateUrl: './suggestion.component.html',
-  styleUrls: ['./suggestion.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  preserveWhitespaces: false,
-  standalone: true,
-  imports: [AsyncPipe],
+    selector: 'aui-suggestion',
+    templateUrl: './suggestion.component.html',
+    styleUrls: ['./suggestion.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    preserveWhitespaces: false,
+    imports: [AsyncPipe]
 })
 export class SuggestionComponent {
   bem: Bem = buildBem('aui-suggestion');

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

@@ -26,14 +26,13 @@ import { IconComponent } from '../icon/icon.component';
 type TargetType = Element | Window | string;
 
 @Component({
-  selector: 'aui-back-top',
-  templateUrl: './back-top.component.html',
-  styleUrls: ['./back-top.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  preserveWhitespaces: false,
-  standalone: true,
-  imports: [ButtonComponent, IconComponent, AsyncPipe],
+    selector: 'aui-back-top',
+    templateUrl: './back-top.component.html',
+    styleUrls: ['./back-top.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    preserveWhitespaces: false,
+    imports: [ButtonComponent, IconComponent, AsyncPipe]
 })
 export class BackTopComponent {
   @Input()

src/breadcrumb/breadcrumb-item.component.ts

@@ -9,14 +9,13 @@ import {
 import { IconComponent } from '../icon/icon.component';
 
 @Component({
-  selector: 'aui-breadcrumb-item',
-  templateUrl: './breadcrumb-item.component.html',
-  styleUrls: ['./breadcrumb-item.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  preserveWhitespaces: false,
-  standalone: true,
-  imports: [NgIf, IconComponent],
+    selector: 'aui-breadcrumb-item',
+    templateUrl: './breadcrumb-item.component.html',
+    styleUrls: ['./breadcrumb-item.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    preserveWhitespaces: false,
+    imports: [NgIf, IconComponent]
 })
 export class BreadcrumbItemComponent {
   get separator() {