jason
jason

Reputation: 113

exec function in Angular

I am trying to run a bash command through Angular.
After some research i found the code below that should be working

import { ChildProcess, exec } from 'child_process';

@Injectable({
  providedIn: 'root'
})
export class CommandService {
  runCommand(command: string): Promise<string> {
    return new Promise((resolve, reject) => {
      exec(command, (error: Error, stdout: string, stderr: string) => {
        if (error) {
          reject(error);
        }
        resolve(stdout);
      });
    });
  }
}

then i call it in my .ts file


import { CommandService } from './command.service';

export class YourComponent {
  output: string;

  constructor(private commandService: CommandService) {}

  run() {
    this.commandService.runCommand('ls -la')
    .then(output => this.output = output)
    .catch(error => console.log(error));
  }

The problem is that even though there doesnt seem to have any errors, when i try to run it it says:

error TS2307: Cannot find module 'child_process' or its corresponding type declarations.

3 import { ChildProcess } from "child_process";

, even though i can see that the file exists in my project.
Is there something i can do to fix that ? If not can i run a command some other way through Angular ?
Thanks in advance

Upvotes: 0

Views: 637

Answers (3)

jason
jason

Reputation: 113

For anyone who might come to this question for answers:
it's better to use Nodejs (backend) for bash commands. an example of what i was trying to do is shown in the code below :

onst express = require("express");
const { exec, execSync } = require("child_process");
const cors = require("cors");
const path = require("path");
const app = express();

app.use(
  cors({
    origin: "http://localhost:4200",
  })
);

app.get("/ls", (req, res) => {
  exec("ls -la .", (error, stdout, stderr) => {
    if (error) {
      console.error(`exec error: ${error}`);
      return res.status(500).send({ error });
    }
    res.send({ output: stdout });
  });
});

const homeDirectory = execSync("echo ~").toString().trim();
const frontendPath = path.join(homeDirectory, "frontend-software");

process.chdir(frontendPath);

exec("ng serve --open", (err, stdout, stderr) => {
  if (err) {
    console.error(err);
    return;
  }
  console.log(stdout);
});

The 1st exec is an ls call and the 2nd is to run an angular project.
Hope it helps you all!

Upvotes: 0

Floyd Haremsa
Floyd Haremsa

Reputation: 11

Matthieu Riegler is right, you cannot access OS features from within the browser environment. That being said, depending on what you want to do, you could have the bash command run at build time (e.g. with an npm script) or if you really need it at run time and happen to have a backend as well, you could expose an endpoint that runs the bash command on demand and return the result over http.

Upvotes: 1

Matthieu Riegler
Matthieu Riegler

Reputation: 54698

I afraid you can't do that dave Jason.

child_process is available in a nodeJS runtime and Angular runs in a browser. That's 2 different runtimes which only have in common to use JS as a language.

Also, don't expect to be able to run a bash command from the browser that would be a MASSIVE security issue.

Upvotes: 2

Related Questions