如何在 S3 上托管的 Angular 4 网站中隐藏基本 href答案

【问题标题】：How to hide base href in angular 4 website hosted on S3如何在 S3 上托管的 Angular 4 网站中隐藏基本 href
【发布时间】：2018-10-10 19:18:27
【问题描述】：

我有一个网站托管在一个用 Angular 4 编写的 S3 存储桶上。

我在 Route 53 上的 URL 指向 CloudFront 分配，该分配指向 S3 存储桶的 index.html（设置为无缓存）。

在 S3 存储桶中，我有每个版本示例的文件夹：

mywebsite.com
-> v1.0.0
   -> pricing.html
-> index.html

在我的 index.html 中，我有 <base href="/v1.0.0/">

这很完美，可以转到正确的页面，并且始终获取最新版本的网站，因为 index.html 没有被缓存。

然而，这使我的网址看起来像：
https://www.mywebsite.com/v1.0.0/pricing

如何从 URL 中隐藏“/v1.0.0/”？

【问题讨论】：

【解决方案1】：

好吧，经过几个小时的努力，我终于明白了。以下是我为其他尝试这样做的人所做的：

进入您的 app.module.ts 文件并添加

import { APP_BASE_HREF } from '@angular/common';

接下来，在“providers”部分添加

  providers: [
[{provide: APP_BASE_HREF, useValue: '/'}]
],

然后当你上传网站时编辑 index.html 有一个版本文件夹的 base_href：

<base href="/v1.0.9/">

现在它将从 /v1.0.9/ 文件夹中提取所有文件，但不会在 URL 中显示！

【讨论】：

对于其他查看此内容的人，请确保在上传到 AWS 时添加具有键“Cache-Control”值“public, must-revalidate, proxy-revalidate, max-age=0”的元数据这将确保您的索引永远不会被缓存，因此始终提供最新版本的文件夹