Angular 7应用程序生产上的路由失败，出现Http 500或404服务器错误

尝试将示例angular应用程序部署到公共站点以测试angular产品。但在使用路由时显示错误

我使用ng新玩具构建了一个新应用程序 添加了一个新的组件ng g组件主页 包括在app-routing.modeul.ts中 使用ng build为生产而构建-base href/toys 还尝试了ng build-prod 部署到运行Apache的共享主机 app-routing.module.ts

主站点正确加载。

但当使用路由时，站点无法加载，并出现HTTP 500服务器错误。\public\u html下有另一个.htaccess文件应用于所有其他站点，我不想更改此文件

将.htaccess添加到包含此内容的服务器上的域主文件夹/public_html/ngstorefront时。无论是否有此文件，路由都不会加载，但我们看到404服务器错误

RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

---

经过多次试验，我找到了解决办法。这实际上是在Angular Github上讨论的

1.使用类似ng Build-prod-base href/toys/的命令构建项目。如果您想将网站加载为www.mysite.com/toys

2.以上内容将生成project home/dist/toys。在此文件夹下创建一个包含以下内容的.htaccess文件

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) index.html [NC,L]

3.将project home/dist/toys下的源文件复制到您的网站域文件夹中。在共享主机上，它通常类似于/public\u html/yoursitename/

在我的示例中，我有这样的文件/public_html/ngstrorefront/toys/.htaccess。注意.htaccess应该位于Angular Project'index.html级别的文件夹下，而不是网站的根目录下

您的站点也应该使用路由

注:

通常，共享主机不允许我们更改任何Apache http.conf设置。如果他们这样做了，那么使用它而不是.htaccess是最好的途径。 将.htaccess文件的权限更改为只读。我见过几个网站使用此文件受到攻击。

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) index.html [NC,L]