node.js - angular 7 到 angular 8 迁移后 chartjs 的错误

Question

在迁移过程中，我已将代码从 Angular 7 迁移到 Angular 8，但出现了一些我无法修复的错误。任何人都可以帮我解决它。

迁移过程进展顺利，但我的应用程序在迁移到 Angular 8 后无法正常工作。

谁能告诉我迁移出了什么问题。因为我似乎主要在 Chartjs 部分得到错误。所有其他错误均已解决。

以下是我得到的错误。

chunk {main} main.js, main.js.map (main) 2.44 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 145 kB [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 462 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.09 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 86.1 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 2.29 MB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 329 kB [initial] [rendered]

ERROR in src/app/components/analytics/job-analytics/job-analytics.component.ts(36,5): error TS2322: Type 'undefined[]' is not assignable to type 'import("E:/ng72ng8/Fxt/Web/src/main/ui/material/node_modules/@types/chart.js/index.d.ts")'.
src/app/components/analytics/job-analytics/job-analytics.component.ts(37,5): error TS2322: Type 'undefined[]' is not assignable to type 'import("E:/ng72ng8/Fxt/Web/src/main/ui/material/node_modules/@types/chart.js/index.d.ts")'.
src/app/components/analytics/job-analytics/job-analytics.component.ts(38,5): error TS2322: Type 'undefined[]' is not assignable to type 'import("E:/ng72ng8/Fxt/Web/src/main/ui/material/node_modules/@types/chart.js/index.d.ts")'.
src/app/components/analytics/job-analytics/job-analytics.component.ts(39,5): error TS2322: Type 'undefined[]' is not assignable to type 'import("E:/ng72ng8/Fxt/Web/src/main/ui/material/node_modules/@types/chart.js/index.d.ts")'.
src/app/components/analytics/job-analytics/job-analytics.component.ts(544,13): error TS2322: Type '{ labels: any; datasets: { data: any; label: string; backgroundColor: string; borderColor: string; pointBorderColor: string; pointBackgroundColor: string; pointHoverBackgroundColor: string; ... 5 more ...; datalabels: { ...; }; }[]; }' is not assignable to type 'ChartData'.
  Types of property 'datasets' are incompatible.
    Type '{ data: any; label: string; backgroundColor: string; borderColor: string; pointBorderColor: string; pointBackgroundColor: string; pointHoverBackgroundColor: string; pointHoverBorderColor: string; ... 4 more ...; datalabels: { ...; }; }[]' is not assignable to type 'ChartDataSets[]'.
      Type '{ data: any; label: string; backgroundColor: string; borderColor: string; pointBorderColor: string; pointBackgroundColor: string; pointHoverBackgroundColor: string; pointHoverBorderColor: string; ... 4 more ...; datalabels: { ...; }; }' is not assignable to type 'ChartDataSets'.
        Types of property 'datalabels' are incompatible.
          Type '{ align: string; anchor: string; }' is not assignable to type 'Options'.
            Types of property 'align' are incompatible.
              Type 'string' is not assignable to type 'number | "left" | "right" | "start" | "center" | "end" | "top" | "bottom" | Align[] | ((context: Context) => Align)'.
src/app/components/analytics/job-analytics/job-analytics.component.ts(551,13): error TS2322: Type '{ labels: any; datasets: { data: any; label: string; borderColor: string; backgroundColor: string; pointBorderColor: string; pointBackgroundColor: string; pointHoverBackgroundColor: string; ... 5 more ...; datalabels: { ...; }; }[]; }' is not assignable to type 'ChartData'.
  Types of property 'datasets' are incompatible.
    Type '{ data: any; label: string; borderColor: string; backgroundColor: string; pointBorderColor: string; pointBackgroundColor: string; pointHoverBackgroundColor: string; pointHoverBorderColor: string; ... 4 more ...; datalabels: { ...; }; }[]' is not assignable to type 'ChartDataSets[]'.
      Type '{ data: any; label: string; borderColor: string; backgroundColor: string; pointBorderColor: string; pointBackgroundColor: string; pointHoverBackgroundColor: string; pointHoverBorderColor: string; ... 4 more ...; datalabels: { ...; }; }' is not assignable to type 'ChartDataSets'.
        Types of property 'datalabels' are incompatible.
          Type '{ align: string; anchor: string; }' is not assignable to type 'Options'.
            Types of property 'align' are incompatible.
              Type 'string' is not assignable to type 'number | "left" | "right" | "start" | "center" | "end" | "top" | "bottom" | Align[] | ((context: Context) => Align)'.
src/app/components/analytics/job-analytics/job-analytics.component.ts(558,13): error TS2322: Type '{ labels: any; datasets: { data: any; label: string; borderColor: string; backgroundColor: string; pointBorderColor: string; pointBackgroundColor: string; pointHoverBackgroundColor: string; ... 5 more ...; datalabels: { ...; }; }[]; }' is not assignable to type 'ChartData'.
  Types of property 'datasets' are incompatible.
    Type '{ data: any; label: string; borderColor: string; backgroundColor: string; pointBorderColor: string; pointBackgroundColor: string; pointHoverBackgroundColor: string; pointHoverBorderColor: string; ... 4 more ...; datalabels: { ...; }; }[]' is not assignable to type 'ChartDataSets[]'.
      Type '{ data: any; label: string; borderColor: string; backgroundColor: string; pointBorderColor: string; pointBackgroundColor: string; pointHoverBackgroundColor: string; pointHoverBorderColor: string; ... 4 more ...; datalabels: { ...; }; }' is not assignable to type 'ChartDataSets'.
        Types of property 'datalabels' are incompatible.
          Type '{ align: string; anchor: string; }' is not assignable to type 'Options'.
            Types of property 'align' are incompatible.
              Type 'string' is not assignable to type 'number | "left" | "right" | "start" | "center" | "end" | "top" | "bottom" | Align[] | ((context: Context) => Align)'.
src/app/components/analytics/job-analytics/job-analytics.component.ts(565,13): error TS2322: Type '{ labels: any; datasets: { data: any; label: string; borderColor: string; backgroundColor: string; pointBorderColor: string; pointBackgroundColor: string; pointHoverBackgroundColor: string; ... 5 more ...; datalabels: { ...; }; }[]; }' is not assignable to type 'ChartData'.
  Types of property 'datasets' are incompatible.
    Type '{ data: any; label: string; borderColor: string; backgroundColor: string; pointBorderColor: string; pointBackgroundColor: string; pointHoverBackgroundColor: string; pointHoverBorderColor: string; ... 4 more ...; datalabels: { ...; }; }[]' is not assignable to type 'ChartDataSets[]'.
      Type '{ data: any; label: string; borderColor: string; backgroundColor: string; pointBorderColor: string; pointBackgroundColor: string; pointHoverBackgroundColor: string; pointHoverBorderColor: string; ... 4 more ...; datalabels: { ...; }; }' is not assignable to type 'ChartDataSets'.
        Types of property 'datalabels' are incompatible.
          Type '{ align: string; anchor: string; }' is not assignable to type 'Options'.
            Types of property 'align' are incompatible.
              Type 'string' is not assignable to type 'number | "left" | "right" | "start" | "center" | "end" | "top" | "bottom" | Align[] | ((context: Context) => Align)'.
src/app/components/analytics/run-history/run-history.component.ts(42,3): error TS2322: Type 'undefined[]' is not assignable to type 'import("E:/ng72ng8/Fxt/Web/src/main/ui/material/node_modules/@types/chart.js/index.d.ts")'.
src/app/components/analytics/run-history/run-history.component.ts(43,3): error TS2322: Type 'undefined[]' is not assignable to type 'import("E:/ng72ng8/Fxt/Web/src/main/ui/material/node_modules/@types/chart.js/index.d.ts")'.
src/app/components/analytics/run-history/run-history.component.ts(44,3): error TS2322: Type 'undefined[]' is not assignable to type 'import("E:/ng72ng8/Fxt/Web/src/main/ui/material/node_modules/@types/chart.js/index.d.ts")'.
src/app/components/coverage/api-coverage/api-coverage.component.ts(152,15): error TS2322: Type '(context: Context) => string | string[] | CanvasGradient | CanvasPattern | ChartColor[]' is not assignable to type 'string | CanvasGradient | CanvasPattern | (string | CanvasGradient | CanvasPattern)[] | ((context: Context) => string | CanvasGradient | CanvasPattern)'.
  Type '(context: Context) => string | string[] | CanvasGradient | CanvasPattern | ChartColor[]' is not assignable to type '(context: Context) => string | CanvasGradient | CanvasPattern'.
    Type 'string | string[] | CanvasGradient | CanvasPattern | ChartColor[]' is not assignable to type 'string | CanvasGradient | CanvasPattern'.
      Type 'string[]' is not assignable to type 'string | CanvasGradient | CanvasPattern'.
        Type 'string[]' is not assignable to type 'string'.
src/app/components/coverage/api-coverage/api-coverage.component.ts(195,15): error TS2322: Type '(context: Context) => string | string[] | CanvasGradient | CanvasPattern | ChartColor[]' is not assignable to type 'string | CanvasGradient | CanvasPattern | (string | CanvasGradient | CanvasPattern)[] | ((context: Context) => string | CanvasGradient | CanvasPattern)'.
  Type '(context: Context) => string | string[] | CanvasGradient | CanvasPattern | ChartColor[]' is not assignable to type '(context: Context) => string | CanvasGradient | CanvasPattern'.
    Type 'string | string[] | CanvasGradient | CanvasPattern | ChartColor[]' is not assignable to type 'string | CanvasGradient | CanvasPattern'.
      Type 'string[]' is not assignable to type 'string | CanvasGradient | CanvasPattern'.
        Type 'string[]' is not assignable to type 'string'.
src/app/components/coverage/api-coverage/api-coverage.component.ts(238,15): error TS2322: Type '(context: Context) => string | string[] | CanvasGradient | CanvasPattern | ChartColor[]' is not assignable to type 'string | CanvasGradient | CanvasPattern | (string | CanvasGradient | CanvasPattern)[] | ((context: Context) => string | CanvasGradient | CanvasPattern)'.
  Type '(context: Context) => string | string[] | CanvasGradient | CanvasPattern | ChartColor[]' is not assignable to type '(context: Context) => string | CanvasGradient | CanvasPattern'.
    Type 'string | string[] | CanvasGradient | CanvasPattern | ChartColor[]' is not assignable to type 'string | CanvasGradient | CanvasPattern'.
      Type 'string[]' is not assignable to type 'string | CanvasGradient | CanvasPattern'.
        Type 'string[]' is not assignable to type 'string'.
src/app/components/dialogs/testsuit-edit-dialog/testsuit-edit-dialog.component.ts(1,26): error TS2307: Cannot find module '@angular/http'.
src/app/components/dialogs/xss-filter-dialog/xss-filter-dialog.component.ts(9,25): error TS2307: Cannot find module '@angular/core/src/render3'.
src/app/components/issues/issues-edit/issues-edit.component.ts(14,31): error TS2307: Cannot find module '@angular/http'.
src/app/components/projects/project-recommendations/project-recommendations.component.ts(20,50): error TS2305: Module '"E:/ng72ng8/Fxt/Web/src/main/ui/material/node_modules/@types/chart.js"' has no exported member 'Label'.
src/app/components/projects/project-recommendations/project-recommendations.component.ts(20,57): error TS2305: Module '"E:/ng72ng8/Fxt/Web/src/main/ui/material/node_modules/@types/chart.js"' has no exported member 'Color'.
src/app/components/projects/project-recommendations/project-recommendations.component.ts(77,12): error TS2322: Type '{ responsive: true; }' is not assignable to type 'ChartOptions & { annotation: any; }'.
  Property 'annotation' is missing in type '{ responsive: true; }' but required in type '{ annotation: any; }'.
src/app/components/projects/project-recommendations/project-recommendations.component.ts(81,12): error TS2322: Type '{ scales: { yAxes: { ticks: { beginAtZero: true; }; }[]; }; }' is not assignable to type 'ChartOptions & { annotation: any; }'.
  Property 'annotation' is missing in type '{ scales: { yAxes: { ticks: { beginAtZero: true; }; }[]; }; }' but required in type '{ annotation: any; }'.
src/app/components/projects/projects-config/projects-config.component.ts(41,50): error TS2305: Module '"E:/ng72ng8/Fxt/Web/src/main/ui/material/node_modules/@types/chart.js"' has no exported member 'Label'.
src/app/components/projects/projects-config/projects-config.component.ts(41,57): error TS2305: Module '"E:/ng72ng8/Fxt/Web/src/main/ui/material/node_modules/@types/chart.js"' has no exported member 'Color'.
src/app/components/projects/projects-config/projects-config.component.ts(41,63): error TS2305: Module '"E:/ng72ng8/Fxt/Web/src/main/ui/material/node_modules/@types/chart.js"' has no exported member 'borderColor'.
src/app/components/projects/projects-config/projects-config.component.ts(167,14): error TS2322: Type '{ responsive: true; }' is not assignable to type 'ChartOptions & { annotation: any; }'.
  Property 'annotation' is missing in type '{ responsive: true; }' but required in type '{ annotation: any; }'.
src/app/components/projects/projects-config/projects-config.component.ts(171,14): error TS2322: Type '{ scales: { xAxes: { display: true; scaleLabel: { display: true; labelString: string; }; }[]; yAxes: { display: true; ticks: { beginAtZero: true; callback: (value: any) => any; }; scaleLabel: { display: true; labelString: string; }; }[]; }; }' is not assignable to type 'ChartOptions & { annotation: any; }'.
  Property 'annotation' is missing in type '{ scales: { xAxes: { display: true; scaleLabel: { display: true; labelString: string; }; }[]; yAxes: { display: true; ticks: { beginAtZero: true; callback: (value: any) => any; }; scaleLabel: { display: true; labelString: string; }; }[]; }; }' but required in type '{ annotation: any; }'.
src/app/components/run-detail/run-detail.component.ts(17,32): error TS2307: Cannot find module '@angular/animations/browser/src/render/shared'.
src/app/components/run-list/run-list.component.ts(48,3): error TS2740: Type 'undefined[]' is missing the following properties from type 'import("E:/ng72ng8/Fxt/Web/src/main/ui/material/node_modules/@types/chart.js/index.d.ts")': config, data, destroy, update, and 13 more.
src/app/components/run-list/run-list.component.ts(49,3): error TS2322: Type 'undefined[]' is not assignable to type 'import("E:/ng72ng8/Fxt/Web/src/main/ui/material/node_modules/@types/chart.js/index.d.ts")'.
src/app/components/run-list/run-list.component.ts(50,3): error TS2322: Type 'undefined[]' is not assignable to type 'import("E:/ng72ng8/Fxt/Web/src/main/ui/material/node_modules/@types/chart.js/index.d.ts")'.
src/app/components/run-list/run-list.component.ts(51,3): error TS2322: Type 'undefined[]' is not assignable to type 'import("E:/ng72ng8/Fxt/Web/src/main/ui/material/node_modules/@types/chart.js/index.d.ts")'.
src/app/components/testsuites/test-suite-list/test-suite-list.component.ts(23,50): error TS2305: Module '"E:/ng72ng8/Fxt/Web/src/main/ui/material/node_modules/@types/chart.js"' has no exported member 'Label'.
src/app/components/testsuites/test-suite-list/test-suite-list.component.ts(23,57): error TS2305: Module '"E:/ng72ng8/Fxt/Web/src/main/ui/material/node_modules/@types/chart.js"' has no exported member 'Color'.
src/app/components/testsuites/test-suite-list/test-suite-list.component.ts(100,16): error TS2322: Type '{ scales: { xAxes: { display: true; scaleLabel: { display: true; labelString: string; }; }[]; yAxes: { display: true; ticks: { beginAtZero: true; callback: (value: any) => any; }; scaleLabel: { display: true; labelString: string; }; }[]; }; }' is not assignable to type 'ChartOptions & { annotation: any; }'.
  Property 'annotation' is missing in type '{ scales: { xAxes: { display: true; scaleLabel: { display: true; labelString: string; }; }[]; yAxes: { display: true; ticks: { beginAtZero: true; callback: (value: any) => any; }; scaleLabel: { display: true; labelString: string; }; }[]; }; }' but required in type '{ annotation: any; }'.
src/app/components/vulnerability-dashboard/vulnerability-dashboard.component.ts(87,25): error TS2322: Type '(context: Context) => string | string[] | CanvasGradient | CanvasPattern | ChartColor[]' is not assignable to type 'string | CanvasGradient | CanvasPattern | (string | CanvasGradient | CanvasPattern)[] | ((context: Context) => string | CanvasGradient | CanvasPattern)'.
  Type '(context: Context) => string | string[] | CanvasGradient | CanvasPattern | ChartColor[]' is not assignable to type '(context: Context) => string | CanvasGradient | CanvasPattern'.
    Type 'string | string[] | CanvasGradient | CanvasPattern | ChartColor[]' is not assignable to type 'string | CanvasGradient | CanvasPattern'.
      Type 'string[]' is not assignable to type 'string | CanvasGradient | CanvasPattern'.
        Type 'string[]' is not assignable to type 'string'.

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
i ｢wdm｣: Failed to compile.

标签： node.jsangulartypescript