Update for yFiles for HTML 2.6

michabaur · michabaur · commit 6c7c8e1a050c · 2023-07-10T17:11:43.000+02:00
diff --git a/.browserslistrc b/.browserslistrc
diff --git a/README.md b/README.md
@@ -8,8 +8,8 @@ This sample application serves as a basic scaffold of how to integrate [yFiles f
 
 ## Version Information
 
-- Angular CLI v14.1
-- yFiles for HTML 2.5
+- Angular CLI v16.0
+- yFiles for HTML 2.6
 
 ## Getting Started
 
diff --git a/angular.json b/angular.json
@@ -16,32 +16,14 @@
             "outputPath": "dist/yfiles-angular-integration-basic",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": ["src/styles.css"],
             "scripts": []
           },
           "configurations": {
             "production": {
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "3mb",
-                  "maximumError": "5mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
-                }
-              ],
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
               "outputHashing": "all"
             },
             "development": {
@@ -76,19 +58,14 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": ["src/styles.css"],
             "scripts": []
           }
         }
       }
     }
-  },
-  "cli": {
-    "analytics": false
   }
 }
diff --git a/integration-howto.md b/integration-howto.md
@@ -8,7 +8,7 @@ and start importing yFiles classes in your project.
 
 ## Running the CLI
 
-Run @angular/cli with `> ng new yfiles-angular-cli-integration` and select following options:
+Run @angular/cli with `> ng new yfiles-angular-integration-basic` and select following options:
 
 - `? Would you like to add Angular routing?` No
 - `? Which stylesheet format whould you like to use?` CSS
@@ -24,7 +24,7 @@ Adding yFiles as a dependency is almost as easy as installing an external librar
    ```
    "dependencies": {
      ...
-     "yfiles": "../yFiles-for-HTML-Complete-2.5.0.4-Evaluation/lib-dev/yfiles-25.0.4+eval-dev.tgz"
+     "yfiles": "../yFiles-for-HTML-Complete-2.6-Evaluation/lib-dev/yfiles-26.0.0+eval-dev.tgz"
    },
    ```
 
diff --git a/karma.conf.js b/karma.conf.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "yfiles-angular-integration-basic",
-  "version": "25.0.4",
+  "version": "26.0.0",
   "author": "yWorks GmbH <yfileshtml@yworks.com>",
   "scripts": {
     "ng": "ng",
@@ -9,34 +9,34 @@
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
     "postinstall": "npm run copy-eval-license",
-    "copy-eval-license": "node -e \"require('fs').copyFileSync('../yFiles-for-HTML-Complete-2.5.0.4-Evaluation/lib/license.json','./src/license.json')\""
+    "copy-eval-license": "node -e \"require('fs').copyFileSync('../yFiles-for-HTML-Complete-2.6-Evaluation/lib/license.json','./src/license.json')\""
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^14.1.0",
-    "@angular/common": "^14.1.0",
-    "@angular/compiler": "^14.1.0",
-    "@angular/core": "^14.1.0",
-    "@angular/forms": "^14.1.0",
-    "@angular/platform-browser": "^14.1.0",
-    "@angular/platform-browser-dynamic": "^14.1.0",
-    "@angular/router": "^14.1.0",
-    "rxjs": "~7.5.0",
+    "@angular/animations": "^16.0.0",
+    "@angular/common": "^16.0.0",
+    "@angular/compiler": "^16.0.0",
+    "@angular/core": "^16.0.0",
+    "@angular/forms": "^16.0.0",
+    "@angular/platform-browser": "^16.0.0",
+    "@angular/platform-browser-dynamic": "^16.0.0",
+    "@angular/router": "^16.0.0",
+    "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "yfiles": "../yFiles-for-HTML-Complete-2.5.0.4-Evaluation/lib-dev/yfiles-25.0.4+eval-dev.tgz",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.13.0",
+    "yfiles": "../yFiles-for-HTML-Complete-2.6-Evaluation/lib-dev/yfiles-26.0.0+eval-dev.tgz"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.1.0",
-    "@angular/cli": "~14.1.0",
-    "@angular/compiler-cli": "^14.1.0",
-    "@types/jasmine": "~4.0.0",
-    "jasmine-core": "~4.2.0",
+    "@angular-devkit/build-angular": "^16.0.5",
+    "@angular/cli": "~16.0.5",
+    "@angular/compiler-cli": "^16.0.0",
+    "@types/jasmine": "~4.3.0",
+    "jasmine-core": "~4.6.0",
     "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.1.0",
+    "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.0.0",
-    "typescript": "~4.7.2"
+    "typescript": "~5.1.6"
   }
 }
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
@@ -2,11 +2,11 @@ import { TestBed } from '@angular/core/testing'
 import { AppComponent } from './app.component'
 
 describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
+  beforeEach(() =>
+    TestBed.configureTestingModule({
       declarations: [AppComponent],
-    }).compileComponents()
-  })
+    })
+  )
 
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent)
diff --git a/src/app/graph-component/graph-component.component.spec.ts b/src/app/graph-component/graph-component.component.spec.ts
@@ -6,13 +6,10 @@ describe('GraphComponentComponent', () => {
   let component: GraphComponentComponent
   let fixture: ComponentFixture<GraphComponentComponent>
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [GraphComponentComponent],
-    }).compileComponents()
-  })
-
   beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [GraphComponentComponent],
+    })
     fixture = TestBed.createComponent(GraphComponentComponent)
     component = fixture.componentInstance
     fixture.detectChanges()
diff --git a/src/main.ts b/src/main.ts
@@ -1,12 +1,7 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
 
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
+import { AppModule } from './app/app.module'
 
-if (environment.production) {
-  enableProdMode();
-}
-
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch((err) => console.error(err))
diff --git a/src/polyfills.ts b/src/polyfills.ts
diff --git a/src/test.ts b/src/test.ts
diff --git a/tsconfig.app.json b/tsconfig.app.json
@@ -5,6 +5,6 @@
     "outDir": "./out-tsc/app",
     "types": []
   },
-  "files": ["src/main.ts", "src/polyfills.ts"],
+  "files": ["src/main.ts"],
   "include": ["src/**/*.d.ts"]
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -18,9 +18,10 @@
     "importHelpers": true,
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,
-    "target": "es2020",
-    "module": "es2020",
-    "lib": ["es2020", "dom"]
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": ["ES2022", "dom"]
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,
diff --git a/tsconfig.spec.json b/tsconfig.spec.json
@@ -5,6 +5,5 @@
     "outDir": "./out-tsc/spec",
     "types": ["jasmine"]
   },
-  "files": ["src/test.ts", "src/polyfills.ts"],
   "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
 }
