Angular部署AWS Amplify后白屏，控制台报JSON解析错误求助

部署在AWS Amplify上的Angular应用已成功部署，但页面显示白屏，控制台抛出错误：
SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

服务提供者代码（AppStarterService） #

import { Inject, Injectable } from '@angular/core';
import {
    CONFIG_TOKEN,
    UserService,
    EuiAppConfig,
    UserDetails,
    UserPreferences,
    I18nService,
} from '@eui/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of, zip } from 'rxjs';
import { switchMap } from 'rxjs/operators';

@Injectable({
    providedIn: 'root',
})
export class AppStarterService {
    defaultUserPreferences: UserPreferences;

    constructor(
        protected userService: UserService,
        protected i18nService: I18nService,
        @Inject(CONFIG_TOKEN) private config: EuiAppConfig,
        protected http: HttpClient,
    ) {
    }

    start(): Observable<any> {
        return zip(
            this.initUserService().pipe(
                switchMap((userStatus) => {
                    console.log(userStatus);
                    return this.i18nService.init();
                }),
            ),
        );
    }

    /**
     * Fetches user details,
     * create user: UserState object
     * then initialise to the UserService on run time
     */
    initUserService(): Observable<any> {
        return zip(
            this.fetchUserDetails(),
        ).pipe(
            switchMap(([userDetails]) => this.userService.init(userDetails)));
    }

    /**
     * Fetches user details
     */
    private fetchUserDetails(): Observable<UserDetails> {
        const moduleCoreApi = this.config.modules.core;
        const url = `${moduleCoreApi.base}${moduleCoreApi.userDetails}`;
        const user = { userId: 'anonymous' };

        if (!url) {
            return of(user);
        }
        return this.http.get<UserDetails>(url);
    }
}

模块配置代码 #

import { ModulesConfig } from '@eui/core';

export const MODULES: ModulesConfig = {
    core: {
        base: '/api',
    }
};

生产环境配置（environment.prod.ts） #

import { EuiEnvConfig } from '@eui/core';

export const environment: EuiEnvConfig = {
    production: true,
    enableDevToolRedux: false,
    envDynamicConfig: {
        uri: '/assets/env-json-config.json',
        deepMerge: true,
        merge: ['modules'],
    },
};

动态配置文件（env-json-config.json） #

{
    "modules": {
        "core": {
            "userDetails": "/user-details"
        }
    }
}

这个错误的核心是：应用向/api/user-details发起请求时，服务器返回的不是预期的JSON，而是HTML页面（比如404错误页的<!DOCTYPE>内容），导致JSON解析失败，最终引发白屏。

可能的原因及解决方法： #

1. API路径未正确映射到后端服务

   • 检查AWS Amplify的Rewrites and redirects设置，默认规则会把未匹配的请求指向index.html，导致返回HTML。需要添加一条重写规则：
     • Source address: /api/<*>
     • Target address: https://你的实际API域名/api/<*>
     • Type: 200 (Rewrite)
   • 确认后端API（比如API Gateway、Lambda）是否部署了/api/user-details的端点，且能正常返回JSON。

2. 动态配置文件加载异常

   • 访问https://你的应用域名/assets/env-json-config.json，确认文件存在且内容正确。如果返回404，检查Angular打包配置，确保assets目录被正确包含在生产构建中。
   • 在fetchUserDetails方法里加一行console.log(url)，查看实际请求的URL是否为预期的/api/user-details，确认配置合并是否生效。

3. 本地代理与生产环境差异

   • 本地开发时可能用proxy.conf.json把/api转发到后端，但生产环境没有对应配置。必须在Amplify中配置上述的重写规则，否则/api请求会被当作静态资源请求，返回index.html。

4. 后端服务未正常运行

   • 用Postman或curl直接请求后端API端点，检查返回是否为合法JSON。如果后端返回错误或未启动，应用自然无法拿到正确数据。

快速调试步骤： #

• 打开浏览器控制台的Network标签，找到/api/user-details的请求，查看Response内容，确认是HTML还是JSON。
• 在fetchUserDetails中添加日志，打印请求的URL和返回值，精准定位问题环节。

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