在 Angular 6 项目中使用 @tensorflow/tfjs 时出错

Question

我已经生成了一个没有其他依赖项的 Angular 6 项目，该项目非常干净，唯一的依赖项是 @tensorflow/tfjs

如果我在 localhost:4200 上服务我的项目，我收到的消息是这样的：

找不到模块：错误：无法解析 C:\User\user\bla\bla 中的“加密”

问题是我想要一个 tensorflow 仅在最后 5 个版本上支持的功能，而我从 0.11.1 及更高版本中选择的任何版本在 web pack 开始捆绑代码时总是无法编译或失败。

这是我在 tensorflow.js 上提出的 GitHub 问题，但还没有解决方案。 https://github.com/tensorflow/tfjs/issues/494

可以在此处找到实时代码。

https://stackblitz.com/edit/angular-eu4cjy

这里也是代码示例

app.component.ts

import { Component, OnInit } from '@angular/core';
import * as tf from '@tensorflow/tfjs';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  implements OnInit  {



  // TRAINING DATA.
  x_train = tf.tensor2d([[0, 0], [0, 1], [1, 0], [1, 1]]);
  y_train = tf.tensor2d([[0], [1], [1], [0]]);

  // Defining a model.
  model: tf.Sequential;

  prediction: any;

  constructor() { }

  ngOnInit() {

  }

  async initModel() {

    this.model = tf.sequential();
    this.model.add(tf.layers.dense({ units: 8, inputShape: [2], activation: 'tanh' })); // input layer
    this.model.add(tf.layers.dense({ units: 1, activation: 'sigmoid' })); // output layer
    const optimizer = tf.train.sgd(0.01);
    this.model.compile({
      optimizer: optimizer,
      loss: 'binaryCrossentropy',
    });


    // Creating dataset
    const xs = tf.tensor2d([[0, 0], [0, 1], [1, 0], [1, 1]]);
    xs.print();
    const ys = tf.tensor2d([[0], [1], [1], [0]]);
    ys.print();
    // Train the model
    await this.model.fit(xs, ys, {
      batchSize: 1,
      epochs: 1500
    });

    const saveResults = await this.model.save('localstorage://my-model-1');

    const loadedModel = await tf.loadModel('localstorage://my-model-1');
    console.log('Prediction from loaded model:');
    // loadedModel.predict(tf.ones([1, 3])).print();



  }

  train() {
    this.initModel();
  }

  predict() {

    const xs = tf.tensor2d([[0, 0], [0, 1], [1, 0], [1, 1]]);

    this.prediction = this.model.predict(xs);
    console.log(this.prediction);

  }

}

package.json

{
  "name": "angular-template",
  "description": "",
  "homepage": "https://stackblitz.com/edit/angular-eu4cjy",
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "6.0.0",
    "@angular/compiler": "6.0.0",
    "@angular/core": "6.0.0",
    "@angular/forms": "6.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "6.0.0",
    "@angular/platform-browser-dynamic": "6.0.0",
    "@angular/router": "6.0.0",
    "core-js": "2.5.5",
    "rxjs": "6.1.0",
    "zone.js": "0.8.26",
    "@tensorflow/tfjs": "0.12.0"
  },
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "devDependencies": {
    "@angular/cli": "1.6.7",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.4.2"
  }
}

Answer 1

在 Nick Kreeger 的帮助下，解决方案是这样的。但在那之前我 希望这个问题能在以后的角度或张量流上得到解决 版本。

编辑此文件

`node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js' 

并更改了该正则表达式中的行：

// old:
node: false,
// new:
node: { crypto: true, stream: true },
I found an issue that you should chime-in on to help fix this down the road: angular/angular-cli#10954

希望这会有所帮助！

我找到了新的解决方案 10/4/2019

只需将这些行添加到您的 package.json

{
  "scripts": { },
  "dependencies": { },
  "devDependencies": { },

  // ======================
  "browser": {
    "crypto": false
  }
  // ======================

}