0
모서리 2 애플리케이션의 모의 백 엔드를 만들려고합니다. 나는 필요한 모든 종속성을 가져온하지만 난이 오류가 점점 계속 :모의 백 엔드 오류
import { Component, ViewChild, ElementRef, AfterViewInit, NgModule, animate, state, style, transition, trigger} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {Response, ResponseOptions, BaseRequestOptions, Http} from '@angular/http';
import {MockBackend} from '@angular/http/testing';
declare var $:JQueryStatic;
import { IProject } from "../shared/models/project"
import { ProjectService } from '../shared/models/projects.service'
@Component({
selector: 'project-list',
templateUrl: '../app/projects/project-list.component.html'
})
export class ProjectListComponent {
borderColor: string;
@ViewChild('tableAnim') elem:ElementRef;
projects: IProject[]
private db: IProject[] =[{
"projectId": 1,
"projectName": "Leaf Rake",
"projectType": "build",
"owner": "",
"timeStarted": new Date("2016-11-20T20:00:00"),
"state": 'Pending',
"metrics":0,
"build": 0,
"unitTest": 0,
"functionalTest": 0,
"typeStateImage": "",
"unitTestImage": "",
"metricsImage": "",
"buildImage": "",
"functionalTestImage": ""
},
{
"projectId": 2,
"projectName": "Bean Cake",
"projectType": "firewall",
"owner": "jtuck",
"timeStarted": new Date("2016-09-19T16:00:00"),
"state": 'Running',
"metrics":0,
"build": 0,
"unitTest": 0,
"functionalTest": 0,
"typeStateImage": "",
"unitTestImage": "",
"metricsImage": "",
"buildImage": "",
"functionalTestImage": ""
},
{
"projectId": 3,
"projectName": "Mean Bake",
"projectType": "firewall",
"owner": "samy",
"timeStarted": new Date("2016-04-16T13:00:00"),
"state": 'Rejected',
"metrics":20,
"build": 32,
"unitTest": 43,
"functionalTest": 68,
"typeStateImage": "",
"unitTestImage": "",
"metricsImage": "",
"buildImage": "",
"functionalTestImage": ""
},
{
"projectId": 4,
"projectName": "Kean Jake",
"projectType": "build",
"owner": "",
"timeStarted": new Date("2014-04-05T09:42:00"),
"state": 'Complete',
"metrics":20,
"build": 32,
"unitTest": 43,
"functionalTest": 68,
"typeStateImage": "",
"unitTestImage": "",
"metricsImage": "",
"buildImage": "",
"functionalTestImage": ""
}
];
constructor(private projectService:ProjectService, private backend: MockBackend){
this.backend.connections.subscribe(c => {
// return all projects
// GET: /projects
if (c.request.url === "http://localhost:8080/api/projects" && c.request.method === 0) {
let res = new Response(new ResponseOptions({
body: this.db
}));
c.mockRespond(res);
}
});
this.projects = this.db;
this.projects.forEach(project => {
if(project.projectType=='build'&&project.state=='Pending'){
project.typeStateImage= 'bootstrap-3.3.5-dist/css/img/pending-build.png';
project.metricsImage= 'bootstrap-3.3.5-dist/css/img/grey-box.png';
project.buildImage='bootstrap-3.3.5-dist/css/img/grey-box.png';
project.unitTestImage='bootstrap-3.3.5-dist/css/img/grey-box.png';
project.functionalTestImage='bootstrap-3.3.5-dist/css/img/grey-box.png';
}
else if(project.projectType=='build'&&project.state=='Complete'){
project.typeStateImage= 'bootstrap-3.3.5-dist/css/img/complete-build.png';
project.metricsImage= 'bootstrap-3.3.5-dist/css/img/green-box.png';
project.buildImage='bootstrap-3.3.5-dist/css/img/green-box.png';
project.unitTestImage='bootstrap-3.3.5-dist/css/img/green-box.png';
project.functionalTestImage='bootstrap-3.3.5-dist/css/img/green-box.png';
}
else if(project.projectType=='build'&&project.state=='Failed'){
project.typeStateImage= 'bootstrap-3.3.5-dist/css/img/failed-build.png';
project.metricsImage= 'bootstrap-3.3.5-dist/css/img/red-box.png';
project.buildImage='bootstrap-3.3.5-dist/css/img/grey-box.png';
project.unitTestImage='bootstrap-3.3.5-dist/css/img/grey-box.png';
project.functionalTestImage='bootstrap-3.3.5-dist/css/img/grey-box.png';
}
else if(project.projectType=='firewall'&&project.state=='Running'){
project.typeStateImage= 'bootstrap-3.3.5-dist/css/img/running-firewall.png';
project.metricsImage= 'bootstrap-3.3.5-dist/css/img/blue-grey-box.png';
project.buildImage='bootstrap-3.3.5-dist/css/img/grey-box.png';
project.unitTestImage='bootstrap-3.3.5-dist/css/img/grey-box.png';
project.functionalTestImage='bootstrap-3.3.5-dist/css/img/grey-box.png';
}
else if(project.projectType=='firewall'&&project.state=='Rejected'){
project.typeStateImage= 'bootstrap-3.3.5-dist/css/img/rejected-firewall.png';
project.metricsImage= 'bootstrap-3.3.5-dist/css/img/red-box.png';
project.buildImage='bootstrap-3.3.5-dist/css/img/grey-box.png';
project.unitTestImage='bootstrap-3.3.5-dist/css/img/grey-box.png';
project.functionalTestImage='bootstrap-3.3.5-dist/css/img/grey-box.png';
}
else if(project.projectType=='firewall'&&project.state=='Accepted'){
project.typeStateImage= 'bootstrap-3.3.5-dist/css/img/accepted-firewall.png';
project.metricsImage= 'bootstrap-3.3.5-dist/css/img/green-box.png';
project.buildImage='bootstrap-3.3.5-dist/css/img/green-box.png';
project.unitTestImage='bootstrap-3.3.5-dist/css/img/green-box.png';
project.functionalTestImage='bootstrap-3.3.5-dist/css/img/green-box.png';
}
});
}
public ngOnInit() {
this.projectService.loadAllProjects();
}
}
/* activeProject:IProject[];
selectProject(project){
this.activeProject = project;
console.log(this.activeProject)
$('#detail').remove();
$('#' + project.projectId).after(`<div id="detail">
<div class ="col-md-3">dfghj</div>
<div class ="col-md-3">hjkh</div>
<div class ="col-md-3">ghj</div>
<div class ="col-md-3">yui</div>
</div>`);
}
*/
/*tableAnimate(){
$(this.elem.nativeElement).addClass('fadeOutDown');
setTimeout(function(){
$(this.elem.nativeElement).removeClass('fadeOutDown');
var intro = $(this.el.nativeElement);
$('#working').hide();
intro.show();
}, 1000);
}*/
/*
selectUser(project){
this.activeProject = project;
console.log(this.activeProject)
}*/
내 애플 : http://localhost:3000/dist/app.module.js PLS 도움이
에서 "@ 각도/HTTP/테스트"로 오류로드 http://localhost:3000/node_modules/@angular/http/bundles/http.umd.js/testing를이 내 구성 요소입니다 모듈 :
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import {FormsModule} from "@angular/forms";
import { MockBackend } from '@angular/http/testing';
import { Http, BaseRequestOptions} from '@angular/http';
import { AppComponent } from "./app.component";
import {ProjectListComponent} from './projects/project-list.component';
import {ProjectDetailsComponent} from './projects/project-details.component';
@NgModule ({
providers: [
BaseRequestOptions,
MockBackend,
{
provide: Http,
deps: [MockBackend, BaseRequestOptions],
useFactory: (backend, options) => { return new Http(backend, options);}
}
],
imports: [ BrowserModule,
FormsModule ],
declarations: [
AppComponent,
ProjectListComponent,
ProjectDetailsComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule {}
구체적인 문제를 명확히하거나 추가 정보를 추가하여 필요한 것을 정확하게 강조하십시오. 현재 작성된 내용이므로 귀하가 원하는 내용을 정확하게 말하기는 어렵습니다. 이 질문을 명확히하기위한 [How to Ask] (http://stackoverflow.com/help/how-to-ask) 페이지를 참조하십시오. – Marcs
업데이트 됨 –