角度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から）、新しいルーターには@ angular/router-deprecatedと表示されていましたが、どこから問題が発生しているのかを特定することはできません。それは依存性注入の問題でなければなりません。

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

私はAngularコアコードの一部を変更したという問題を認識しました。これはWebstormのリファクタリング中に発生しました。私は自分のサービスの名前を変更し、Angularコードで同じ名前のサービスの名前を変更しました。私はnode_modulesディレクトリを削除し、npm installを再実行して修正しました。

Answer 2

私はエラーがここかもしれないと思います。 app.componentのコンストラクタを確認してください。

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