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

【问题标题】：How to import and use Tensorflow's DANFO.js library inside an Angular web app?如何在 Angular Web 应用程序中导入和使用 Tensorflow 的 DANFO.js 库？
【发布时间】：2021-12-31 15:27:00
【问题描述】：

我正在尝试在 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;

【问题讨论】：

  • 您还必须安装@tensorflow/tfjs-node。检查这里，danfo.jsdata.org/getting-started#creating-a-dataframe-series
  • 即使安装了@tensorflow/tfjs-node，问题仍然存在。
  • 很抱歉，我找不到任何说明我需要安装 @tensorflow/tfjs-node 的参考资料（在您提供的链接中）。 @Piyush 耆那教

标签： javascript angular typescript tensorflow danfojs


【解决方案1】：

在 MacOS 和 Windows 10 上测试

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

  1. 使用ng new danfojs-app 创建新的 Angular 应用程序
  2. cd danfojs-app
  3. npm install danfojs
  4. npm install jquery
  5. 将"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"
}
  1. 将"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
  }
}
  1. 确保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()

    });
  }
}
  1. 确保app.component.html 看起来像这样：
<div class="content" role="main">
<span>{{ title }} app is running!</span>
</div>
  1. 运行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

Windows 10 上的版本：

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

【讨论】：

  • 不，您不必安装jquery。这只是为了演示目的。将strictTemplates（或以前版本的fullTemplateTypeCheck）设置为false 对我不起作用，但如果它适合您，非常欢迎您将其添加到答案中。
  • 啊，是的，我很抱歉，我的错 - 我想使用你的所有步骤，除了 jquery。我会尽快尝试的:)
  • 您是否按照步骤 1 到 9 进行操作？
  • 我刚刚确认该解决方案适用于 MacOS 和 Windows 10。
  • 不知道如何提供帮助..正如我所说，它适用于我的 Windows 10 和 MacOS..我在答案的底部列出了所有版本。也许你在 VS 代码中设置了一些全局设置。
猜你喜欢
  • 2017-08-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-02-13
  • 1970-01-01
  • 1970-01-01
  • 2016-09-02
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode