模拟后端错误

Question

尝试为 Angular 2 应用程序创建模拟后端。我已经导入了所有需要的依赖项，但我不断收到此错误： 从http://localhost:3000/dist/app.module.js 将http://localhost:3000/node_modules/@angular/http/bundles/http.umd.js/testing 加载为“@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 {}

Answer 1

刚遇到这个问题。 你应该添加一行

'@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js'

到您的 systemjs.config.js 文件中。可能这个答案可以帮助将来的人。