I'm hosting an angular 2 app on s3. I'm using redirect rules on the s3 bucket, as defined in the answer.

<RoutingRules>
  <RoutingRule>
    <Condition>
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <HostName>yourdomainname.com</HostName>
      <ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
    </Redirect>
  </RoutingRule>
</RoutingRules>

My angular app is then using html5 routing to match the redirect rules:

In app.module.ts:

RouterModule.forRoot(appRoutes, { useHash: true })

This combination works well, with the exception of displaying an image in the assets folder of the website. This is in my navbar:

<img src="./assets/logo.png" id="group-ed-logo" />

I am using the angular-cli, which has the following in the angular-cli.json:

"assets": [
        "assets",
        "assets/logo.png",
        "favicon.ico",
        "logo.png"
      ],

Edit: I have added logo.png to the above and put the logo.png file at the root directory of the src file and then used:

<img src="logo.png" id="group-ed-logo" />

The logo then displays. It would be tidier to have the images in an assets folder. However, it may be that the angular-cli currently doesn't support assets in folders when using html 5 routing.

If the file is in the assets directory, then I am getting a 404 url not found: "http://www.myurl.com/#/assets/logo.png".