Using a router on a specific route

Question

the problem is this: My Angular application is served as follows via the server (it is the server that gives static html file) localhost:3000/my-app This URL provides index.html and scripts with my angular application

How do I configure routes inside my application so that when I go to localhost:3000/my-app/first-component did a specific component open?

My current routes in Angular app:

export const routes: Routes = [
  {
    path: "app",
    component: FirstComponent
  },
  {
    path: "app/second-component",
    component: SecondComponent
  }
];

My express server.js file:

const express = require("express");
const path = require('path');

const app = express();
const port = 3000;

app.use('/scripts', express.static(path.join(__dirname, 'scripts')))

app.all('/app', function(req, res, next) {
    res.sendFile('index.html', { root: __dirname });
});

app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

After i run localhost:3000/app i get my first component, but when i try go to localhost:3000/app/second-component it doesn't work

Console error: Uncaught SyntaxError: Unexpected token '<'

Answer 1

You can define the path for the route as:

{
  path: "my-app/first-component",
  title: "Unauthorized",
  component: FirstComponent
}

Also check out the Angular Routing Guide, as it has a ton of helpful information about how to use modules to create nested routes, which is useful when you start to make more complex applications.

Answer 2

Your error is "Uncaught SyntaxError: Unexpected token '<'".

Your issue may not be related to the routes. I assume somewhere in your second-component.html file or other related file, you have an extra '<'. Maybe an extra '<' around some tag. Or a syntax error in the component.ts file.