Angular CLI - ng serve --serve-path答案

【问题标题】：Angular CLI - ng serve --serve-pathAngular CLI - ng serve --serve-path
【发布时间】：2022-05-09 23:59:08
【问题描述】：

我正在尝试使用 --serve-path 在该路径下为我的整个应用程序提供服务。例如，我希望我的路径为localhost:4200/foobar，我使用ng serve --serve-path=/foobar/。然后，当我转到该 url 时，我的应用程序没有加载并且我得到一个空白屏幕。

【问题讨论】：

似乎无法修改生成的包的文件夹（使用ng serve 命令）。选项baseHref 修改您在将应用程序调用到浏览器时使用的基本url。捆绑包的文件始终位于应用程序的根目录中。在 Angular 的最新版本中，选项 --deploy-url 不起作用，因为已删除。我正在尝试修改捆绑包的文件夹（当我使用ng serve 命令时），但我没有尝试解决方案。不幸的是，选项 baseHref 不能解决这个问题。
看看这个link

标签： angular-cli

【解决方案1】：

除了--serve-path 选项，您还需要指定--base-href 或--deploy-url 选项，否则您的资产将具有无效的源URI。没有它们，您的 index.html 文件包含类似

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

如您所见，所有资产都有不正确的 /vendor.js、/main.js 等 URI，而不是正确的一个 /foobar/vendor.js、/foobar/main.js 等。

如果你使用ng serve --serve-path=/foobar/ --base-href=/foobar/，index.html 看起来像

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

如果你使用ng serve --serve-path=/foobar/ --deploy-url=/foobar/，同样的index.html 将看起来像

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

在现代 Angular 版本中，这两个选项都被视为 deprecated（但仍可使用当前的 Angular CLI 12），建议在 angular.json 配置文件中使用构建器配置选项：

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

Angular 文档说使用baseHref 通常比deployUrl 更好。

【讨论】：

【解决方案2】：

pushd /your/path/
ng serve
popd

【讨论】：