angular - 应用程序角度 6 不显示浏览器控制台错误无法获取 /secure/bootstrap-data

问题描述

我被要求对我直到现在才知道的 Angular 6 Web 应用程序进行修改。我收到了源代码，但我试图显示该网站但我无法正常工作。我熬夜很晚，早上很早就醒来，只是为了让 ng 服务成功。我也一直在纠正浏览器控制台错误。看来这个源代码不起作用。但现在我被困住了。我在网上找不到问题。浏览器控制台错误是

响应：错误无法获取 /secure/bootstrap-data

它用于 GET http 请求。我不能说是否缺少模块或其他东西。我只有 2 个月的 Angular 实验。

这是 package.json ：

{
  "name": "tickets",
  "version": "1.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve --aot --proxy-config proxy.conf.json --host 0.0.0.0 --port 4500",
    "build": "ng build --source-map=false --prod --deploy-url=client/",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e --proxy-config proxy.conf.json"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.6",
    "@angular/cdk": "^6.4.7",
    "@angular/common": "^6.1.6",
    "@angular/compiler": "6.1.6",
    "@angular/core": "^6.1.6",
    "@angular/forms": "^6.1.6",
    "@angular/http": "^6.1.6",
    "@angular/material": "^6.4.7",
    "@angular/platform-browser": "^6.1.6",
    "@angular/platform-browser-dynamic": "^6.1.6",
    "@angular/pwa": "^0.6.8",
    "@angular/router": "^6.1.6",
    "@angular/service-worker": "^6.1.6",
    "@ctrl/ngx-csv": "^1.1.6",
    "@types/chart.js": "^2.7.32",
    "@types/moment": "^2.13.0",
    "@types/pikaday": "^1.6.3",
    "angular2-csv": "^0.2.5",
    "brace": "^0.10.0",
    "chart.js": "^2.7.2",
    "chartist": "^0.11.0",
    "chartist-plugin-legend": "^0.6.2",
    "copy-to-clipboard": "^3.0.8",
    "core-js": "^2.5.4",
    "deepmerge": "^2.1.0",
    "dot-object": "^1.7.0",
    "file-saver": "^2.0.1",
    "hammerjs": "^2.0.8",
    "laravel-echo": "^1.3.0",
    "lodash": "^4.17.10",
    "moment": "^2.22.2",
    "ng-csv": "^0.3.6",
    "ngx-color-picker": "^4.5.3",
    "ngx-mat-select-search": "^1.6.0",
    "normalize.css": "^7.0.0",
    "perfect-scrollbar": "^1.4.0",
    "pikaday": "^1.7.0",
    "prismjs": "^1.6.0",
    "pusher-js": "^4.1.0",
    "raven-js": "^2.3.0",
    "rxjs": "6.0.0",
    "sortablejs": "^1.7.0",
    "svg4everybody": "^2.1.9",
    "tinymce": "^4.5.0",
    "xlsx": "^0.14.2",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.6.8",
    "@angular/cli": "^6.1.5",
    "@angular/compiler-cli": "^6.1.6",
    "@angular/language-service": "^6.1.6",
    "@ngxs/devtools-plugin": "^3.2.0",
    "@types/chartist": "^0.9.42",
    "@types/deepmerge": "^2.1.0",
    "@types/dot-object": "^1.5.0",
    "@types/hammerjs": "^2.0.35",
    "@types/jasmine": "^2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/lodash": "^4.14.112",
    "@types/node": "^8.9.4",
    "@types/prismjs": "^1.9.0",
    "@types/stripe-v3": "^3.0.8",
    "angular5-csv": "^0.2.11",
    "cheerio": "^1.0.0-rc.2",
    "codelyzer": "~4.2.1",
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.2",
    "gulp-filter": "^5.1.0",
    "gulp-rename": "^1.3.0",
    "gulp-svg-sprite": "^1.4.0",
    "gulp-svgmin": "^1.2.3",
    "gulp-svgstore": "^6.1.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "material-design-icons": "^3.0.1",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.9.2"
  }
}

谢谢。

编辑

使用网络浏览器的更多信息：

bootstrapper.service.ts 中的错误：第 65 行

/**
     * Bootstrap application with data returned from server.
     */
    public bootstrap(data?: string): Promise<any> {
        if ( ! data) data = window['bootstrapData'];

        // if we have bootstrap data in global scope, pass
        // it to the app and return self resolving promise
        if (data) {
            this.handleData(data);
            return new Promise(resolve => resolve());
        }

        // fetch bootstrap data from backend and return promise that
        // resolves once request is complete and data is passed to the app
        return new Promise((resolve, reject) => {
            const url = this.settings.getBaseUrl() + 'secure/bootstrap-data';
            this.http.get(url).subscribe(response => {
                this.handleData(response['data']);
                resolve();
            }, error => {
                console.log('bootstrap error', error);
                reject();
            });
        });

第 65 行指的是 console.log('bootstrap error', error)。它似乎是 Ajax 请求。

找到整个服务。它似乎是在启动时调用的：

import { Injectable, Injector } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Settings} from './config/settings.service';
import {Translations} from './translations/translations.service';
import {APP_CONFIG, VebtoConfig} from './config/vebto-config';
import {Role} from './types/models/Role';
import {User} from './types/models/User';
import { LocalizationWithLines } from './types/localization-with-lines';
import { CurrentUser } from '../auth/current-user';
import { AppearanceListenerService } from '../shared/appearance/appearance-listener.service';

export function init_app(bootstrapper: Bootstrapper) {
    return () => bootstrapper.bootstrap();
}

export interface BootstrapData {
    csrf_token: string;
    settings: VebtoConfig;
    guests_role: Role|null;
    user: User|null;
    i18n?: LocalizationWithLines;
}

@Injectable()
export class Bootstrapper {
    protected http: HttpClient;
    protected settings: Settings;
    protected currentUser: CurrentUser;
    protected i18n: Translations;
    public data: BootstrapData;

    constructor(protected injector: Injector) {
        this.http = this.injector.get(HttpClient);
        this.settings = this.injector.get(Settings);
        this.currentUser = this.injector.get(CurrentUser);
        this.i18n = this.injector.get(Translations);

        // merge all config provided by modules into single object
        this.injector.get(APP_CONFIG).forEach(providedConfig => {
            return this.settings.merge({vebto: providedConfig});
        });
    }

    /**
     * Bootstrap application with data returned from server.
     */
    public bootstrap(data?: string): Promise<any> {
        if ( ! data) data = window['bootstrapData'];

        // if we have bootstrap data in global scope, pass
        // it to the app and return self resolving promise
        if (data) {
            this.handleData(data);
            return new Promise(resolve => resolve());
        }

        // fetch bootstrap data from backend and return promise that
        // resolves once request is complete and data is passed to the app
        return new Promise((resolve, reject) => {
            const url = this.settings.getBaseUrl() + 'secure/bootstrap-data';
            this.http.get(url).subscribe(response => {
                this.handleData(response['data']);
                resolve();
            }, error => {
                console.log('bootstrap error', error);
                reject();
            });
        });
    }

    /**
     * Handle specified bootstrap data.
     */
    protected handleData(encodedData: string): BootstrapData {
        // decode bootstrap data from server
        const data = JSON.parse(atob(encodedData)) as BootstrapData;

        // set csrf token
        this.settings.csrfToken = data.csrf_token;

        // set all settings returned from server
        this.settings.setMultiple(data.settings);

        // set translations
        if (data.i18n) {
            this.i18n.setLocalization(data.i18n);
        }

        // set current user and default role for guests
        this.currentUser.init({
            guestsRole: data.guests_role,
            user: data.user,
        });

        // init appearance editor mode if needed
        this.injector.get(AppearanceListenerService).init();

        this.data = data;

        return data;
    }
}

研究后

代码中的所有 http 请求都使用前缀“安全”，我有这个 proxy.conf.json 文件：

{
  "/secure": {
    "target": "http://localhost:8000",
    "secure": false
  },
  "/__clockwork": {
    "target": "http://localhost:8000",
    "secure": false
  }
}

但它没有在浏览器控制台中重定向 HTTP GET 请求：http://localhost:4200/secure/bootsrap-data！

标签： angularangular-bootstrap

angular - 应用程序角度 6 不显示浏览器控制台错误无法获取 /secure/bootstrap-data

问题描述

解决方案

推荐阅读