Update for yFiles for HTML 3.0

michabaur · michabaur · commit 350398a72bd4 · 2025-02-27T16:48:39.000+01:00
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 v16.0
-- yFiles for HTML 2.6
+- Angular CLI 19
+- yFiles for HTML 3.0
 
 ## Getting Started
 
@@ -19,7 +19,7 @@ Just clone this repository with
 git clone https://github.com/yWorks/yfiles-angular-integration-basic
 ```
 
-Then, extract a yFiles Evaluation package beside it and run
+Then, extract a yFiles Evaluation package besides it and run
 
 ```
 npm install
diff --git a/angular.json b/angular.json
@@ -11,11 +11,11 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
             "outputPath": "dist/yfiles-angular-integration-basic",
             "index": "src/index.html",
-            "main": "src/main.ts",
+            "browser": "src/main.ts",
             "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "assets": ["src/favicon.ico", "src/assets"],
@@ -27,12 +27,9 @@
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
-              "sourceMap": true,
-              "namedChunks": true
+              "sourceMap": true
             }
           },
           "defaultConfiguration": "production"
@@ -41,19 +38,16 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "yfiles-angular-integration-basic:build:production"
+              "buildTarget": "yfiles-angular-integration-basic:build:production"
             },
             "development": {
-              "browserTarget": "yfiles-angular-integration-basic:build:development"
+              "buildTarget": "yfiles-angular-integration-basic:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "yfiles-angular-integration-basic:build"
-          }
+          "builder": "@angular-devkit/build-angular:extract-i18n"
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
diff --git a/integration-howto.md b/integration-howto.md
@@ -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.6.0.4-Evaluation/lib-dev/yfiles-26.0.4+eval-dev.tgz"
+     "@yfiles/yfiles": "../yFiles-for-HTML-Complete-3.0-Evaluation/lib-dev/yfiles-30.0.0+eval-dev.tgz"
    },
    ```
 
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "yfiles-angular-integration-basic",
-  "version": "26.0.4",
+  "name": "@yfiles/yfiles-angular-integration-basic",
+  "version": "30.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.6.0.4-Evaluation/lib/license.json','./src/license.json')\""
+    "copy-eval-license": "node -e \"require('fs').copyFileSync('../yFiles-for-HTML-Complete-3.0-Evaluation/lib/license.json','./src/license.json')\""
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.3.6",
-    "@angular/common": "~17.3.6",
-    "@angular/compiler": "~17.3.6",
-    "@angular/core": "~17.3.6",
-    "@angular/forms": "~17.3.6",
-    "@angular/platform-browser": "~17.3.6",
-    "@angular/platform-browser-dynamic": "~17.3.6",
-    "@angular/router": "^17.3.6",
+    "@angular/animations": "^19.1.5",
+    "@angular/common": "^19.1.5",
+    "@angular/compiler": "^19.1.5",
+    "@angular/core": "^19.1.5",
+    "@angular/forms": "^19.1.5",
+    "@angular/platform-browser": "^19.1.5",
+    "@angular/platform-browser-dynamic": "^19.1.5",
+    "@angular/router": "^19.1.5",
     "rxjs": "~7.8.1",
-    "tslib": "^2.6.2",
-    "yfiles": "../yFiles-for-HTML-Complete-2.6.0.4-Evaluation/lib-dev/yfiles-26.0.4+eval-dev.tgz",
-    "zone.js": "~0.14.2"
+    "tslib": "^2.8.1",
+    "zone.js": "~0.15.0",
+    "@yfiles/yfiles": "../yFiles-for-HTML-Complete-3.0-Evaluation/lib-dev/yfiles-30.0.3+eval-dev.tgz"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.3.6",
-    "@angular/cli": "~17.3.6",
-    "@angular/compiler-cli": "^17.3.6",
-    "@types/jasmine": "~5.1.4",
-    "jasmine-core": "~5.1.1",
-    "karma": "~6.4.2",
+    "@angular-devkit/build-angular": "^19.1.6",
+    "@angular/cli": "^19.1.6",
+    "@angular/compiler-cli": "^19.1.5",
+    "@types/jasmine": "~5.1.5",
+    "jasmine-core": "~5.6.0",
+    "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.2.2"
+    "typescript": "~5.7.3"
   }
 }
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
@@ -5,7 +5,7 @@ describe('AppComponent', () => {
   beforeEach(() =>
     TestBed.configureTestingModule({
       declarations: [AppComponent],
-    })
+    }),
   )
 
   it('should create the app', () => {
@@ -25,7 +25,7 @@ describe('AppComponent', () => {
     fixture.detectChanges()
     const compiled = fixture.nativeElement as HTMLElement
     expect(compiled.querySelector('.content span')?.textContent).toContain(
-      'yfiles-angular-integration-basic app is running!'
+      'yfiles-angular-integration-basic app is running!',
     )
   })
 })
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,9 +1,11 @@
 import { Component } from '@angular/core'
+import { GraphComponentComponent } from './graph-component/graph-component.component'
 
 @Component({
   selector: 'app-root',
+  imports: [GraphComponentComponent],
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
+  styleUrl: './app.component.css'
 })
 export class AppComponent {
   title = 'yfiles-angular-integration-basic'
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
@@ -0,0 +1,8 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
+};
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];
diff --git a/src/app/graph-component/graph-component.component.spec.ts b/src/app/graph-component/graph-component.component.spec.ts
@@ -8,7 +8,7 @@ describe('GraphComponentComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [GraphComponentComponent],
+      declarations: [GraphComponentComponent]
     })
     fixture = TestBed.createComponent(GraphComponentComponent)
     component = fixture.componentInstance
diff --git a/src/app/graph-component/graph-component.component.ts b/src/app/graph-component/graph-component.component.ts
@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core'
-import { GraphComponent, GraphEditorInputMode, IGraph, License, Point, Rect } from 'yfiles'
+import { GraphComponent, GraphEditorInputMode, IGraph, License, Point, Rect } from '@yfiles/yfiles'
 import licenseData from '../../license.json'
 
 License.value = licenseData
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
@@ -1,3 +1,3 @@
 export const environment = {
-  production: true
-};
+  production: true,
+}
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
@@ -3,8 +3,8 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
-};
+  production: false,
+}
 
 /*
  * For easier debugging in development mode, you can import the following file
diff --git a/src/index.html b/src/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
diff --git a/src/main.ts b/src/main.ts
@@ -1,7 +1,6 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
 
-import { AppModule } from './app/app.module'
-
-platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  .catch((err) => console.error(err))
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import { Routes } from '@angular/router';`
	`2`	`+`
	`3`	`+export const routes: Routes = [];`