Angular 2+ application deployed on S3 gives routing issue

Question

We are hosting a static Angular 2 website on Amazon S3.

Our app is deployed at http://abc.domain.s3.amazonaws.com/index.html If the user is not logged in, our app redirects the user to the login page: http://abc.domain.s3.amazonaws.com/Platform/Login which works fine.

However, if you refresh http://abc.domain.s3.amazonaws.com/Platform/Login (or access it directly), it returned the "NoSuchKey, The specified key does not exist" error.

We have set "Index Document" and "Error Document" to index.html. And the bucket has public access. But we are unable to resolve this issue.

We are not using cloudfront with S3 and route53.

Any help is appreciated!

Thanks!! It works, one question - my site is abc.domain.s3.amazonaws.com/Platform/Login its giving https ( not secure ) warrning. - Also i want this S3 url to my custom domain link ( abc.domain.com ) — Swapnil Marathe
create route53 entry and select S3 bucket. If you want to use https then you have to first get certificate from AWS certificate mangeer for that domain and create cloudfront. you can ask separate question and give your will answer in details — aviboy2006

aviboy2006 aviboy2006 · Accepted Answer · 2019-12-03T04:44:54

Check your bucket policy setting. If not set then use below to set bucket policy under Permission -> Bucket Policy

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Stmt126637111000",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:PutObject",
                "s3:GetObject",
                "s3:DeleteObject"
            ],
            "Resource": "arn:aws:s3:::www.xyz.com/*"
        },
        {
            "Sid": "S3 Access Permissions",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::142412414124:root"
            },
            "Action": "s3:*",
            "Resource": [
                "arn:aws:s3:::www.xyz.com/*",
                "arn:aws:s3:::www.xyz.com"
            ]
        }
    ]
}

Also check for CORS Configuration.You can find under Permission -> CORS Configuration

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Angular 2+ application deployed on S3 gives routing issue

2 Answers