0

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".

Community
  • 1
  • 1
trees_are_great
  • 3,881
  • 3
  • 31
  • 62
  • Please confirm: `http://www.myurl.com/assets/logo.png` exists and can be loaded by your browser? – Matt Houser Mar 25 '17 at 17:33
  • It does exist, but cannot be loaded. I have found a workaround and think I may have a solution, which I will try tomorrow. Sorry no time to post now – trees_are_great Mar 25 '17 at 18:22

1 Answers1

1

For folders, in the bucket 'Create a folder' then add your files to that bucket.

Also, if you drag and dropped the whole dist folder, you may be looking at the inside of the dist folder on the AWS UI, not realizing that you are in the dist folder. Copy only the contents of the dist folder, not the dist folder. -- This happened to me.

flobacca
  • 936
  • 2
  • 17
  • 42