角2服务不被注入(rc-4)

Question

这是我的app.component.ts：

import { Component } from '@angular/core';
import { provideRouter, RouterConfig, Router, ROUTER_DIRECTIVES } from '@angular/router';
import { LoginComponent } from "./login/login.component";
import {LoginService} from "./login/login.service";

var ROUTES = [
    {
        path: '',
        redirectTo: '/login',
        terminal: true
    },
    {
        // useAsDefault: true,
        path: 'login',
        component: LoginComponent,
        showInNavbar: false
    }
];

export const appRoutes: RouterConfig = ROUTES;
export  const APP_ROUTER_PROVIDER = provideRouter(appRoutes);

@Component({
    selector: 'my-app',
    providers: [LoginService],
    directives: [LoginComponent],
    templateUrl: 'app/app.component.html'
})

export class AppComponent {
    routes = ROUTES;
    constructor (private router: Router, private loginService:LoginService){} 

    shouldIncludeFooter() {
        return !(this.router.url === '/home');
    }
}

我的main.ts：

import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS, BrowserXhr, XHRBackend } from '@angular/http';
import { Injectable } from '@angular/core';
import { AppComponent, APP_ROUTER_PROVIDER } from './app/app.component';
import {AuthenticationConnectionBackend} from "./app/AuthenticationConnectionBackend";

@Injectable()
export class CustomBrowserXhr extends BrowserXhr {
    constructor() {
        super();
    }
    build(): any {
        let xhr = super.build();
        console.log(xhr);
        xhr.withCredentials = true;
        return <any>(xhr);
    }
}

bootstrap(AppComponent, [
    HTTP_PROVIDERS,
    APP_ROUTER_PROVIDER,
    { provide: BrowserXhr, useClass: CustomBrowserXhr },
    { provide: XHRBackend, useClass: AuthenticationConnectionBackend}
]);

我有这样的服务：

import { Injectable}    from '@angular/core';
import { Headers, Http } from '@angular/http';

import {User} from "../shared/User";
import {Router} from "@angular/router";

@Injectable()
export class LoginService {

    constructor(private http: Http, private router:Router) {
        this.user = new User();
    }
}

以及一个应该注入LoginService的组件：

import { Component } from '@angular/core';
import {LoginInfo} from "./login-info";
import { Router } from '@angular/router';
import {LoginService} from "./login.service";
import {ConstantsService} from "../constants.service";

@Component({
    selector: 'login',
    templateUrl: 'app/login/login.component.html',
    styleUrls: ['app/login/login.component.css']
})
export class LoginComponent {
    loginInfo: LoginInfo = {
        username: "",
        password: ""
    };
    status: number = 0;

    constructor(private loginService: LoginService, private router: Router) { }

    logIn() {
        this.loginService.logIn(this.loginInfo)
            .then(status => this.success(status))
            .catch(error => this.status = error.status);
    }

    success(status: number) {
        this.status = status;
        this.router.navigate(['home']);
    }
}

但是我在浏览器控制台中得到了这个错误：

(index):27 Error: ReferenceError: LoginService is not defined

当我进入源时，我会得到以下错误：

Error: ReferenceError: LoginService is not defined
at eval (http://localhost:3001/public/scripts/app/login/login.component.js:41:42)
at Object.eval (http://localhost:3001/public/scripts/app/login/login.component.js:44:3)
at eval (http://localhost:3001/public/scripts/app/login/login.component.js:47:4)
at eval (http://localhost:3001/public/scripts/app/login/login.component.js:48:3)
Evaluating http://localhost:3001/public/scripts/app/login/login.component.js
Evaluating http://localhost:3001/public/scripts/app/app.component.js
Evaluating http://localhost:3001/public/scripts/main.js
Error loading http://localhost:3001/public/scripts/main.js

这是在我更新到rc-4 (从rc-1)和新路由器从@ router /路由器被废弃之前的工作，但我似乎无法确定这个问题是从哪里来的。这肯定是一个依赖注入问题。

system.config.js

(function(global) {
    // map tells the System loader where to look for things
    var map = {
        'app':                        'public/scripts', // 'dist',
        '@angular':                   'node_modules/@angular',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        'rxjs':                       'node_modules/rxjs'
    };
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app':                        { main: 'main.js',  defaultExtension: 'js' },
        'rxjs':                       { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }
    };
    var ngPackageNames = [
        'common',
        'compiler',
        'core',
        'forms',
        'http',
        'platform-browser',
        'platform-browser-dynamic',
        'router',
        'router-deprecated',
        'upgrade'
    ];

    // Individual files (~300 requests):
    function packIndex(pkgName) {
        packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
    }
    // Bundled (~40 requests):
    function packUmd(pkgName) {
        packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
    }
    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
    // Add package entries for angular packages
    ngPackageNames.forEach(setPackageConfig);


    // // Add package entries for angular packages
    // ngPackageNames.forEach(function(pkgName) {
    //     packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
    // });
    var config = {
        map: map,
        packages: packages
    };
    System.config(config);
})(this);

Answer 1

我发现问题是我改变了一些角核心代码。这发生在网络风暴的重构过程中。我重新命名了我的服务之一，它在角度代码中重命名了一个同名的服务。我通过删除node_modules目录并重新运行npm install来修复它。

Answer 2

我想错误可能就在这里。检查app.component中的构造函数。

constructor (private router: Router, private loginService:LoginService,