Angular 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

我想错误可能出在这里。检查 app.component.

中的构造函数

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

Answer 2

我发现问题出在我更改了一些 Angular 核心代码。这发生在 Webstorm 的重构过程中。我重命名了我的一项服务，它在 Angular 代码中重命名了一个同名服务。我通过删除 node_modules 目录并重新运行 npm install 来修复它。

Angular 2 服务未被注入 (rc-4)

Angular 2 Service is not being injected (rc-4)

angularjs

service

dependency-injection

angular

angular2-services