Estoy creando un SPA Angular (4) que planeo alojar en AWS S3 como un sitio estático y también uso AWS API Gateway.
Así que ahora tengo el SDK (el de JavaScript) que API-Gateway genera para usted (que son la carpeta lib, apigClient.js y README.md) y si lo coloco en la carpeta de nivel superior del proyecto (un proyecto creado con angular-cli, por lo que la carpeta también tiene el archivo src y package.json) y haga referencia a él en el archivo index.html, funciona muy bien con ng serve e incluso ng serve --prod --aot localmente. Aquí está la parte relevante del archivo index.html:
... <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> ... Luego creo el proyecto con ng build --prod --aot y subo todo en la carpeta dist al depósito s3 y el sitio funciona bien, excepto cualquiera de las importaciones del API Gateway SDK. Todos regresan 404 buscándolo en: http://<my-bucket>/apigClient.js y las otras bibliotecas obtienen lo mismo.
Entonces, ¿cuál es la forma correcta de usar este SDK en este escenario, es decir, dónde debo colocar apigClient.js y la carpeta lib y cómo hago referencia a ellos para que el sitio funcione una vez que se cargue como un sitio estático (a AWS S3)?
La referencia de src="apigClient.js" es relativa a la raíz de su sitio web, que en este caso es su depósito s3. Solo mire su cubo para ver dónde están realmente las bibliotecas. Supongo que es algo así como http://<my-bucket>/<my-app>/apigClient.js y también me aseguro de que estén accesibles públicamente después de la carga, ya que el depósito no es público de forma predeterminada.
Una forma que encontré de hacerlo es ponerlo en la carpeta '/assets/' generada automáticamente (puse cualquier archivo JavaScript en /assets/js/), luego el index.html puede tener algo como
<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>Entonces todo se compilará junto,
Y en este caso particular, se puede hacer referencia a la variable que necesito poniendo un declare var apigClientFactory: any; en la parte superior de request.service.ts que estoy usando para hacer llamadas a API-Gateway.