How can I use a JavaScript function in a Angular TypeScript component?

Question

I wrote a function like this:

function clean() {
fsExtra.remove(sumoDir)
}

in a file named commands.js

I export this function in this way:

module.exports = {[...], clean: clean, [...]}

I need to call this function in an Angular TypeScript component that i used for my frontend.

First of all I created a module with

ng g m home

next I import my function in home.module.ts in this way:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import * as commands from './../../../src/commands.js'


@NgModule({
declarations: [],
imports: [
CommonModule
]
})
export class HomeModule { }
export {commands}

And I imported it in my home.component.ts

import { Component, OnInit } from '@angular/core';
import {MatCheckboxChange} from "@angular/material/checkbox";
import {commands} from "./home.module"

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
      })

 export class HomeComponent implements OnInit {
  [...]
async clean(){
}
[...]
}

When I do a ng build the outpur is:

Warning: [...]/home.component.css exceeded maximum budget. Budget 2.00 kB was not met by 1.31 kB with a total of 3.31 kB.



Error: node_modules/recursive-copy/index.d.ts:1:23 - error TS2307: Cannot find module 'fs' or its corresponding type declarations.

1 import { Stats } from 'fs';
                        ~~~~


Error: node_modules/recursive-copy/index.d.ts:2:24 - error TS7016: Could not find a declaration file for module 'stream'. '[...]node_modules/stream/index.js' implicitly has an 'any' type.
  Try npm i --save-dev @types/stream if it exists or add a new declaration (.d.ts) file containing declare module 'stream';

2 import { Stream } from 'stream';

How can I fix it? or How can I import correctly my function?

Guerric P · Accepted Answer · 2022-01-04 11:09:59Z

1

Not sure what you're trying to achieve but you are trying to use the recursive-copy library in Angular while it is designed for Node.js. Angular runs in the browser and there is no API such as fs in the browser because it has no access to the machine's filesystem.

edited Jan 4, 2022 at 11:09

answered Jan 4, 2022 at 11:06

Guerric P

32k6 gold badges61 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Ludovico Latini Over a year ago

If I don't write the import line of my function import {commands} from "./home.module" my app works and I don't have any problems with 'fs' or 'stream'

Guerric P Over a year ago

Yes because unused code gets evicted from the compiled bundle

Ludovico Latini Over a year ago

Ok, but I don't really understand how can I solve the problem. I only need to use functions of my JavaScript backend with my Angular frontend. How can I implement this?

Guerric P Over a year ago

Expose that function as an HTTP endpoint, then call it with Angular's HttpClient service

Ludovico Latini Over a year ago

I can't modify the JavaScript backend, my work consist in write an Angular frontend for an app that has only a CLI.

|

Collectives™ on Stack Overflow

How can I use a JavaScript function in a Angular TypeScript component?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related