From 0f63a01aec3da0c07ed5f5747e949b741373d22b Mon Sep 17 00:00:00 2001 From: Marco Santarelli Date: Wed, 7 Dec 2022 14:06:58 +0100 Subject: [PATCH] Restore Angular 14 compatibility --- angular.json | 19 +++----- karma.conf.js | 32 +++++++++++++ projects/ng2-charts/karma.conf.js | 32 +++++++++++++ projects/ng2-charts/src/test.ts | 22 +++++++++ projects/ng2-charts/tsconfig.lib.json | 13 +++++- projects/ng2-charts/tsconfig.lib.prod.json | 1 + projects/ng2-charts/tsconfig.spec.json | 3 ++ src/polyfills.ts | 53 ++++++++++++++++++++++ src/test.ts | 20 ++++++++ tsconfig.app.json | 3 +- tsconfig.json | 5 +- tsconfig.spec.json | 6 +++ 12 files changed, 192 insertions(+), 17 deletions(-) create mode 100644 karma.conf.js create mode 100644 projects/ng2-charts/karma.conf.js create mode 100644 projects/ng2-charts/src/test.ts create mode 100644 src/polyfills.ts create mode 100644 src/test.ts diff --git a/angular.json b/angular.json index 2d903d6e..a78ea5ab 100644 --- a/angular.json +++ b/angular.json @@ -20,9 +20,7 @@ "outputPath": "dist/ng2-charts-demo", "index": "src/index.html", "main": "src/main.ts", - "polyfills": [ - "zone.js" - ], + "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "assets": [ "src/favicon.ico", @@ -97,17 +95,16 @@ "test": { "builder": "@angular-devkit/build-angular:karma", "options": { - "polyfills": [ - "zone.js", - "zone.js/testing" - ], + "main": "src/test.ts", + "karmaConfig": "karma.conf.js", + "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.spec.json", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ - "@angular/material/prebuilt-themes/deeppurple-amber.css", + "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css", "src/styles.scss" ], "scripts": [] @@ -177,11 +174,9 @@ "test": { "builder": "@angular-devkit/build-angular:karma", "options": { + "main": "projects/ng2-charts/src/test.ts", "tsConfig": "projects/ng2-charts/tsconfig.spec.json", - "polyfills": [ - "zone.js", - "zone.js/testing" - ] + "karmaConfig": "projects/ng2-charts/karma.conf.js" } }, "lint": { diff --git a/karma.conf.js b/karma.conf.js new file mode 100644 index 00000000..f1dbc48f --- /dev/null +++ b/karma.conf.js @@ -0,0 +1,32 @@ +// Karma configuration file, see link for more information +// https://karma-runner.github.io/1.0/config/configuration-file.html + +module.exports = function (config) { + config.set({ + basePath: '', + frameworks: ['jasmine', '@angular-devkit/build-angular'], + plugins: [ + require('karma-jasmine'), + require('karma-coverage'), + require('karma-chrome-launcher'), + require('karma-jasmine-html-reporter'), + require('@angular-devkit/build-angular/plugins/karma') + ], + client: { + clearContext: false // leave Jasmine Spec Runner output visible in browser + }, + coverageIstanbulReporter: { + dir: require('path').join(__dirname, '../coverage/ng2-charts-demo'), + reports: ['html', 'lcovonly', 'text-summary'], + fixWebpackSourcePaths: true + }, + reporters: ['progress', 'kjhtml'], + port: 9876, + colors: true, + logLevel: config.LOG_INFO, + autoWatch: true, + browsers: ['Chrome', 'ChromeHeadless'], + singleRun: false, + restartOnFileChange: true + }); +}; diff --git a/projects/ng2-charts/karma.conf.js b/projects/ng2-charts/karma.conf.js new file mode 100644 index 00000000..b01966ad --- /dev/null +++ b/projects/ng2-charts/karma.conf.js @@ -0,0 +1,32 @@ +// Karma configuration file, see link for more information +// https://karma-runner.github.io/1.0/config/configuration-file.html + +module.exports = function (config) { + config.set({ + basePath: '', + frameworks: ['jasmine', '@angular-devkit/build-angular'], + plugins: [ + require('karma-jasmine'), + require('karma-coverage'), + require('karma-chrome-launcher'), + require('karma-jasmine-html-reporter'), + require('@angular-devkit/build-angular/plugins/karma') + ], + client: { + clearContext: false // leave Jasmine Spec Runner output visible in browser + }, + coverageIstanbulReporter: { + dir: require('path').join(__dirname, '../../coverage/ng2-charts'), + reports: ['html', 'lcovonly'], + fixWebpackSourcePaths: true + }, + reporters: ['progress', 'kjhtml'], + port: 9876, + colors: true, + logLevel: config.LOG_INFO, + autoWatch: true, + browsers: ['Chrome'], + singleRun: false, + restartOnFileChange: true + }); +}; diff --git a/projects/ng2-charts/src/test.ts b/projects/ng2-charts/src/test.ts new file mode 100644 index 00000000..01f9d5f9 --- /dev/null +++ b/projects/ng2-charts/src/test.ts @@ -0,0 +1,22 @@ +// This file is required by karma.conf.js and loads recursively all the .spec and framework files + +// import 'core-js/es7/reflect'; +import 'zone.js'; +import 'zone.js/testing'; +import { getTestBed } from '@angular/core/testing'; +import { + BrowserDynamicTestingModule, + platformBrowserDynamicTesting +} from '@angular/platform-browser-dynamic/testing'; + +declare const require: any; + +// First, initialize the Angular testing environment. +getTestBed().initTestEnvironment( + BrowserDynamicTestingModule, + platformBrowserDynamicTesting() +); +// Then we find all the tests. +const context = require.context('./', true, /\.spec\.ts$/); +// And load the modules. +context.keys().map(context); diff --git a/projects/ng2-charts/tsconfig.lib.json b/projects/ng2-charts/tsconfig.lib.json index 543fd474..ad24bf84 100644 --- a/projects/ng2-charts/tsconfig.lib.json +++ b/projects/ng2-charts/tsconfig.lib.json @@ -3,12 +3,23 @@ "extends": "../../tsconfig.json", "compilerOptions": { "outDir": "../../out-tsc/lib", + "target": "es2020", "declaration": true, "declarationMap": true, "inlineSources": true, - "types": [] + "types": [], + "lib": [ + "dom", + "es2018" + ] + }, + "angularCompilerOptions": { + "skipTemplateCodegen": true, + "strictMetadataEmit": true, + "enableResourceInlining": true }, "exclude": [ + "src/test.ts", "**/*.spec.ts" ] } diff --git a/projects/ng2-charts/tsconfig.lib.prod.json b/projects/ng2-charts/tsconfig.lib.prod.json index 06de549e..8411e6db 100644 --- a/projects/ng2-charts/tsconfig.lib.prod.json +++ b/projects/ng2-charts/tsconfig.lib.prod.json @@ -5,6 +5,7 @@ "declarationMap": false }, "angularCompilerOptions": { + "enableIvy": true, "compilationMode": "partial" } } diff --git a/projects/ng2-charts/tsconfig.spec.json b/projects/ng2-charts/tsconfig.spec.json index ce7048bc..715dd0a5 100644 --- a/projects/ng2-charts/tsconfig.spec.json +++ b/projects/ng2-charts/tsconfig.spec.json @@ -7,6 +7,9 @@ "jasmine" ] }, + "files": [ + "src/test.ts" + ], "include": [ "**/*.spec.ts", "**/*.d.ts" diff --git a/src/polyfills.ts b/src/polyfills.ts new file mode 100644 index 00000000..dcd18eac --- /dev/null +++ b/src/polyfills.ts @@ -0,0 +1,53 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + * because those flags need to be set before `zone.js` being loaded, and webpack + * will put import in the top of bundle, so user need to create a separate file + * in this directory (for example: zone-flags.ts), and put the following flags + * into that file, and then add the following code before importing zone.js. + * import './zone-flags'; + * + * The flags allowed in zone-flags.ts are listed here. + * + * The following flags will work for all browsers. + * + * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + * + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + * + * (window as any).__Zone_enable_cross_context_check = true; + * + */ + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js'; // Included with Angular CLI. + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/src/test.ts b/src/test.ts new file mode 100644 index 00000000..a6f15af3 --- /dev/null +++ b/src/test.ts @@ -0,0 +1,20 @@ +// This file is required by karma.conf.js and loads recursively all the .spec and framework files + +import 'zone.js/testing'; +import { getTestBed } from '@angular/core/testing'; +import { + BrowserDynamicTestingModule, + platformBrowserDynamicTesting +} from '@angular/platform-browser-dynamic/testing'; + +declare const require: any; + +// First, initialize the Angular testing environment. +getTestBed().initTestEnvironment( + BrowserDynamicTestingModule, + platformBrowserDynamicTesting() +); +// Then we find all the tests. +const context = require.context('./', true, /\.spec\.ts$/); +// And load the modules. +context.keys().map(context); diff --git a/tsconfig.app.json b/tsconfig.app.json index f2161bd7..226adb49 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -8,7 +8,8 @@ ] }, "files": [ - "src/main.ts" + "src/main.ts", + "src/polyfills.ts" ], "include": [ "src/**/*.d.ts" diff --git a/tsconfig.json b/tsconfig.json index 25ef3663..80c1c54d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,7 +15,7 @@ "skipLibCheck": true, "moduleResolution": "node", "importHelpers": true, - "target": "ES2022", + "target": "es2020", "module": "es2020", "lib": [ "es2018", @@ -26,8 +26,7 @@ "dist/ng2-charts/ng2-charts", "dist/ng2-charts" ] - }, - "useDefineForClassFields": false + } }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, diff --git a/tsconfig.spec.json b/tsconfig.spec.json index b18619fd..8af9a573 100644 --- a/tsconfig.spec.json +++ b/tsconfig.spec.json @@ -1,11 +1,17 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ { "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/spec", "types": [ + "node", "jasmine" ] }, + "files": [ + "src/test.ts", + "src/polyfills.ts" + ], "include": [ "src/**/*.spec.ts", "src/**/*.d.ts"