Error when using tfjs-node with Angular

[JonasJW]

Describe the problem or feature request

I'm trying to save my model in a file with Angular 6. I expected it to work just like a normal Node.js project but I get these errors:

WARNING in ./node_modules/bindings/bindings.js 81:22-40 Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/bindings/bindings.js 81:43-53 Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/@tensorflow/tfjs-core/dist/tf-core.esm.js Module not found: Error: Can't resolve 'crypto' in '/Users/jonas/Projects/ML/tfjs-test/ng-tfjs-mobilenet-extend/node_modules/@tensorflow/tfjs-core/dist'

ERROR in ./node_modules/@tensorflow/tfjs-node/dist/io/file_system.js Module not found: Error: Can't resolve 'fs' in '/Users/jonas/Projects/ML/tfjs-test/ng-tfjs-mobilenet-extend/node_modules/@tensorflow/tfjs-node/dist/io'
ERROR in ./node_modules/bindings/bindings.js Module not found: Error: Can't resolve 'fs' in '/Users/jonas/Projects/ML/tfjs-test/ng-tfjs-mobilenet-extend/node_modules/bindings'
ERROR in ./node_modules/@tensorflow/tfjs-node/dist/io/file_system.js Module not found: Error: Can't resolve 'path' in '/Users/jonas/Projects/ML/tfjs-test/ng-tfjs-mobilenet-extend/node_modules/@tensorflow/tfjs-node/dist/io'
ERROR in ./node_modules/bindings/bindings.js Module not found: Error: Can't resolve 'path' in '/Users/jonas/Projects/ML/tfjs-test/ng-tfjs-mobilenet-extend/node_modules/bindings'

Code to reproduce the bug / link to feature request

This is my code:

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

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

  constructor() {
    const model = tf.sequential();
    model.add(tf.layers.dense({units: 1, inputShape: [1]}));
  }
}

[dar5hak]

At what step do you see this error? ng serve? ng build?

If you see this while trying to save the model, could you also add the code you are using to save it?

[JonasJW]

I get it as I do ng serve. The error occurs when I do import '@tensorflow/tfjs-node'; without importing the node module it works but this way I couldn't save the model.

I didn't get to saving the model because the error occurs before that

[dar5hak]

Hmm, but may I ask, why do you need tfjs-node inside your Angular component? That is UI code, which will eventually be executed in the browser, right? If you want to save your model to the file system, shouldn't that be on the server side?

(Sorry, I might be making completely wrong assumptions. Just trying to understand your setup.)

[JonasJW]

Why should saving the model on the client side be a bad idea? Imagine you have a mobile app that should work without a connection. Then it would be great to have the model saved locally so I can still make predictions.

Also maybe I don't need a backend for my application and don't want to create one just for the reason to save my tf model.

Thats my Idea. I'm a total beginner at machine learning and this might be a horrible idea for some reason but currently thats what I'm trying to do.

[dar5hak]

Saving on client side is totally fine, but if that's what you're doing, then you don't need tfjs-node (which is specifically for the server side). The regular tfjs should do.

For more info, refer to this doc, particularly the methods marked with "Browser".

[JonasJW]

Do you mean with saving to local storage?

Imagine I have an App and I have an pre trained model. How could I ship this model with my app and load the model when starting this app? I would have to load it from a file, right? And this is only possible with the node module as far as I know.

I appreciate the help btw!

[dar5hak]

Assuming you want to deploy the app as a static site, one possible way to achieve this would be:

1. Train the model in a separate Node.js script using tfjs-node, and save it on your file system.
2. Take these saved files and deploy them on your static site server.
3. From your UI code, load the models with an HTTP request using tf.loadModel('/url/to/your/model/files') .
4. Save it to localStorage or IndexedDB, so that you don't have to make a call every time.

[JonasJW]

Thanks, thats an interesting way to do it. I will try it.

But if it was possible to use node within my angular application it would still be easier. So is it just not possible? Why does not work like that? I thought angular uses node?

[dar5hak]

Angular only uses Node.js to build and compile your files to JavaScript, and to run a dev server on your machine.

However, inside the JavaScript code which is compiled and shipped to the browser, you cannot use Node.js because the context has changed from your machine to the browser, where direct access to the file system is just not available.

[JonasJW]

Ok I get it. Thanks a lot for the help.

I tried what you previously said. I have a model.js inside my angular project where I create the model and then save it to my assets. Then in my component I can load the model like this:

const path = '../assets/model/model-1a/model.json';
const model = await tf.loadModel(path);

That works well.

[quantuminformation]

I am getting this: could it be related?

ERROR in ./node_modules/@tensorflow/tfjs-data/dist/tf-data.esm.js
Module not found: Error: Can't resolve 'fs' in '/Users/nikos/WebstormProjects/tensorflowjs-playground/api-examples/node_modules/@tensorflow/tfjs-data/dist'
 @ ./node_modules/@tensorflow/tfjs-data/dist/tf-data.esm.js 17:78234-78247
 @ ./node_modules/@tensorflow/tfjs/dist/tf.esm.js
 @ ./src/index.ts

Its an error that doesn't fail the build.

code here https://github.com/QuantumInformation/tensorflowjs-playground/tree/master/api-examples

[dar5hak]

@quantuminformation There seems to be nothing wrong with your index.ts, so this error might very well be harmless.

[quantuminformation]

Yeah but it would kill CI and makes me sad.

On Wed, 13 Feb 2019 at 15:12, Darshak Parikh ***@***.***> wrote: @quantuminformation <https://github.com/QuantumInformation> There seems to be nothing wrong with your index.ts, so this error might very well be harmless. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#753 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AANN9s_aMmSKa_JcAR7ll7T47Kpc_gC5ks5vNCtkgaJpZM4XEuVo> .

-- Kind regards Nikos Katsikanis

[sardeenz]

This suggestion/workaround fixed it for me in Angular 7.
My browser.js has this:
node: { crypto: true, stream: true, fs: 'empty'},

https://stackoverflow.com/questions/54533766/tensorflow-with-angular-7-failed-to-compile/54571360

[sardeenz]

This suggestion/workaround fixed it for me in Angular 7.
My browser.js has this:
node: { crypto: true, stream: true, fs: 'empty'},

https://stackoverflow.com/questions/54533766/tensorflow-with-angular-7-failed-to-compile/54571360

[kangyizhang]

hi @quantuminformation

Can you add "browser": { "fs": false, "path": false, "os": false} in your package.json and try again?

[jinglescode]

add browser/crypto = false in package.json

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

  "browser": {
    "crypto": false
  }
}

[ya332]

Ok I get it. Thanks a lot for the help.

I tried what you previously said. I have a model.js inside my angular project where I create the model and then save it to my assets. Then in my component I can load the model like this:

const path = '../assets/model/model-1a/model.json';
const model = await tf.loadModel(path);

That works well.

Sorry, I am late to the discussion. tf used above comes from import * as tf from '@tensorflow/tfjs';. Is that correct?

[Shaiken]

i had same problem,
i try npm run build tfjs-converter demo mobilenet 's index.js
ERROR in ./node_modules/@tensorflow/tfjs-data/dist/tf-data.esm.js
Module not found: Error: Can't resolve 'fs' in 'D:\xx\xx\tfjs\tfjs-converter\demo\node_modules@tensorflow\tfjs-data\dist'
@ ./node_modules/@tensorflow/tfjs-data/dist/tf-data.esm.js 17:78532-78545
@ ./node_modules/@tensorflow/tfjs/dist/tf.esm.js
@ ./mobilenet/index.js