Jk Jensen Jk Jensen - 4 months ago 37
AngularJS Question

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

Here is my 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');
}
}


And my 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}
]);


I have a service like this:

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();
}
}


And a component that should inject the 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']);
}
}


But I am getting this error in the browser console:

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


When I go into the source I am getting this error:

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


This was working previous to my updating to rc-4 (from rc-1) and to the new router from @angular/router-deprecated, but I can't seem to pinpoint where the issue is coming from. It's got to be a dependency injection issue.

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

I figured out that the issue was that I changed some of the Angular core code. This happened during a refactor in Webstorm. I renamed one of my services, and it renamed a service with the same name in the Angular code. I fixed it by deleting the node_modules directory and rerunning npm install.