(XXX) is not a function angular 2 asp.net core

Question

I am getting an eroor as this.loginservicemodel.loginHttpCall is not a function. I have divided the angular 2 structure as three part - 1) Components 2) View Model and 3) Services.

Component will communicate with ViewModels and service. Service can access the viewModel.

I have return a function in service file as below

loginservice.ts

import { Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { LoginViewModel } from "../ViewModel/Login.ViewModel";
@Injectable()
export class LoginService {
    private heroesUrl = 'app/heroes';  // URL to web API
    private loginModel = LoginViewModel;
    constructor(private http: Http) { }

    public loginHttpCall() {
        console.log(this.loginModel);
        let headers = new Headers({ 'Content-Type': 'application/json' });
        this.http.post('/contact/send', JSON.stringify(this.loginModel), { headers: headers })
            .subscribe();
}

}

Login.ViewModel.ts

export class LoginViewModel {
    userName: string;
    password: string;
}

login.Components.ts

import { Component} from '@angular/core';
import { LoginViewModel } from "../ViewModel/Login.ViewModel";
import { LoginService} from "../Service/Login.Service";
@Component({
    selector: 'login-app',
    templateUrl: 'Home/partialLogin',
    providers: [LoginViewModel, LoginService]
})

export class LoginComponent {
    private model = LoginViewModel;
    private loginservicemodel: LoginService;

    constructor() {
        this.model.userName = 'erere@ada.comasdasd';
        this.model.password = "test anand";

    }

    login(event) {
        this.loginservicemodel.loginHttpCall();
        event.preventDefault();

    }

}

The login(event) function is been called when button click.

The method call the this.loginservicemodel.loginHttpCall(); function but I am getting an error as

TypeError: Cannot read property 'loginHttpCall' of undefined

Module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { Http } from '@angular/http';
import { LoginComponent } from "./Components/login.Component";


@NgModule({
    imports: [BrowserModule, FormsModule],
    declarations: [LoginComponent],
    bootstrap: [LoginComponent]
})
export class AppModule { }

I know its not getting the method but where am I making the mistake I don't know.

Can anyone please help me with this.

score 2 · Accepted Answer · answered Dec 28 '16 at 04:36

2

You need to inject the dependency in the constructor. Like this:

constructor(private loginservicemodel: LoginService) {
    this.model.userName = 'erere@ada.comasdasd';
    this.model.password = "test anand";
}

answered Dec 28 '16 at 04:36

eko

39,722
10
72
98

I am getting the another error in loginservice.ts as "No provider for Http! ". Can u help me to resolve this one too – San Jaisy Dec 28 '16 at 04:55
@SanJaisy http://stackoverflow.com/questions/33721276/angular-2-no-provider-for-http – eko Dec 28 '16 at 04:56
that solution is not working for me..... since I am using http in service.ts file – San Jaisy Dec 28 '16 at 05:01
@SanJaisy this service is a part of a module right? – eko Dec 28 '16 at 05:02
It is part of loginComponent and loginComponent is part of module. I have added the module part ... Please have a look – San Jaisy Dec 28 '16 at 05:05
@SanJaisy ok so did you try to import `HttpModule` inside the imports? – eko Dec 28 '16 at 05:09
Yeah it worked for me thanks I have added to imports – San Jaisy Dec 28 '16 at 05:12

(XXX) is not a function angular 2 asp.net core

1 Answers1