WIP upgrade

apps/ng2-charts-demo/jest.config.ts

@@ -8,7 +8,7 @@ export default {
   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
   coverageDirectory: '../../coverage/apps/ng2-charts',
   transform: {
-    '^.+\\.(ts|mjs|html)$': [
+    '^.+\\.(ts|mjs|js|html)$': [
       'jest-preset-angular',
       {
         tsconfig: '<rootDir>/tsconfig.spec.json',

apps/ng2-charts-demo/project.json

@@ -7,20 +7,24 @@
   "tags": [],
   "targets": {
     "build": {
-      "executor": "@angular-devkit/build-angular:browser",
+      "executor": "@angular-devkit/build-angular:application",
       "outputs": ["{options.outputPath}"],
       "options": {
         "outputPath": "dist/apps/ng2-charts-demo",
         "index": "apps/ng2-charts-demo/src/index.html",
-        "main": "apps/ng2-charts-demo/src/main.ts",
+        "browser": "apps/ng2-charts-demo/src/main.ts",
         "polyfills": ["zone.js"],
         "tsConfig": "apps/ng2-charts-demo/tsconfig.app.json",
         "assets": [
           "apps/ng2-charts-demo/src/favicon.ico",
           "apps/ng2-charts-demo/src/assets"
         ],
         "styles": ["apps/ng2-charts-demo/src/styles.scss"],
-        "scripts": []
+        "scripts": [],
+        "loader": {
+          ".html": "text",
+          ".ts": "text"
+        }
       },
       "configurations": {
         "production": {
@@ -39,9 +43,7 @@
           "outputHashing": "all"
         },
         "development": {
-          "buildOptimizer": false,
           "optimization": false,
-          "vendorChunk": true,
           "extractLicenses": false,
           "sourceMap": true,
           "namedChunks": true

apps/ng2-charts-demo/src/app/bar-chart/bar-chart.component.html

@@ -3,7 +3,6 @@
   class="chart"
   [data]="barChartData"
   [options]="barChartOptions"
-  [plugins]="barChartPlugins"
   [type]="barChartType"
   (chartHover)="chartHovered($event)"
   (chartClick)="chartClicked($event)"

apps/ng2-charts-demo/src/app/bar-chart/bar-chart.component.ts

@@ -1,5 +1,5 @@
 import { Component, ViewChild } from '@angular/core';
-import { ChartConfiguration, ChartData, ChartEvent, ChartType } from 'chart.js';
+import { Chart, ChartConfiguration, ChartData, ChartEvent, ChartType } from "chart.js";
 import { BaseChartDirective } from 'ng2-charts';
 
 import DataLabelsPlugin from 'chartjs-plugin-datalabels';
@@ -12,6 +12,10 @@ import DataLabelsPlugin from 'chartjs-plugin-datalabels';
 export class BarChartComponent {
   @ViewChild(BaseChartDirective) chart: BaseChartDirective | undefined;
 
+  constructor() {
+    Chart.register(DataLabelsPlugin);
+  }
+
   public barChartOptions: ChartConfiguration['options'] = {
     // We use these empty structures as placeholders for dynamic theming.
     scales: {
@@ -31,7 +35,6 @@ export class BarChartComponent {
     },
   };
   public barChartType: ChartType = 'bar';
-  public barChartPlugins = [DataLabelsPlugin];
 
   public barChartData: ChartData<'bar'> = {
     labels: ['2006', '2007', '2008', '2009', '2010', '2011', '2012'],

apps/ng2-charts-demo/src/app/chart-host/chart-host.component.ts

@@ -7,70 +7,59 @@ import {
 } from '@angular/core';
 import { BaseChartDirective } from 'ng2-charts';
 
+import ts from '../bar-chart/bar-chart.component.ts?raw';
+import html from '../bar-chart/bar-chart.component.html?raw';
+
 export const chartTypes = {
   bar: {
     heading: 'Bar Chart',
-    ts: require('!!raw-loader!../bar-chart/bar-chart.component.ts').default,
-    html: require('!!raw-loader!../bar-chart/bar-chart.component.html').default,
+    // ts: ts,
+    html: html,
   },
   doughnut: {
     heading: 'Doughnut Chart',
-    ts: require('!!raw-loader!../doughnut-chart/doughnut-chart.component.ts')
-      .default,
-    html: require('!!raw-loader!../doughnut-chart/doughnut-chart.component.html')
-      .default,
+    ts: '',
+    html: '',
   },
   dynamic: {
     heading: 'Dynamic Chart',
-    ts: require('!!raw-loader!../dynamic-chart/dynamic-chart.component.ts')
-      .default,
-    html: require('!!raw-loader!../dynamic-chart/dynamic-chart.component.html')
-      .default,
+    ts: '',
+    html: '',
   },
   line: {
     heading: 'Line Chart',
-    ts: require('!!raw-loader!../line-chart/line-chart.component.ts').default,
-    html: require('!!raw-loader!../line-chart/line-chart.component.html')
-      .default,
+    ts: '',
+    html: '',
   },
   pie: {
     heading: 'Pie Chart',
-    ts: require('!!raw-loader!../pie-chart/pie-chart.component.ts').default,
-    html: require('!!raw-loader!../pie-chart/pie-chart.component.html').default,
+    ts: '',
+    html: '',
   },
   polarArea: {
     heading: 'Polar Area Chart',
-    ts: require('!!raw-loader!../polar-area-chart/polar-area-chart.component.ts')
-      .default,
-    html: require('!!raw-loader!../polar-area-chart/polar-area-chart.component.html')
-      .default,
+    ts: '',
+    html: '',
   },
   bubble: {
     heading: 'Bubble Chart',
-    ts: require('!!raw-loader!../bubble-chart/bubble-chart.component.ts')
-      .default,
-    html: require('!!raw-loader!../bubble-chart/bubble-chart.component.html')
-      .default,
+    ts: '',
+    html: '',
   },
   radar: {
     heading: 'Radar Chart',
-    ts: require('!!raw-loader!../radar-chart/radar-chart.component.ts').default,
-    html: require('!!raw-loader!../radar-chart/radar-chart.component.html')
-      .default,
+    ts: '',
+    html: '',
   },
   scatter: {
     heading: 'Scatter Chart',
-    ts: require('!!raw-loader!../scatter-chart/scatter-chart.component.ts')
-      .default,
-    html: require('!!raw-loader!../scatter-chart/scatter-chart.component.html')
-      .default,
+    ts: '',
+    html: '',
   },
   financial: {
     heading: 'Financial Chart',
-    ts: require('!!raw-loader!../financial-chart/financial-chart.component.ts')
-      .default,
-    html: require('!!raw-loader!../financial-chart/financial-chart.component.html')
-      .default,
+    ts: '',
+    html: '',
   },
 };
 
@@ -91,7 +80,7 @@ export class ChartHostComponent implements AfterContentInit {
     if (chartTypes[compName]) {
       this.heading = chartTypes[compName].heading;
       this.html = chartTypes[compName].html;
-      this.ts = chartTypes[compName].ts;
+      // this.ts = chartTypes[compName].ts;
     }
   }
 }

apps/ng2-charts-demo/src/app/pie-chart/pie-chart.component.html

@@ -4,7 +4,6 @@
   [data]="pieChartData"
   [type]="pieChartType"
   [options]="pieChartOptions"
-  [plugins]="pieChartPlugins"
 >
 </canvas>
 

apps/ng2-charts-demo/src/app/pie-chart/pie-chart.component.ts

@@ -37,7 +37,6 @@ export class PieChartComponent {
     ],
   };
   public pieChartType: ChartType = 'pie';
-  public pieChartPlugins = [DatalabelsPlugin];
 
   // events
   public chartClicked({

apps/ng2-charts-demo/src/styles.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
-@use 'node_modules/@angular/material/index' as mat;
+@use 'node_modules/@angular/material/_index.scss' as mat;
 @import 'node_modules/prismjs/themes/prism.css';
-@import 'node_modules/highlight.js/scss/github';
+@import 'node_modules/highlight.js/scss/github.scss';
 
 @include mat.core();
 
@@ -53,7 +53,7 @@ $dark-theme: mat.define-dark-theme(
 .dark-theme {
   @include mat.all-component-colors($dark-theme);
   @include page-header-color($dark-theme);
-  @import 'node_modules/highlight.js/scss/github-dark';
+  @import 'node_modules/highlight.js/scss/github-dark.scss';
 
   .hljs {
     background: transparent;

apps/ng2-charts-demo/src/types.d.ts

@@ -0,0 +1,2 @@
+declare module "*.ts?raw" {const content: string; export default content; }
+declare module "*.html?raw" {const content: string; export default content; }

apps/ng2-charts-demo/tsconfig.json

@@ -7,7 +7,8 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "esModuleInterop": true,
   },
   "files": [],
   "include": [],