Update for yFiles for HTML 2.4.0.0

Author: fskpf

.browserslistrc

@@ -0,0 +1,17 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+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.

.editorconfig

@@ -8,6 +8,9 @@ indent_size = 2
 insert_final_newline = true
 trim_trailing_whitespace = true
 
+[*.ts]
+quote_type = single
+
 [*.md]
 max_line_length = off
 trim_trailing_whitespace = false

.gitignore

@@ -12,7 +12,6 @@
 
 # profiling files
 chrome-profiler-events*.json
-speed-measure-plugin*.json
 
 # IDEs and editors
 /.idea

README.md

@@ -8,8 +8,8 @@ This sample application serves as a basic scaffold of how to integrate [yFiles f
 
 ## Version Information
 
-- Angular CLI v10.2
-- yFiles for HTML 2.3
+- Angular CLI v12.1
+- yFiles for HTML 2.4
 
 ## Getting Started
 

angular.json

@@ -5,7 +5,11 @@
   "projects": {
     "yfiles-angular-cli-integration": {
       "projectType": "application",
-      "schematics": {},
+      "schematics": {
+        "@schematics/angular:application": {
+          "strict": true
+        }
+      },
       "root": "",
       "sourceRoot": "src",
       "prefix": "app",
@@ -18,8 +22,7 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "aot": true,
-            "assets": ["src/yfiles-typeinfo.js", "src/assets"],
+            "assets": ["src/favicon.ico", "src/assets"],
             "styles": ["src/styles.css"],
             "scripts": []
           },
@@ -31,39 +34,30 @@
                   "with": "src/environments/environment.prod.ts"
                 }
               ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "extractCss": true,
-              "namedChunks": false,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "10kb"
-                }
-              ]
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
             }
-          }
+          },
+          "defaultConfiguration": "production"
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "yfiles-angular-cli-integration:build"
-          },
           "configurations": {
             "production": {
               "browserTarget": "yfiles-angular-cli-integration:build:production"
+            },
+            "development": {
+              "browserTarget": "yfiles-angular-cli-integration:build:development"
             }
-          }
+          },
+          "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
@@ -82,25 +76,6 @@
             "styles": ["src/styles.css"],
             "scripts": []
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": ["tsconfig.app.json", "tsconfig.spec.json", "e2e/tsconfig.json"],
-            "exclude": ["**/node_modules/**"]
-          }
-        },
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "yfiles-angular-cli-integration:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "yfiles-angular-cli-integration:serve:production"
-            }
-          }
         }
       }
     }

browserslist

@@ -6,7 +6,7 @@ TL;DR Add yFiles as a dependency in the `package.json` and start importing yFile
 
 ## Running the CLI
 
-Run the Vue-Cli with `> ng new yfiles-angular-integration-basic` and select following options:
+Run the Vue-Cli with `> ng new yfiles-angular-cli-integration` and select following options:
 
 - `? Would you like to add Angular routing?` No
 - `? Which stylesheet format whould you like to use?` CSS
@@ -29,12 +29,11 @@ Adding yFiles as a dependency is as easy as installing an external library from
      ```
      "dependencies": {
        ...
-       "yfiles": "../yFiles-for-HTML-Complete-2.3.0.3-Evaluation/lib-dev/es-modules/yfiles-23.0.2-eval-dev.tgz"
+       "yfiles": "../yFiles-for-HTML-Complete-2.4.0.0-Evaluation/lib-dev/es-modules/yfiles-24.0.0-eval-dev.tgz"
      },
      ```
 
 2. Now install the newly added dependency with `npm install`.
-3. Include `yfiles.css`, which is an integral part of yFiles for HTML. For example add `@import '~yfiles/yfiles.css';'` to the global styles in `styles.css`.
 
 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.
 

e2e/protractor.conf.js

@@ -1,24 +1,33 @@
 // Karma configuration file, see link for more information
 // https://karma-runner.github.io/1.0/config/configuration-file.html
 
-module.exports = function(config) {
+module.exports = function (config) {
   config.set({
     basePath: '',
     frameworks: ['jasmine', '@angular-devkit/build-angular'],
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma')
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma'),
     ],
     client: {
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
     },
-    coverageIstanbulReporter: {
+    jasmineHtmlReporter: {
+      suppressAll: true, // removes the duplicated traces
+    },
+    coverageReporter: {
       dir: require('path').join(__dirname, './coverage/yfiles-angular-cli-integration'),
-      reports: ['html', 'lcovonly', 'text-summary'],
-      fixWebpackSourcePaths: true
+      subdir: '.',
+      reporters: [{ type: 'html' }, { type: 'text-summary' }],
     },
     reporters: ['progress', 'kjhtml'],
     port: 9876,
@@ -27,6 +36,6 @@ module.exports = function(config) {
     autoWatch: true,
     browsers: ['Chrome'],
     singleRun: false,
-    restartOnFileChange: true
+    restartOnFileChange: true,
   })
 }

e2e/src/app.e2e-spec.ts

@@ -3,49 +3,41 @@
   "version": "1.0.0",
   "author": "yWorks GmbH <[email protected]>",
   "scripts": {
-    "preinstall": "cd ../yFiles-for-HTML-Complete-2.3.0.4-Evaluation && npm run prepare-package",
-    "postinstall": "node -e \"require('fs').copyFileSync('../yFiles-for-HTML-Complete-2.3.0.4-Evaluation/lib/license.json','./src/license.json')\"",
+    "preinstall": "cd ../yFiles-for-HTML-Complete-2.4.0.0-Evaluation && npm run prepare-package",
+    "postinstall": "node -e \"require('fs').copyFileSync('../yFiles-for-HTML-Complete-2.4.0.0-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",
-    "test": "ng test",
-    "lint": "ng lint",
-    "e2e": "ng e2e"
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~10.2.4",
-    "@angular/common": "~10.2.4",
-    "@angular/compiler": "~10.2.4",
-    "@angular/core": "~10.2.4",
-    "@angular/forms": "~10.2.4",
-    "@angular/platform-browser": "~10.2.4",
-    "@angular/platform-browser-dynamic": "~10.2.4",
-    "@angular/router": "~10.2.4",
-    "rxjs": "~6.6.3",
-    "tslib": "^2.0.3",
-    "yfiles": "../yFiles-for-HTML-Complete-2.3.0.4-Evaluation/lib-dev/es-modules/yfiles-23.0.4-eval-dev.tgz",
-    "zone.js": "~0.11.3"
+    "@angular/animations": "~12.1.0",
+    "@angular/common": "~12.1.0",
+    "@angular/compiler": "~12.1.0",
+    "@angular/core": "~12.1.0",
+    "@angular/forms": "~12.1.0",
+    "@angular/platform-browser": "~12.1.0",
+    "@angular/platform-browser-dynamic": "~12.1.0",
+    "@angular/router": "~12.1.0",
+    "rxjs": "~7.1.0",
+    "tslib": "^2.3.0",
+    "yfiles": "../yFiles-for-HTML-Complete-2.4.0.0-Evaluation/lib-dev/es-modules/yfiles-24.0.0-eval-dev.tgz",
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1002.1",
-    "@angular/cli": "~10.2.1",
-    "@angular/compiler-cli": "~10.2.4",
-    "@angular/language-service": "~10.2.4",
-    "@types/node": "^14.14.14",
-    "@types/jasmine": "~3.6.2",
-    "@types/jasminewd2": "~2.0.8",
-    "codelyzer": "^6.0.1",
-    "jasmine-core": "~3.6.0",
-    "jasmine-spec-reporter": "~6.0.0",
-    "karma": "~5.2.3",
+    "@angular-devkit/build-angular": "~12.1.0",
+    "@angular/cli": "~12.1.0",
+    "@angular/compiler-cli": "~12.1.0",
+    "@types/jasmine": "~3.7.7",
+    "@types/node": "^15.12.4",
+    "jasmine-core": "~3.7.1",
+    "karma": "~6.3.4",
     "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~3.0.3",
+    "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.1",
-    "karma-jasmine-html-reporter": "^1.5.4",
-    "protractor": "~7.0.0",
-    "ts-node": "~9.1.1",
-    "tslint": "~6.1.3",
-    "typescript": "~3.9.7"
+    "karma-jasmine-html-reporter": "^1.6.0",
+    "typescript": "~4.2.4"
   }
 }