'Angular CLI - ng serve --serve-path

I am trying to use --serve-path to serve my entire application under that path. For example I want my path to be localhost:4200/foobar I use ng serve --serve-path=/foobar/. When I then go to that url my application does not load and I get a blank screen.

angular-cli

Solution 1:^[1]

Besides --serve-path option you need to specify either --base-href or --deploy-url options or your assets would have an invalid source URI. Without them your index.html file contains something like

<head>
  <base href="/">
  ...
</head>
<body>
  ...
  <script src="vendor.js" defer></script>
  <script src="main.js" defer></script>
</body>

As you can see, all the assets have incorrect /vendor.js, /main.js and so on URIs instead of right one /foobar/vendor.js, /foobar/main.js etc.

If you'd use ng serve --serve-path=/foobar/ --base-href=/foobar/, that index.html will look like

<head>
  <base href="/foobar/">
  ...
</head>
<body>
  ...
  <script src="vendor.js" defer></script>
  <script src="main.js" defer></script>
</body>

If you'd use ng serve --serve-path=/foobar/ --deploy-url=/foobar/, same index.html will look as

<head>
  <base href="/">
  ...
</head>
<body>
  ...
  <script src="/foobar/vendor.js" defer></script>
  <script src="/foobar/main.js" defer></script>
</body>

Both options are considered as deprecated in modern angular versions (however still working with current Angular CLI 12) and it is recommended to use builder configuration option inside angular.json configuration file instead:

      ...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "baseHref": "/foobar/",
            ...

Angular documentation says that using baseHref is generally a better option than deployUrl.

Solution 2:^[2]

pushd /your/path/
ng serve
popd

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Ivan Shatsky
Solution 2	Phillemon Mpome

'Angular CLI - ng serve --serve-path

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]