如何在构建 Angular 应用程序时修复 d3-dag 的 index.d.ts 错误

Question

我已经运行 Angular 12 应用程序，并且安装了 d3 和 d3-dag 来创建图形。但我在 node_modules/d3-dag...index.d.ts 文件中遇到错误。

角度版本：12.2.16 Node.js 版本：14.16.1 d3版本：7.8.5 d3-dag 版本：1.1.0

package.json

{
  "name": "client",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "dev": "ng serve --proxy-config proxy.config.json --live-reload true",
    "build": "ng build --configuration production --aot --output-hashing none --vendor-chunk=true",
    "install-dependencies": "npm install && npm install ../../../../bin/node_modules/mi-diagnostics-0.0.1.tgz --no-save",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "12.2.16",
    "@angular/common": "12.2.16",
    "@angular/compiler": "12.2.16",
    "@angular/core": "12.2.16",
    "@angular/forms": "12.2.16",
    "@angular/platform-browser": "12.2.16",
    "@angular/platform-browser-dynamic": "12.2.16",
    "@angular/router": "12.2.16",
    "@microsoft/signalr": "6.0.2",
    "@shui/core": "1.14.0-hotfix2-ie.1",
    "@types/d3": "^7.4.3",
    "d3": "^7.8.5",
    "d3-dag": "^1.1.0",
    "rxjs": "~6.5.4",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.2.16",
    "@angular-eslint/builder": "12.7.0",
    "@angular-eslint/eslint-plugin": "12.7.0",
    "@angular-eslint/eslint-plugin-template": "12.7.0",
    "@angular-eslint/schematics": "12.7.0",
    "@angular-eslint/template-parser": "12.7.0",
    "@angular/cli": "~12.2.16",
    "@angular/compiler-cli": "~12.2.0",
    "@types/estree": "^1.0.0",
    "@types/jasmine": "~3.8.0",
    "@types/node": "^12.11.1",
    "@types/d3": "^7.4.3",
    "@typescript-eslint/eslint-plugin": "4.28.2",
    "@typescript-eslint/parser": "4.28.2",
    "eslint": "^7.26.0",
    "jasmine-core": "~3.8.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.3.5"
  }

}

dag.component.ts

import { Component, Input, OnChanges, OnInit, ViewEncapsulation } from '@angular/core';
import * as d3 from 'd3';
import * as d3dag from 'd3-dag';
import { IJobGraphNode, JobGraphNodeType } from './dag-data.model';
import { getNodeStateString, getNodeTypeString } from '../utils/dag-helpers';
import { initialData } from './dag-data';

@Component({
  selector: 'app-dag-graph-viewer',
  templateUrl: './dag-graph-viewer.component.html',
  styleUrls: ['./dag-graph-viewer.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class DagGraphViewerComponent implements OnInit, OnChanges {
  jgData: IJobGraphNode[] | null = null;
  builder: d3dag.DefaultStratify;
  nodeRadius = 20;
  nodeSize = [this.nodeRadius * 2, this.nodeRadius * 2] as const;
  zoom: any;
  height: number = 0;
  width: number = 0;
  }

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "module": "es2020",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "skipLibCheck": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

tsconfig.app.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "baseUrl": "../Client",
    "module": "es2015",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

当我尝试构建角度应用程序时，出现如下错误：

Answer 1

更新类型：确保您的 @types/d3 包是最新的并且与 [电子邮件受保护] 兼容。您可以使用npm或yarn来更新它：

npm install @types/d3@latest --save-dev

或用纱线：

yarn add @types/d3@latest --dev

更新 Angular 编译器：有时，可以通过更新 Angular 编译器和相关包来解决 TypeScript 错误。您可以通过运行来做到这一点：

ng update @angular/cli @angular/core

显式类型：如果更新类型和 Angular 无法解决问题，您可以尝试为 d3-dag 库添加显式类型。在您的项目中创建一个包含以下内容的文件 d3-dag.d.ts：

declare module 'd3-dag' {

从“d3-dag”导出*； }

抑制打字错误：如果上述步骤都不起作用，并且打字错误没有导致任何功能问题，您可以暂时抑制与 d3-dag 打字相关的 TypeScript 错误。在 tsconfig.json 文件中，添加以下内容：

    {
  "compilerOptions": {
    "skipLibCheck": true
  }
}

注意：不建议将其作为永久解决方案，因为它可能隐藏其他潜在问题。

检查兼容性：确保 [email protected] 与 [email protected] 和您的 Angular 版本兼容。您可以在 d3-dag 的文档或 GitHub 存储库中查看此信息。

报告问题：如果上述步骤均不起作用，并且您认为这是 d3-dag 类型的问题，请考虑在其 GitHub 存储库或论坛上报告该问题。包括有关您的设置和遇到的错误的详细信息。

尝试这些步骤，看看它们是否有助于解决您在使用 d3-dag 的 Angular 应用程序中遇到的 TypeScript 错误。