Built Angular Application only works on First Load

Question

Introduction

I have create an Angular Application and now I want to deploy it using ng build. Afterwards I changed into dist-directory and executed live-server to look at the result. In the past I was also able to view the result under http://127.0.0.1:8080/, but only for the first time. If I reload the page, it says "Cannot GET /new-website/main". At the moment, I cannot even get that far. When I try to visit http://127.0.0.1:8080, it displays the following:

When I click on this it forwards me to http://127.0.0.1:8080/new-website/main, which is not what I'm aiming for (since I only want to have http://127.0.0.1/main and later replace this by http://new-website/main)

What is my Problem?

Obviously, I'm not able to deploy / ng-build my application correctly. I assume, that this has something to do with base-href or deploy-url or something similar, but I cannot really figure out how to configure this correctly. In the following I supply some of my code which I think might be important. If you need any more information please don't hesitate to ask and I'll give you the information asap.

My goal is, that it simply redirects to http://127.0.0.1:8080/main and nothing more :D

Edit: My tries so far

baseHref='/' + ng-build yields in: http://127.0.0.1:8080/new-website (/main cannot be found), but I get errors like GET http://127.0.0.1:8080/runtime.a43c08078ae396d9.js net::ERR_ABORTED 404 (Not Found) (same holds for baseHref='/main')

baseHref='./' + ng-build yields in http://127.0.0.1:8080/new-website/main, but the images like /assets/menu-images/About-DE.svg don't load anymore. The images work when I remove the first / from assets, but then they won't work for ng-serve which is kind of strange.

baseHref='/new-website/main'+ ng-build yields in http://127.0.0.1:8080/new-website/main/main and the images cannot be found again (until I remove the leading / of assets, which then again blocks the ng-serve from loading the images).

Additional Information

Project & Folder-Name: new-website

Build Options:

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "outputPath": "dist/new-website",
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.app.json",
    "inlineStyleLanguage": "scss",
    "baseHref": "/",
  }
  ...
}

RouterModule

...
const routes: Routes = [
  {
    path: "main",
    component: MainPageComponent,
    pathMatch: "full",
  },
  {
    path: "privacy",
    pathMatch: "full",
    component: ImprintComponent
  },
  {
    path: "",
    redirectTo: "main",
    pathMatch: "full",
  },
  {
    path: "**",
    redirectTo: "main",
    pathMatch: "full",
  }]
...

Edit: Solution

I don't know why, but the reason for this strange behaviour seems to be the live-server. If I deploy the website on the real server, it works without any problems