尝试为角度2应用程序创建模拟后端。我已导入所有必需的依赖项,但我不断收到此错误: 从http://localhost:3000/node_modules/@angular/http/bundles/http.umd.js/testing加载http://localhost:3000/dist/app.module.js为“@ angular / http / testing”时出错 请帮忙
这是我的组成部分:
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)
}*/
我的应用模块:
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 {}
答案 0 :(得分:0)
刚刚面对这个问题。 你应该添加一行
'@角/ HTTP /测试': 'NPM:@角/ HTTP /捆绑/ HTTP-testing.umd.js'
进入你的systemjs.config.js文件。可能这个答案可以在将来帮助某人。