Angular: serving application on custom context-root with npm start on localhost

Question

I have an Angular application which starts on port 4300 with this configuration:

"scripts": {
  "ng": "ng",
  "start": "ng serve --port 4300 --host 0.0.0.0 --proxy-config proxy.conf.json",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
}

The app is reachable to the url:

http://localhost:4300/#/index.html

I want to serve it on a context-root, like: "/myApp/"

The application has to start always with npm start, and I want to reach the url:

http://localhost:4300/myApp/#/index.html

How can I do it?

Everything I tried doesn't work:

setting <base href="/myApp/"> doesn't work
setting "build": "ng build --prod --base-href=myApp" doesn't work

Any help will be appreciated.

can u share screenshot of your network tab ? – YogendraR Oct 25 '21 at 13:19 — YogendraR, Oct 25 '21 at 13:19
And the angular version you are working on ? – YogendraR Oct 25 '21 at 13:48 — YogendraR, Oct 25 '21 at 13:48

score 1 · Answer 1 · answered Oct 25 '21 at 13:40

1

Try ng build --prod --base-href /myApp/, or same but with ng serve

I think the forward slashes are important here

answered Oct 25 '21 at 13:40

Drenai

11,315
9
48
82

YogendraR · Answer 2 · 2021-10-25T17:00:06.900

1

Add baseHref, deployUrl in your angular.json file. Adding code snippet:

"serve": {
     "options": {
        "baseHref": "/myApp/",
        "deployUrl": "/myApp/"
      }
    }

This <base href="/myApp/"> will remain as is.

You can remove --base-href=myApp from the build command

edited Oct 25 '21 at 17:00

answered Oct 25 '21 at 14:43

YogendraR

2,144
12
17

ok, and what if I get HTTP 404 for assets like images etc? – Alessandro C Oct 25 '21 at 15:09
Your assets will be served from same url. – YogendraR Oct 25 '21 at 16:58
@AlessandroC let me know, if it worked for you. – YogendraR Oct 27 '21 at 07:24
I managed to make it works: the app is served on the context-root, some assets gave 404 because there was a / character at the beginning (/assets/); on some other assets instead I was forced to keep the / character, othwerwise I had compilation error. Very strange. – Alessandro C Oct 27 '21 at 09:22
1

If `baseHref` `deployUrl` helped, u can upvote my answer. – YogendraR Oct 27 '21 at 10:02

Angular: serving application on custom context-root with npm start on localhost

2 Answers2

Linked