CODEWITHSUNDEEP
angularamazon-s3amazon-cloudfrontamazon-route53
DanielRead
DanielRead

Reputation: 2804

How to hide base href in angular 4 website hosted on S3

I have a website hosted on a S3 bucket written in Angular 4.

I have the URL on Route 53 pointing to a CloudFront Distribution which points to the S3 Bucket's index.html (set to no cache).

In the S3 bucket I have folders for each version example:

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

In my index.html I have <base href="/v1.0.0/">

This works out perfect and goes to the correct pages and always gets the newest version of the website as index.html is not cached.

This however makes my url look like :
https://www.mywebsite.com/v1.0.0/pricing

How do I hide "/v1.0.0/" from the URL?

Upvotes: 2

Views: 1117

Answers (1)

DanielRead
DanielRead

Reputation: 2804

Okay after many hours trying to figure this out I finally got it. Here's how I did it for anyone else trying to do this:

go into your app.module.ts file and add 

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

Next, in the "providers" section add

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

Then when you upload the website edit index.html to have a base_href of the version folder: 

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

Now it will pull all files from /v1.0.9/ folder but not display that in the URL!

Upvotes: 6

Related Questions