I was asked to do modifications on Angular 6 web application i'didn't know until now . I received a sourcecode but i tried to display the website and i doesn't work. I stayed late at night and wake up early in morning just to make ng serve succesful. I'v been correcting browser console errors too. It seems this source code is not working. But now i'm stuck. I can't find the problem on the net. The browser console error is
Response : error Cannot GET /secure/bootstrap-data
It' for an GET http request. I cannot say if a module is lacking or something. I'm just 2 months experimented in angular.
here is 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"
}
}
thanks.
EDIT
More information with web browser :
error in bootstrapper.service.ts : line 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();
});
});
line 65 refers to console.log('bootstrap error', error). It seems to be Ajax Request.
Found the entire service. It seems to be call at launch :
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;
}
}
AFTER RESEARCHES
All http requests in the code are used with prefix 'secure' and i have this proxy.conf.json file :
{
"/secure": {
"target": "http://localhost:8000",
"secure": false
},
"/__clockwork": {
"target": "http://localhost:8000",
"secure": false
}
}
but it's not redirecting HTTP GET Request in browser console : http://localhost:4200/secure/bootsrap-data !
I've just used the ng serve command :
ng serve --proxy-config proxy.conf.json
because it wasn't taking in account the proxy file to redirect to backend when the url was starting with /secure/*.