javascript - Angular chart.js "Kan inte använda import-sats utanför en modul"

Jag skulle vilja använda chart.js men jag har ett problem. Enligt min åsikt blockerar detta problem korrekt import av detta bibliotek.

Jag lade även till detta. Hjälpte inte.

"type": "module",

Jag försöker detta men jag tror att det är ett annat problem "Uncaught SyntaxError: Cannot use import statement outside a module" när jag importerar ECMAScript 6

import { Chart } from 'chart.js/auto'

@Component({
  selector: 'app-line-add-edit',
  templateUrl: './line-add-edit.component.html',
  styleUrls: ['./line-add-edit.component.scss']
})

export class LineAddEditComponent implements OnInit {

  @ViewChild('chartCanvas') private chartCanvasRef!: ElementRef;
  private chartInstance: Chart | undefined;

.html

<div>
    <canvas #chartCanvas
      (mousemove)="onMouseMove($event)"
      (mouseout)="onMouseOut()"
      style="max-width: 600px; margin: 0 auto;"
    ></canvas>
</div>

.fel

Uncaught SyntaxError: Cannot use import statement outside a module (at scripts.js:7:1)

tsconfig

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "useDefineForClassFields": false,
    "lib": [
      "ES2022",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

package.json

{
  "name": "dupa",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "type": "module",
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.1.5",
    "@angular/cdk": "^16.1.5",
    "@angular/common": "^16.1.0",
    "@angular/compiler": "^16.1.0",
    "@angular/core": "^16.1.0",
    "@angular/forms": "^16.1.0",
    "@angular/material": "^16.1.5",
    "@angular/platform-browser": "^16.1.0",
    "@angular/platform-browser-dynamic": "^16.1.0",
    "@angular/router": "^16.1.0",
    "@material/form-field": "^14.0.0",
    "@material/grid-list": "^4.0.0",
    "@material/theme": "^14.0.0",
    "@material/toolbar": "^2.3.0",
    "@types/chart.js": "^2.9.37",
    "chart.js": "^4.3.1",
    "material-icons": "^1.13.8",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.1.4",
    "@angular/cli": "~16.1.4",
    "@angular/compiler-cli": "^16.1.0",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.6.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.1.3"
  }
}

Svar #1

ok. nedgradera chart.js till version 3.9 löser problemet

npm uninstall chart.js
npm install [email