在 angular 6 项目中使用 @tensorflow/tfjs 时出错
error when using @tensorflow/tfjs in angular 6 project
我生成了一个 angular 6 项目，没有其他依赖项该项目非常干净，唯一的依赖项是 @tensorflow/tfjs
如果我在 localhost:4200 上提供我的项目，我得到的消息是这样的：
Module not found : Error: Can't resolve 'crypto' in C:\User\user\bla\bla
问题是我想要一个 tensorflow 只支持最近 5 个版本的功能，无论我从 0.11.1 和更高版本中选择什么版本，当 webpack 开始打包代码时总是无法编译或失败。
这是 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"
}
}
With the help of Nick Kreeger the solution is this. but before that i
hope the issue is gonna be fix on the later angular or tensorflow
versions.
编辑此文件
`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
}
// ======================
}
我生成了一个 angular 6 项目，没有其他依赖项该项目非常干净，唯一的依赖项是 @tensorflow/tfjs
如果我在 localhost:4200 上提供我的项目，我得到的消息是这样的：
Module not found : Error: Can't resolve 'crypto' in C:\User\user\bla\bla
问题是我想要一个 tensorflow 只支持最近 5 个版本的功能，无论我从 0.11.1 和更高版本中选择什么版本，当 webpack 开始打包代码时总是无法编译或失败。
这是 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"
}
}
With the help of Nick Kreeger the solution is this. but before that i hope the issue is gonna be fix on the later angular or tensorflow versions.
编辑此文件
`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
}
// ======================
}