I'm making an Angular (4) SPA that I plan to host on AWS S3 as a static site and also use AWS API Gateway.
So I now have the SDK (the JavaScript one) that API-Gateway generates for you (which are the lib folder, apigClient.js and the README.md) and if I put it in the top level folder of the project (a project created with the angular-cli so the folder also has the src and package.json file) and reference it in the index.html file it works great with ng serve and even ng serve --prod --aot locally. Here's the relevant part of the index.html file:
...
<script type="text/javascript" src="lib/axios/dist/axios.standalone.js"></script>
<script type="text/javascript" src="lib/CryptoJS/rollups/hmac-sha256.js"></script>
<script type="text/javascript" src="lib/CryptoJS/rollups/sha256.js"></script>
<script type="text/javascript" src="lib/CryptoJS/components/hmac.js"></script>
<script type="text/javascript" src="lib/CryptoJS/components/enc-base64.js"></script>
<script type="text/javascript" src="lib/url-template/url-template.js"></script>
<script type="text/javascript" src="lib/apiGatewayCore/sigV4Client.js"></script>
<script type="text/javascript" src="lib/apiGatewayCore/apiGatewayClient.js"></script>
<script type="text/javascript" src="lib/apiGatewayCore/simpleHttpClient.js"></script>
<script type="text/javascript" src="lib/apiGatewayCore/utils.js"></script>
<script type="text/javascript" src="apigClient.js"></script>
</head>
...
I then create the project with ng build --prod --aot and upload everything in the dist folder to the s3 bucket and the site all works fine except for any of the imports from the API Gateway SDK. They all return 404 looking for it at: http://<my-bucket>/apigClient.js and the other libraries get the same thing.
So what's the correct way to use this SDK in this scenario - ie, where should I put apigClient.js and the lib folder and how do I reference them so that the site works once it's uploaded as a static site (to AWS S3)?
Reference of src="apigClient.js" is relative to your website root which is in this case your s3 bucket. Just look at your bucket to see where the libraries actually are. I'd assume it's something like http://<my-bucket>/<my-app>/apigClient.js and also make sure they're publicly accessible after the upload as the bucket is not public by default.
A way I found of doing it is putting it in the auto generated '/assets/' folder (I put any JavaScript files under /assets/js/) then the index.html can have something like
<script type="text/javascript" src="assets/js/apiGateway/lib/axios/dist/axios.standalone.js"></script>
...
<script type="text/javascript" src="assets/js/apiGateway/apigClient.js"></script>
Then it will all compile together,
And in this particular case the variable that I need can be referenced by putting a declare var apigClientFactory: any; at the top of the requests.service.ts that I'm using to make calls to API-Gateway.