将 dist 复制到网络服务器时出现 Angular 错误 404

问题描述

在将 Angular 应用程序部署到网络服务器时，你可能会遇到以下错误：

404 Not Found
The requested URL /your-app was not found on this server.

这意味着服务器试图加载你已部署的应用程序，但无法找到文件。

解决方法

1. 确认服务器路径是否正确

请确保将应用程序部署到正确的服务器路径。如果需要，请参考你的服务器文档或与服务器管理员联系。

2. 检查应用程序生成的 dist 目录是否存在

Angular CLI 生成的应用程序会在 dist 目录中生成静态文件。请确保已将此目录部署到服务器。

3. 检查服务器是否已正确配置

你需要正确配置服务器以服务你的 Angular 应用程序的静态文件。以下是一些常见的服务器软件的配置示例：

Apache

请使用以下 .htaccess 文件：

RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

# Rewrite everything else to index.html
# to allow html5 state links
RewriteRule ^ index.html [L]

Nginx

请使用以下 nginx.conf 文件：

server {
    root /path/to/your/dist;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
}

4. 确认 base-href 是否正确配置

你需要配置 base-href，以便正确生成 Angular 应用程序中的 URL。请确保 base-href 已正确配置。例如：

<base href="/">

结论

出现 Angular 错误 404 可能是由于各种原因导致的。检查路径，静态文件和服务器配置可以解决问题。确保所有设置正确后，你的应用程序应该能够正确加载。