Angular 路由在 URL 地址栏上不起作用

Question

我制作了一个带有路由组件的 Angular 项目。我已经处理了一些 URL 处理，就像用户手动点击 URL 一样：如果 URL 存在，它将转到

app-routing-module.ts 中定义的 URL 组件，如果 URL 不存在，它显示代码 PagenotFoundComponent 中定义的错误页面。 例如

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import {HomeComponent} from './component/home.component';
import {AboutusComponent} from './component/aboutus.component';
import {SupportComponent} from './component/support.component';
import {PurchaseComponent} from './component/purchase.component';
import {PagenotfoundComponent} from './component/pagenotfound.component';
import {HowitworksComponent} from './component/howitworks.component';
import {ProductComponent} from './component/product.component';
import { ProductVarientDetailsComponent } from './component/product-varient-details.component';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full'},
  { path: 'home', component: HomeComponent},
  { path: 'about-us', component: AboutusComponent},
  { path: 'how-it-works', component: HowitworksComponent},
  { path: 'support', component: SupportComponent},
  { path: 'purchase', component: PurchaseComponent},
  { path: 'product/:name/details', component: ProductComponent},
  { path: 'product-variants', component: ProductVarientDetailsComponent},
  { path: '**', component: PagenotfoundComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents = [HomeComponent, AboutusComponent, SupportComponent,
                                  PurchaseComponent, PagenotfoundComponent, HowitworksComponent,
                                  ProductComponent, ProductVarientDetailsComponent];

因此，当我手动点击 localhost:4200/home 时，它会显示 HomeComponent 页面，如果我执行此操作 localhost:4200/sdnbgbdfgbh，它会显示本地服务器上的 PagenotfoundComponent 页面。

然后我访问此链接：

https://angular.io/guide/deployment 部署我的角度应用程序。我按照文档的步骤进行操作。说。

我的应用程序现在完全可以工作，但是当我手动输入 URL 时，它显示“未找到 Apache 服务器页面”。只是这个东西在 Angular 应用程序中不起作用。

我已将我的应用程序部署在端口 80 的 Apache 服务器上的 AWS EC2 上。

Answer 1

尝试重定向到路径

404

，如下所示：

const routes: Routes = [
   ...otherRoutes
   { path: '404', component: PagenotfoundComponent},
   { path: '**', redirectTo: '404'}
];

如果不起作用，请尝试根据

Angular Documentation配置.htaccess：

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

记住所有路径命中都应该经过 apache 配置中的

index.html

。

或者尝试这篇文档，我希望它有帮助：

https://github.com/mgechev/angular-seed/wiki/Deploying-prod-build-to-Apache-2

Answer 2

我按照以下步骤解决了此问题：

在 Amplify 控制台中，导航至“重写和重定向”部分。使用以下设置更新重定向规则：

来源地址：

目标地址：/index.html

类型：200

这个基于正则表达式的规则可确保有问题的路由重定向到index.html。