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

Question

尝试将示例角度应用程序部署到公共站点以测试Angular生产。但是在使用路线时显示错误。

• 我使用ng new toys
构建了一个新应用程序
• 添加了新组件ng g component homepage
• 将此包含在app-routing.modeul.ts
中
• 使用ng build --base-href /toys
进行生产
• 也尝试过ng build --prod
• 部署到运行Apache的共享主机上

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomepageComponent } from './homepage/homepage.component';

const routes: Routes = [
  { path: '', redirectTo: '', pathMatch: 'full' },
  { path: 'home', component: HomepageComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

主站点已正确加载http://www.ngstrorefront.com/toys/。

但是使用路由http://www.ngstrorefront.com/toys/home时，站点加载失败，并显示HTTP 500服务器错误。 .htaccess下还有另一个\public_html文件，该文件适用于所有其他站点，我不想更改此文件。

将.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

Answer 1

经过大量试验，我找到了解决方案。实际上是在https://github.com/angular/angular/issues/27991

的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_html/yoursitename/。

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

您的站点也应使用路线。

注意：

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