Angular only works if I specify app.get(“*”[…]); in my server.js

Question

I just startet developing with server side JavaScript and this is my first project with it.

It is a command and control server for my owncloud server running with angular, Expressjs and bootstrap. At the moment I got trouble adding the functionality for the stop server button.

It should some code to log into the the server via ssh and do all the necessary stuff to shut it down gracefully.

The problem is, that I really can't (and also don't want to) add this via a browser script since I want to use an ssh library. Running a server side script by pressing a button doesn't seem to be possible at all (please tell me how if it is anyway, that would be the solution to all of my problems :)).

So I thought I could redirect the user to the /on page as he clicks the button and perform the actions in the app.get callback function. And here is the problem: In my server.js (the main node server) I have "two" endpoints defined at the moment

app.get("*", (req, res) =>{
  res.sendFile(path.join(__dirname, "src/index.html"));
});

and

app.get("/on", (req, res) =>{
  console.log("redirecting...");
  //DO SOMETHING
  res.redirect("/");
});

In the second one I would like to perform the ssh actions. But as I change the first code block to (notice the / instead of the *)

app.get("/", (req, res) =>{
  res.sendFile(path.join(__dirname, "src/index.html"));
});

The whole app doesn't seem to have angular any more. All angular components do show up but they are just empty and not filled with the content I defined in the app.component.html. Why is this occurring and how can I fix this? Thank you for any help ;) PS: you can find all the code at: GitHub

Answer 1

There are multiple things you would preferably do, but to keep the answer short, you need few changes so you can have this up and running, first, app.get("*", ...) redirects every get to that code block, so you need to do this:

//Parsers
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));

//Angular DIST output folder
app.use(express.static(path.join(__dirname, "dist")));


app.get("/", (req, res) =>{
  res.sendFile(path.join(__dirname, "dist/index.html"));
});

app.get("/on", (req, res) =>{
  console.log("redirecting...");
  //DO SOMETHING
  res.redirect("/");
});

Notice one change, you don't want to call the src/index, you want to build the angular to dist folder and use that index.html, second, the route "/" will redirect to home page, the "/on" will now enter the the desired endpoint. If this is pretty much everything you want to do with the endpoints, i guess this is fine, but if you want to build something more complex, i would abstract things out. hope this helps, cheers.