Angular - 语法错误：意外的标记“<”，“<div id="text_translate"><p> 这是部署在 AWS Amplify 上的 Angular 应用程序</p><p>该应用程序已成功部署，但呈现白屏，并且在控制台上我收到此消息：</p><p> <a href="https://i.stack.imgur.com/dYSXk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dYSXk.png" alt="在此处输入图像描述"></a></p><p> 但我不知道如何解决。</p><hr><p> 这是服务提供者：</p><pre> 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); } }</pre><p> 从该代码来看，这是“ <strong>const moduleCoreApi = this.config.modules.core;</strong> ”和“ <strong>moduleCoreApi.base</strong> ”部分</p><pre>import { ModulesConfig } from '@eui/core'; export const MODULES: ModulesConfig = { core: { base: '/api', } };</pre><p> 这是<strong>environment.prod.ts</strong></p><pre> import { EuiEnvConfig } from '@eui/core'; export const environment: EuiEnvConfig = { production: true, enableDevToolRedux: false, envDynamicConfig: { uri: '/assets/env-json-config.json', deepMerge: true, merge: ['modules'], }, };</pre><p> 从该代码中，这是<strong>env-json-config.json</strong></p><pre> { "modules": { "core": { "userDetails": "/user-details" } } }</pre></div>

Question

This is an Angular application deployed on AWS Amplify

The app is deployed successfully, however it renders a white screen, and on the console I receive this message:

But I don't know how to solve it.

---

This is the service provider:

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);
    }
}

And from that code, this is the " const moduleCoreApi = this.config.modules.core; " and the " moduleCoreApi.base " part

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

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

This is the 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'],
    },
};

And from that code, this the env-json-config.json

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

Answer 1

The issue has been solved thanks to @Harun Yilmaz by updating the api endpoint to this:

return this.http.get(url,{responseType: 'text'});