application angular 6 不显示浏览器控制台错误 Cannot GET /secure/bootstrap-data
application angular 6 not displaying browser console error Cannot GET /secure/bootstrap-data
我被要求对 Angular 6 个我直到现在才知道的 Web 应用程序进行修改。我收到了一个源代码，但我试图显示该网站，但我不工作。为了让ng serve成功，我熬夜了，一大早就起来了。我也一直在纠正浏览器控制台错误。看来这个源代码不起作用。但现在我卡住了。我在网上找不到问题。浏览器控制台错误为
Response : error Cannot GET /secure/bootstrap-data
这是一个 GET http 请求。我不能说是缺少模块还是什么。我刚刚在 angular.
中进行了 2 个月的实验
这里是 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'，错误）。
好像是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请求都使用前缀'secure'
我有这个 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 !
我刚刚使用了 ng serve 命令：
ng serve --proxy-config proxy.conf.json
因为当 url 以 /secure/* 开头时，它没有考虑重定向到后端的代理文件。
我被要求对 Angular 6 个我直到现在才知道的 Web 应用程序进行修改。我收到了一个源代码，但我试图显示该网站，但我不工作。为了让ng serve成功，我熬夜了，一大早就起来了。我也一直在纠正浏览器控制台错误。看来这个源代码不起作用。但现在我卡住了。我在网上找不到问题。浏览器控制台错误为
Response : error Cannot GET /secure/bootstrap-data
这是一个 GET http 请求。我不能说是缺少模块还是什么。我刚刚在 angular.
中进行了 2 个月的实验这里是 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'，错误）。 好像是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请求都使用前缀'secure' 我有这个 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 !
我刚刚使用了 ng serve 命令：
ng serve --proxy-config proxy.conf.json
因为当 url 以 /secure/* 开头时，它没有考虑重定向到后端的代理文件。