2

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

  • 我只是运行了命令：npm install danfojs --save和npm install @tensorflow/tfjs-node --save
  • 我在 Angular 中尝试了各种导入，Service例如：import 'danfojs';，import { DataFrame } from 'danfojs';甚至根据我能找到的与该主题相关的问题：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;
4

1 回答 1

3

在 MacOS 和 Windows 10 上测试

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

  1. 创建新的角度应用程序ng new danfojs-app
  2. cd danfojs-app
  3. npm install danfojs
  4. npm install jquery<-- 可选。演示也可以在没有它的情况下运行。
  5. 添加"scripts": ["./node_modules/jquery/dist/jquery.min.js"]到angular.json<-- 可选。

角.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
于 2021-11-26T18:45:51.053 回答