使用 angular cli 构建应用程序

Question

我正在使用 angular cli 构建我的 angular 8 应用程序

ng build

我将文件从 dist/myapp 文件夹复制到我的网络服务器上的 myapp 目录。 当我使用浏览器访问应用程序时，会出现一些类似这样的错误

polyfills-es2015.js:1 加载资源失败：服务器响应状态为 404（未找到）

实际上浏览器正在寻找“myserver.local/polyfills-es2015.js”

当我试图告诉 angular 这样的基本 href

ng build --base href myapp/

我的浏览器仍然得到 404-ed 但这次是因为

未找到 myserver.local/myapp/myapp/polyfills-es2015.js

使用 angular cli 将应用程序构建部署到网络服务器上的某个自定义目录的正确方法是什么？

Answer 1

您还必须更改 dist/index.html 中的基本 href。

据我所知，这些是我在服务器上部署 angular dist 时遵循的步骤：

• 使用 ng build --prod 为 Angular 项目创建 dist（可分发）。 在 /var/www/html 中复制 dist。
• 在 dist 内部更改 index.html 并将 base href 从“/”更改为“./”。 这是主要问题，因此请确保您这样做。
• 尝试通过浏览器访问时，您还需要允许访问此文件夹。 查找配置更改，我没有记录它们。

Answer 2

如果您使用 webpack 进行构建，那么您必须提供 dist 文件夹的路径，例如：

{
  mode: 'production',
  entry: './index.html',
  output: {
    filename: 'js/bundle.[hash].min.js',
    path: resolve(__dirname, '../../dist'),
    publicPath: '/',
  },
  devtool: 'source-map',
  plugins: [],
}

Answer 3

看起来我只是没有正确添加斜线：

ng build --base-href /myapp/

所以它起作用了。