为Angular应用添加国际化后AWS Amplify出现404页面未找到问题

核心问题分析 #

Angular i18n本地化构建后，产物会按语言拆分到不同子目录（如/en/、/zh/），而AWS Amplify默认的单页应用重写规则和构建配置未适配这种多目录结构，导致访问时找不到对应页面。

解决步骤 #

1. 调整Angular构建命令 #

确保构建时启用本地化编译，替换原有构建命令为：

ng build --localize --configuration production

该命令会自动根据你配置的语言生成对应子目录的编译产物。

2. 修改Amplify构建配置文件（amplify.yml） #

需要调整构建输出目录、添加适配多语言的重写规则，示例配置如下：

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - ng build --localize --configuration production
  artifacts:
    baseDirectory: dist/你的项目名称 # 替换为实际Angular项目名称
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
  rewriteRules:
    # 根据请求语言自动跳转对应版本
    - source: /(.*)
      target: /en/$1
      condition: '"$HTTP_ACCEPT_LANGUAGE" !~ "^zh"'
    # 处理各语言子目录的路由刷新问题
    - source: /zh/(.*)
      target: /zh/index.html
    - source: /en/(.*)
      target: /en/index.html
    # 根路径默认跳转默认语言首页
    - source: /
      target: /en/index.html

注意：

• 将dist/你的项目名称替换为实际构建输出目录（可在本地执行ng build --localize后查看dist下的文件夹名）
• 根据你的默认语言和支持的语言列表修改重写规则中的语言前缀（如en、zh）

3. 验证Amplify控制台部署设置 #

登录AWS Amplify控制台，进入你的应用部署设置页面，确认：

• 构建命令与amplify.yml中的配置一致
• 输出目录与baseDirectory配置匹配
  避免控制台手动设置覆盖yml文件的配置。

4. 检查Angular路由配置 #

确保Angular路由未设置冲突的baseHref，如果项目中配置了APP_BASE_HREF，需确保其值与Amplify部署的路径匹配（通常无需额外修改，默认即可）。

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