Angular 2 DI error

Question

Somehow DI is failing to instantiate a service for me. I am getting error TS2339: Property 'authenticationService' does not exist on type 'LoginComponent' .

How do I properly instantiate the AuthenticationService? I thought that mentioning it in app.module.ts in providers would take care of that.

Thanks in advance

Here is the AuthenticationService.ts:

import { Injectable } from '@angular/core';
import { /*HTTP_PROVIDERS, */Http, Headers } from '@angular/http';
import { AuthHttp } from 'angular2-jwt';

@Injectable()
export class AuthenticationService {

    jwtToken: any;

    constructor(public authHttp: AuthHttp) { }

    jwtHeader = new Headers({
        "Content-Type": "application/json",
        "alg": "HS256",
        "typ": "JWT"
    });


    Login(username: string, password: string) {

        console.log("from authService: " + username);

        this.authHttp.post('/api/AuthResponse',
            JSON.stringify({
                "username:": username,
                "password:": password
            }),
            { headers: this.jwtHeader }
        ).subscribe(data => this.jwtToken = data,
            () => console.log(this.jwtToken));

        return this.jwtToken;
    }

}

Here is the LoginComponent.ts:

import { Component, OnInit } from '@angular/core';
import { AuthenticationService } from './../../services/AuthenticationService';
import { AuthHttp, AuthConfig/*, AUTH_PROVIDERS, provideAuth*/ } from 'angular2-jwt';

@Component({
    selector: 'login',
    template: require('./login.component.html')
})
export class LoginComponent implements OnInit {
    username;
    password;

    constructor(authenticationService: AuthenticationService){}

    ngOnInit() {
        // reset login status
        //this.authenticationService.logout();

    }

    //private authService: AuthenticationService = new AuthenticationService(new AuthHttp(new AuthConfig(), new Http());

    login()
    {
        console.log(this.username);
        console.log(this.password);
        this.authenticationService.Login(this.username, this.password);
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { UniversalModule } from 'angular2-universal';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AuthHttp, AuthConfig, AUTH_PROVIDERS, provideAuth } from 'angular2-jwt';

import { AuthenticationService } from './services/AuthenticationService';

import { AppComponent } from './components/app/app.component'
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { LoginComponent } from './components/login/login.component';


@NgModule({

    declarations: [
        AppComponent,
        NavMenuComponent,
        CounterComponent,
        FetchDataComponent,
        HomeComponent,
        LoginComponent
    ],
    imports: [
        UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
        FormsModule,
        HttpModule,
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'counter', component: CounterComponent },
            { path: 'fetch-data', component: FetchDataComponent },
            { path: 'login', component: LoginComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ],
    providers: [
        AuthHttp,
        provideAuth({
            headerName: 'Authorization',
            headerPrefix: 'bearer',
            tokenName: 'token',
            tokenGetter: (() => localStorage.getItem('id_token')),
            globalHeaders: [{ 'Content-Type': 'application/json' }],
            noJwtError: true
        }),
        AuthenticationService
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

Answer 1

Change the constructor like this:

constructor(private authenticationService: AuthenticationService){}

so that you can access the authenticationService outside of the constructor with this

Note: You can also use constructor(public authenticationService: AuthenticationService){} the injections just need a public / private identifier to be accessed with this

Answer 2

if you trying to one module provider in another one then you should mention in in your routing file

like you are trying "ABC" in "XYZ" then in XYZ routing class

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  providers: [ABC_provider]
})