将 Angular 应用程序部署到服务器，但 baseHref 丢失文件已更改

Question

这个问题与我之前的post和我在评论中的讨论有关。

TLDR 是我的应用程序在本地测试时运行正常，例如在 localhost:4200/page1 和 /page2 之间正确路由，但是当我将它部署到具有 url 的生产服务器时却没有，类似于此 production.com/myapp/page1 和 /page2.

我正在尝试使用以下命令构建使用 ngX-Rocket 生成的 Angular 应用程序。

ng build --watch --baseHref=/myapp/

目标是更改生产服务器上的基本路径。所以为了测试这个我使用了 lite-server

lite-server --baseDir="dist"

但我收到以下错误：

Did not detect a `bs-config.json` or `bs-config.js` override file. Using lite-server defaults...
** browser-sync config **
{
  injectChanges: false,
  files: [ './**/*.{html,htm,css,js}' ],
  watchOptions: { ignored: 'node_modules' },
  server: { baseDir: 'dist', middleware: [ [Function], [Function] ] }
}
[Browsersync] Access URLs:
 ----------------------------------
       Local: http://localhost:3000
    External: http://10.0.75.1:3000
 ----------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 ----------------------------------
[Browsersync] Serving files from: dist
[Browsersync] Watching files...
19.08.28 13:30:34 200 GET /index.html
19.08.28 13:30:34 404 GET /myapp/runtime.js
19.08.28 13:30:34 404 GET /myapp/styles.js
19.08.28 13:30:34 404 GET /myapp/polyfills.js
19.08.28 13:30:34 404 GET /myapp/vendor.js
19.08.28 13:30:34 404 GET /myapp/main.js
19.08.28 13:30:35 404 GET /myapp/styles.js
19.08.28 13:30:35 404 GET /myapp/vendor.js
19.08.28 13:30:35 404 GET /myapp/main.js
19.08.28 13:30:35 404 GET /myapp/favicon.ico

我无法确定问题出在哪里。它与我的构建过程有关吗？当检查我的 dist 文件夹时，所有这些文件都在 index.html 而不是 /myapp/ 的根目录中。因此，我们将不胜感激任何帮助。

Answer 1

在angular.json文件中您可以指定文件夹。并构建 ng build --baseHref ./

...
"options": {
            "outputPath": "dist/browser",
            ...
}
...

将 Angular 应用程序部署到服务器，但 baseHref 丢失文件已更改

Deploying Angular app to server with changed baseHref missing files

deployment

build

lite-server

angular