如何在 Angular 网络应用程序中导入和使用 Tensorflow 的 DANFO.js 库？

Question

我正在尝试在 Angular web app 中使用 Tensorflow 的 DANFO.js 库（使用 Ionic 组件，但这无关紧要）。

我只是运行命令：npm install danfojs --save 和 npm install @tensorflow/tfjs-node --save
我尝试了 Angular Service 中的各种导入，例如：import 'danfojs';、import { DataFrame } from 'danfojs'; 甚至仅根据 related question to this topic 我能找到： import { DataFrame } from 'danfojs/dist/core/frame';
上面的例子都不行
我什至尝试在 app.module 中导入 DANFO.js 而不做任何更改

而且我总是收到此错误消息（其余错误正在编辑中）：

Build at: 2021-11-21T21:38:12.984Z - Hash: 5f05ff4be188e54ccaaf - Time: 10137ms
[ng] Error: node_modules/danfojs/types/core/generic.d.ts:75:26 - error TS2307: Cannot find module '@tensorflow/tfjs-node' or its corresponding type declarations.    
[ng] 75     get tensor(): import("@tensorflow/tfjs-node").Tensor1D | import("@tensorflow/tfjs-node").Tensor2D;
[ng]                             ~~~~~~~~~~~~~~~~~~~~~~~
[ng] Error: node_modules/danfojs/types/core/generic.d.ts:75:69 - error TS2307: Cannot find module '@tensorflow/tfjs-node' or its corresponding type declarations.    
[ng] 75     get tensor(): import("@tensorflow/tfjs-node").Tensor1D | import("@tensorflow/tfjs-node").Tensor2D;

如何在 Angular 应用程序（特别是在服务内部）中使用 DANFO.js？

编辑：

我根据下面的答案将代码添加到tsconfig.js，不幸的是错误仍然存在。这是我的 tsconfig.js 文件：

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

整个错误代码太长以至于不适合 VS Code 终端（只有数百个错误）：

[ng] 84     to_csv(options?: CsvOutputOptionsNode): string | void;
[ng]               ~~~~~~~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:84:20 - error TS1109: Expression expected.
[ng] 84     to_csv(options?: CsvOutputOptionsNode): string | void;
[ng]                       ~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:84:22 - error TS2693: 'CsvOutputOptionsNode' only refers to a type, but is being used as a value here.
[ng] 84     to_csv(options?: CsvOutputOptionsNode): string | void;
[ng]                         ~~~~~~~~~~~~~~~~~~~~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:84:43 - error TS1005: ';' expected.
[ng] 84     to_csv(options?: CsvOutputOptionsNode): string | void;
[ng]                                              ~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:84:45 - error TS2693: 'string' only refers to a type, but is being used as a value here.
[ng] 84     to_csv(options?: CsvOutputOptionsNode): string | void;
[ng]                                                ~~~~~~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:84:54 - error TS2532: Object 
is possibly 'undefined'.
[ng] 84     to_csv(options?: CsvOutputOptionsNode): string | void;
[ng]                                                         ~~~~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:84:58 - error TS1109: Expression expected.
[ng] 84     to_csv(options?: CsvOutputOptionsNode): string | void;
[ng]                                                             ~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:85:5 - error TS2304: Cannot find name 'to_json'.
[ng] 85     to_json(options?: {
[ng]        ~~~~~~~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:85:13 - error TS2304: Cannot 
find name 'options'.
[ng] 85     to_json(options?: {
[ng]                ~~~~~~~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:85:21 - error TS1109: Expression expected.
[ng] 85     to_json(options?: {
[ng]                        ~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:86:18 - error TS2362: The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
[ng] 86         format?: "row" | "column";
[ng]                     ~~~~~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:86:26 - error TS2363: The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
[ng] 86         format?: "row" | "column";
[ng]                             ~~~~~~~~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:86:34 - error TS1005: ',' expected.
[ng] 86         format?: "row" | "column";
[ng]                                     ~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:87:20 - error TS2693: 'string' only refers to a type, but is being used as a value here.
[ng] 87         filePath?: string;
[ng]                       ~~~~~~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:87:26 - error TS1005: ',' expected.
[ng] 87         filePath?: string;
[ng]                             ~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:88:7 - error TS1005: ';' expected.
[ng] 88     }): object | void;
[ng]          ~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:88:9 - error TS2304: Cannot find name 'object'.
[ng] 88     }): object | void;
[ng]            ~~~~~~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:88:18 - error TS2532: Object 
is possibly 'undefined'.
[ng] 88     }): object | void;
[ng]                     ~~~~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:88:22 - error TS1109: Expression expected.
[ng] 88     }): object | void;
[ng]                         ~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:89:5 - error TS2304: Cannot find name 'to_excel'.
[ng] 89     to_excel(options?: {
[ng]        ~~~~~~~~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:89:14 - error TS2304: Cannot 
find name 'options'.
[ng] 89     to_excel(options?: {
[ng]                 ~~~~~~~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:89:22 - error TS1109: Expression expected.
[ng] 89     to_excel(options?: {
[ng]                         ~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:90:20 - error TS2693: 'string' only refers to a type, but is being used as a value here.
[ng] 90         filePath?: string;
[ng]                       ~~~~~~
[ng] Error: 6mnode_modules/danfojs/types/shared/types.d.ts:90:26 - error TS1005: ',' expected.
[ng] 90         filePath?: string;
[ng]                             ~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:91:21 - error TS2693: 'string' only refers to a type, but is being used as a value here.
[ng] 91         sheetName?: string;
[ng]                        ~~~~~~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:91:27 - error TS1005: ',' expected.
[ng] 91         sheetName?: string;
[ng]                              ~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:92:7 - error TS1005: ';' expected.
[ng] 92     }): void;
[ng]          ~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:92:13 - error TS1109: Expression expected.
[ng] 92     }): void;
[ng]                ~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:93:12 - error TS1005: ';' expected.
[ng] 93     print(): void;
[ng]               ~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:93:18 - error TS1109: Expression expected.
[ng] 93     print(): void;
[ng]                     ~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:94:1 - error TS1128: Declaration or statement expected.
[ng] 94 }
[ng]    ~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:201:5 - error TS1131: Property or signature expected.
[ng] 201     get dtype(): string;
[ng]         ~~~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:201:5 - error TS2304: Cannot 
find name 'get'.
[ng] 201     get dtype(): string;
[ng]         ~~~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:201:9 - error TS1005: ';' expected.
[ng] 201     get dtype(): string;
[ng]             ~~~~~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:201:9 - error TS2304: Cannot 
find name 'dtype'.
[ng] 201     get dtype(): string;
[ng]             ~~~~~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:201:16 - error TS1005: ';' expected.
[ng] 201     get dtype(): string;
[ng]                    ~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:201:18 - error TS2693: 'string' only refers to a type, but is being used as a value here.
[ng] 201     get dtype(): string;
[ng]                      ~~~~~~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:202:5 - error TS2304: Cannot 
find name 'drop_duplicates'.
[ng] 202     drop_duplicates(options?: {
[ng]         ~~~~~~~~~~~~~~~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:202:21 - error TS2304: Cannot find name 'options'.
[ng] 202     drop_duplicates(options?: {
[ng]                         ~~~~~~~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:202:29 - error TS1109: Expression expected.
[ng] 202     drop_duplicates(options?: {
[ng]                                 ~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:203:16 - error TS2362: The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
[ng] 203         keep?: "first" | "last";
[ng]                    ~~~~~~~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:203:26 - error TS2363: The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or 
an enum type.
[ng] 203         keep?: "first" | "last";
[ng]                              ~~~~~~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:203:32 - error TS1005: ',' expected.
[ng] 203         keep?: "first" | "last";
[ng]                                    ~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:204:19 - error TS2693: 'boolean' only refers to a type, but is being used as a value here.
[ng] 204         inplace?: boolean;
[ng]                       ~~~~~~~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:204:26 - error TS1005: ',' expected.
[ng] 204         inplace?: boolean;
[ng]                              ~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:205:7 - error TS1005: ';' expected.
[ng] 205     }): Series | void;
[ng]           ~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:205:9 - error TS2362: The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
[ng] 205     }): Series | void;
[ng]             ~~~~~~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:205:18 - error TS2532: Object is possibly 'undefined'.
[ng] 205     }): Series | void;
[ng]                      ~~~~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:205:22 - error TS1109: Expression expected.
[ng] 205     }): Series | void;
[ng]                          ~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:206:5 - error TS2304: Cannot 
find name 'astype'.
[ng] 206     astype(dtype: "float32" | "int32" | "string" | "boolean", options?: {    
[ng]         ~~~~~~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:206:12 - error TS2304: Cannot find name 'dtype'.
[ng] 206     astype(dtype: "float32" | "int32" | "string" | "boolean", options?: {    
[ng]                ~~~~~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:206:17 - error TS1005: ',' expected.
[ng] 206     astype(dtype: "float32" | "int32" | "string" | "boolean", options?: {    
[ng]                     ~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:206:19 - error TS2362: The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
[ng] 206     astype(dtype: "float32" | "int32" | "string" | "boolean", options?: {    
[ng]                       ~~~~~~~~~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:206:31 - error TS2363: The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or 
an enum type.
[ng] 206     astype(dtype: "float32" | "int32" | "string" | "boolean", options?: {
[ng]                                   ~~~~~~~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:206:41 - error TS2363: The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or 
an enum type.
[ng] 206     astype(dtype: "float32" | "int32" | "string" | "boolean", options?: {
[ng]                                             ~~~~~~~~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:206:52 - error TS2363: The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or 
an enum type.
[ng] 206     astype(dtype: "float32" | "int32" | "string" | "boolean", options?: {
[ng]                                                        ~~~~~~~~~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:206:63 - error TS2304: Cannot find name 'options'.
[ng] 206     astype(dtype: "float32" | "int32" | "string" | "boolean", options?: {    
[ng]                                                                   ~~~~~~~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:206:71 - error TS1109: Expression expected.
[ng] 206     astype(dtype: "float32" | "int32" | "string" | "boolean", options?: {    
[ng]                                                                           ~      
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:207:19 - error TS2693: 'boolean' only refers to a type, but is being used as a value here.
[ng] 207         inplace?: boolean;
[ng]                       ~~~~~~~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:207:26 - error TS1005: ',' expected.
[ng] 207         inplace?: boolean;
[ng]                              ~
[ng] Error: node_modules/danfojs/types/shared/types.d.ts:208:7 - error TS1005: ';' expected.
[ng] 208     }): Series | void;

Answer 1

在 MacOS 和 Windows10

上测试

尝试以下步骤安装和使用 `danfojs` 结合 `angular`:

使用 ng new danfojs-app
cd danfojs-app
npm install danfojs
npm install jquery <-- 可选。演示也可以在没有它的情况下运行。
将 "scripts": ["./node_modules/jquery/dist/jquery.min.js"] 添加到 angular.json <-- 可选。

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "danfojs-app": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/danfojs-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": ["./node_modules/jquery/dist/jquery.min.js"] 
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "danfojs-app:build:production"
            },
            "development": {
              "browserTarget": "danfojs-app:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "danfojs-app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        }
      }
    }
  },
  "defaultProject": "danfojs-app"
}

将 "skipLibCheck": true 添加到 tsconfig.json，这将阻止 Typescript 对所有导入的库进行类型检查：

/* 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": "es2017",
    "module": "es2020",
    "skipLibCheck": true,
    "lib": [
      "es2020",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

确保 app.component.ts 看起来像这样（jquery 部分是可选的，可以省略）：

import { Component, OnInit  } from '@angular/core';
declare var $: any;
import * as dfd from "danfojs";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'A danfojs test';

  public ngOnInit()
  {
    $(document).ready(function(){

        const df = new dfd.DataFrame(
        { pig: [20, 18, 489, 675, 1776], horse: [4, 25, 281, 600, 1900] },
        { index: [1990, 1997, 2003, 2009, 2014] }
      );
      df.head().print()
      const s = new dfd.Series([1, 3, 2, 6, 10, 34, 40, 51, 90, 75]);
      s.print()

    });
  }
}

确保 app.component.html 看起来像这样：

<div class="content" role="main">
<span>{{ title }} app is running!</span>
</div>

运行 ng serve

然后在浏览器中导航到 localhost:4200 后，您应该会得到这样的结果：

将 `Plotly` 与 `danfojs`

结合使用

如果你也想使用 Plotly 来可视化事物，那么将 index.html 更改为：

!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>DanfojsApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdn.plot.ly/plotly-1.58.4.min.js"></script>
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

像这样更改app.component.html：

<div class="content" role="main">
<span>{{ title }} app is running!</span>
<div id="plot_div"></div>
</div>

最后把 app.component.ts 改成这样：

import { Component, OnInit  } from '@angular/core';
declare var $: any;
import * as dfd from "danfojs";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'A danfojs test';

  public ngOnInit()
  {
    $(document).ready(function(){

        const df = new dfd.DataFrame(
        { pig: [20, 18, 489, 675, 1776], horse: [4, 25, 281, 600, 1900] },
        { index: [1990, 1997, 2003, 2009, 2014] }
      );
      df.head().print()
      const s = new dfd.Series([1, 3, 2, 6, 10, 34, 40, 51, 90, 75]);
      s.print()
      df['plot']("plot_div").line()
    });
  }
}

结果：

MacOS 上的版本：

Angular CLI: 13.0.3
Node: 16.10.0
Package Manager: npm 8.1.4
OS: darwin x64
Danfojs: 0.3.3
Plotly: 1.58.4

Windows10 上的版本：

Angular CLI: 13.0.3
Node: 16.13.0
Package Manager: npm 8.1.4
OS: win32 x64
Danfojs: 0.3.3
Plotly: 1.58.4

如何在 Angular 网络应用程序中导入和使用 Tensorflow 的 DANFO.js 库？

How to import and use Tensorflow's DANFO.js library inside an Angular web app?

javascript

angular

typescript

tensorflow

danfojs

如何在 Angular 应用程序（特别是在服务内部）中使用 DANFO.js？

在 MacOS 和 Windows10

尝试以下步骤安装和使用 `danfojs` 结合 `angular`:

将 `Plotly` 与 `danfojs`

如何在 Angular 网络应用程序中导入和使用 Tensorflow 的 DANFO.js 库？

How to import and use Tensorflow's DANFO.js library inside an Angular web app?

javascript

angular

typescript

tensorflow

danfojs

如何在 Angular 应用程序（特别是在服务内部）中使用 DANFO.js？

在 MacOS 和 Windows10

尝试以下步骤安装和使用 danfojs 结合 angular:

将 Plotly 与 danfojs

尝试以下步骤安装和使用 `danfojs` 结合 `angular`:

将 `Plotly` 与 `danfojs`