AWS ALB访问S3托管Angular应用：路由报错及动态加载失效求助

问题1：非静态路由返回S3 NoSuchKey错误 #

Angular是单页应用（SPA），前端路由由客户端接管，但S3会将这类路径当作对象键查找，找不到就返回NoSuchKey错误。解决步骤：

• 开启S3静态网站托管，将索引文档和错误文档都设置为index.html。当请求不存在的对象时，S3会返回index.html，由Angular路由系统处理跳转。
• 配置ALB监听规则：添加规则判断请求路径是否为静态资源（如.js、.css、.png、.jpg、.svg等后缀），若是静态资源则直接转发到S3对应对象；若为非静态资源（如/pages/2023-info-com这类路由），则将请求路径重写为/index.html后转发到S3。

问题2：直接访问index.html返回空白页 #

空白页通常因Angular静态资源加载失败导致，解决步骤：

• 构建Angular应用时指定正确的base href：执行ng build --prod --base-href /，确保index.html中资源引用路径为绝对路径，可正常加载。
• 检查S3对象权限：确保构建后的所有文件（包括main.js、styles.css、assets目录文件等）配置了公开读取权限，或ALB的执行角色拥有读取S3桶内所有对象的IAM权限。
• 查看浏览器开发者工具的控制台和网络面板：确认是否存在404错误的资源请求，根据错误调整资源路径或S3对象存储路径。

内容的提问来源于stack exchange，提问作者Matthew