Building angular application and putting on the server

you may get a "deprecated" warning with Angular 11 when using

ng build --prod --base-href=/StartingNewProject/

You can instead adjust angular.json.

In angular.json file, create a "baseHref" property like this:

 "projects": {
   "your-project-name" : {
          "architect": {
             "build": {
               "options": {
                   "baseHref": "/your-relative-path/"

This will change the URL both in production and development.

Beware that, in your links, always use relative paths like this (instea of "/"):

 <img class="top-bar__logo" src="./assets/images/picture1.svg" />

The issue that the project is having is in trying to find it's dependencies. The index.html file of your Angular project should contain a tag that looks like:

<base href="/">

Or similar. That means, when it looks for dependencies, it looks for the relative to the root. In your case,there not next to the root (i.e. localhost), they're under StartingNewProject

You can should generate a new build with ng build --prod --base-href=/StartingNewProject/ which will add the base href tag for you. Please note that it is important to include both the leading and trailing slash here.

More details can be found in the Angular docs, here


I was facing the same problem. I fixed this using ./.

<base href="/"> to <base href="./">

again build and deploy.