Update for yFiles for HTML 2.5

Author: fskpf

.browserslistrc

@@ -14,4 +14,3 @@ last 2 Edge major versions
 last 2 Safari major versions
 last 2 iOS major versions
 Firefox ESR
-not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

.gitignore

@@ -1,46 +1,43 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
-# compiled output
+# Compiled output
 /dist
 /tmp
 /out-tsc
-# Only exists if Bazel was run
 /bazel-out
 
-# dependencies
+# Node
 /node_modules
-
-# profiling files
-chrome-profiler-events*.json
+npm-debug.log
+yarn-error.log
 
 # IDEs and editors
-/.idea
+.idea/
 .project
 .classpath
 .c9/
 *.launch
 .settings/
 *.sublime-workspace
 
-# IDE - VSCode
+# Visual Studio Code
 .vscode/*
 !.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
 .history/*
 
-# misc
-/.sass-cache
+# Miscellaneous
+/.angular/cache
+.sass-cache/
 /connect.lock
 /coverage
 /libpeerconnection.log
-npm-debug.log
-yarn-error.log
 testem.log
 /typings
 license.json
 
-# System Files
+# System files
 .DS_Store
 Thumbs.db

README.md

@@ -8,8 +8,8 @@ This sample application serves as a basic scaffold of how to integrate [yFiles f
 
 ## Version Information
 
-- Angular CLI v12.1
-- yFiles for HTML 2.4
+- Angular CLI v14.1
+- yFiles for HTML 2.5
 
 ## Getting Started
 
@@ -56,5 +56,5 @@ and customize the interaction with the graph. Generate Angular code for your pro
 
 ## Support
 
-If you need help with your setup or a certain feature, don't hesitate to contact our support
-through our [Customer Center](https://my.yworks.com/) or by email [yfileshtml@yworks.com](mailto:yfileshtml@yworks.com).
+If you need help with your setup or a certain feature, don't hesitate to contact our support through
+the [Customer Center](https://my.yworks.com/) or by email [yfileshtml@yworks.com](mailto:yfileshtml@yworks.com).

angular.json

@@ -3,21 +3,17 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "yfiles-angular-cli-integration": {
+    "yfiles-angular-integration-basic": {
       "projectType": "application",
-      "schematics": {
-        "@schematics/angular:application": {
-          "strict": true
-        }
-      },
+      "schematics": {},
       "root": "",
       "sourceRoot": "src",
       "prefix": "app",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist/yfiles-angular-cli-integration",
+            "outputPath": "dist/yfiles-angular-integration-basic",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
@@ -28,6 +24,18 @@
           },
           "configurations": {
             "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",
@@ -51,18 +59,18 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "yfiles-angular-cli-integration:build:production"
+              "browserTarget": "yfiles-angular-integration-basic:build:production"
             },
             "development": {
-              "browserTarget": "yfiles-angular-cli-integration:build:development"
+              "browserTarget": "yfiles-angular-integration-basic:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "yfiles-angular-cli-integration:build"
+            "browserTarget": "yfiles-angular-integration-basic:build"
           }
         },
         "test": {
@@ -79,6 +87,5 @@
         }
       }
     }
-  },
-  "defaultProject": "yfiles-angular-cli-integration"
+  }
 }

integration-howto.md

@@ -2,7 +2,9 @@
 
 This is a step-by-step description of how to add a yFiles graph component to a basic Angular application.
 
-TL;DR Add yFiles as a dependency in the `package.json` and start importing yFiles classes in your project.
+TL;DR Add `yfiles` as a dependency in the `package.json`,
+[include your license](https://docs.yworks.com/yfileshtml/#/dguide/licensing#_general_concept),
+and start importing yFiles classes in your project.
 
 ## Running the CLI
 
@@ -15,27 +17,25 @@ This creates a basic Angular project.
 
 ## Add yFiles as a dependency
 
-Adding yFiles as a dependency is as easy as installing an external library from the npm registry:
+Adding yFiles as a dependency is almost as easy as installing an external library from the npm registry:
 
-1. Add yFiles for HTML as npm dependency to the created project:
+1. Add yFiles for HTML as npm dependency to the created project, for example like this:
 
-   - If you have a fresh yFiles for HTML package, you need to prepare the library package first by running `npm install` in the
-     package folder. This creates the development library and a tarball that can be installed as npm dependency in
-     other projects. See also [Working with the yFiles npm Module](https://docs.yworks.com/yfileshtml/#/dguide/yfiles_npm_module#yfiles_npm_module).
+   ```
+   "dependencies": {
+     ...
+     "yfiles": "../yFiles-for-HTML-Complete-2.5-Evaluation/lib-dev/yfiles-25.0.0+eval-dev.tgz"
+   },
+   ```
 
-     Note: This sample project runs `npm install` as `preinstall` script in the `package.json`.
+2. Install the newly added dependency with `npm install`.
 
-   - Reference the packed library in the `package.json` of the project:
-     ```
-     "dependencies": {
-       ...
-       "yfiles": "../yFiles-for-HTML-Complete-2.4.0.6-Evaluation/lib-dev/es-modules/yfiles-24.0.6-eval-dev.tgz"
-     },
-     ```
+3. Include your yFiles license by copying the `license.json` file into your project. For more options,
+   see the [developer's guide](https://docs.yworks.com/yfileshtml/#/dguide/licensing#_general_concept)
 
-2. Now install the newly added dependency with `npm install`.
-
-After installing the dependency, you can import classes from `yfiles` in your project. Since yFiles is installed as proper npm dependency, IDEs provide full code-completion and automatic imports out of the box to easily work with the library.
+After installing the dependency, you can import classes from `yfiles` in your project. Since yFiles
+is installed as proper npm dependency, IDEs provide full code-completion and automatic imports out
+of the box to easily work with the library.
 
 ## Integrate a basic yFiles graph component
 
@@ -46,7 +46,7 @@ With the yFiles dependency, you can easily create a new Angular component that c
 3. In `graph-component.component.ts`, instantiate a new GraphComponent in the container `div` with editing capabilities
    and a basic sample graph. See the contents of `/src/app/graph-component/graph-component.component.ts` in this repository for the full implementation.
 
-   Also, make sure to configure your `license.json` for the library (see `graph-component.component.ts`).
+   Make sure to configure your license data as described above (see `graph-component.component.ts`, too).
 
 4. Add the new component to the `/src/app/app.component.html` that was created by the Angular CLI.
 

karma.conf.js

@@ -25,7 +25,7 @@ module.exports = function (config) {
       suppressAll: true, // removes the duplicated traces
     },
     coverageReporter: {
-      dir: require('path').join(__dirname, './coverage/yfiles-angular-cli-integration'),
+      dir: require('path').join(__dirname, './coverage/yfiles-angular-integration-basic'),
       subdir: '.',
       reporters: [{ type: 'html' }, { type: 'text-summary' }],
     },

package.json

@@ -3,41 +3,40 @@
   "version": "1.0.0",
   "author": "yWorks GmbH <yfileshtml@yworks.com>",
   "scripts": {
-    "preinstall": "cd ../yFiles-for-HTML-Complete-2.4.0.6-Evaluation && npm run prepare-package",
-    "postinstall": "node -e \"require('fs').copyFileSync('../yFiles-for-HTML-Complete-2.4.0.6-Evaluation/lib/license.json','./src/license.json')\"",
     "ng": "ng",
     "start": "ng serve",
-    "build": "node --max_old_space_size=6000 node_modules/@angular/cli/bin/ng build",
+    "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "ng test",
+    "postinstall": "npm run copy-eval-license",
+    "copy-eval-license": "node -e \"require('fs').copyFileSync('../yFiles-for-HTML-Complete-2.5-Evaluation/lib/license.json','./src/license.json')\""
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~12.2.7",
-    "@angular/common": "~12.2.7",
-    "@angular/compiler": "~12.2.7",
-    "@angular/core": "~12.2.7",
-    "@angular/forms": "~12.2.7",
-    "@angular/platform-browser": "~12.2.7",
-    "@angular/platform-browser-dynamic": "~12.2.7",
-    "@angular/router": "~12.2.7",
-    "rxjs": "~7.1.0",
+    "@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",
     "tslib": "^2.3.0",
-    "yfiles": "../yFiles-for-HTML-Complete-2.4.0.6-Evaluation/lib-dev/es-modules/yfiles-24.0.6-eval-dev.tgz",
+    "yfiles": "../yFiles-for-HTML-Complete-2.5-Evaluation/lib-dev/yfiles-25.0.0+eval-dev.tgz",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.2.7",
-    "@angular/cli": "~12.2.7",
-    "@angular/compiler-cli": "~12.2.7",
-    "@types/jasmine": "~3.7.7",
-    "@types/node": "^15.14.0",
-    "jasmine-core": "^3.7.1",
-    "karma": "~6.3.4",
+    "@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",
+    "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage": "~2.0.3",
-    "karma-jasmine": "~4.0.1",
-    "karma-jasmine-html-reporter": "^1.6.0",
-    "typescript": "~4.2.4"
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.0.0",
+    "typescript": "~4.7.2"
   }
 }

src/app/app.component.html

@@ -1,9 +1,6 @@
 <div class="header">
-  <img alt="yFiles logo" src="./assets/yfiles-logo.svg">
+  <img alt="yFiles logo" src="./assets/yfiles-logo.svg" />
   <h1>A Basic yFiles Integration in Angular</h1>
 </div>
 
 <app-graph-component></app-graph-component>
-
-
-

src/app/app.component.spec.ts

@@ -14,18 +14,18 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy()
   })
 
-  it(`should have as title 'yfiles-angular-cli-integration'`, () => {
+  it(`should have as title 'yfiles-angular-integration-basic'`, () => {
     const fixture = TestBed.createComponent(AppComponent)
     const app = fixture.componentInstance
-    expect(app.title).toEqual('yfiles-angular-cli-integration')
+    expect(app.title).toEqual('yfiles-angular-integration-basic')
   })
 
   it('should render title', () => {
     const fixture = TestBed.createComponent(AppComponent)
     fixture.detectChanges()
-    const compiled = fixture.nativeElement
-    expect(compiled.querySelector('.header h1').textContent).toContain(
-      'A Basic yFiles Integration in Angular'
+    const compiled = fixture.nativeElement as HTMLElement
+    expect(compiled.querySelector('.content span')?.textContent).toContain(
+      'yfiles-angular-integration-basic app is running!'
     )
   })
 })

src/app/app.component.ts

@@ -6,5 +6,5 @@ import { Component } from '@angular/core'
   styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
-  title = 'yfiles-angular-cli-integration'
+  title = 'yfiles-angular-integration-basic'
 }