无法解析LoginService的所有参数：Angular 5

Question

I, am new to angular. Trying to resolve this the issue as can't resolve all parameter for LoginService

Here is my Login service class

import { Injectable } from '@angular/core';
import { LoginViewModel as loginVM } from "../../viewmodel/app.login.viewmodel"
import { Data as LoginVmData } from '../../viewmodel/app.loginVm'
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { Observable } from 'rxjs';
@Injectable()
export class LoginService {

    private loginUrl = "Account/Authentication";
    private registerUrl = "Account/Registration";

    private _httpClientModule: HttpClient;
    private _loginVmData: LoginVmData;

    constructor(httpClientModule: HttpClient, loginVmData: LoginVmData ) {
        this._httpClientModule = httpClientModule;
        this._loginVmData = loginVmData;
    }


    public LoginHttpCall(): Observable<loginVM> {

        const headers = new HttpHeaders().set('Content-Type', 'application/json; charset=utf-8');

        return this._httpClientModule.post<loginVM>(this.loginUrl, this._loginVmData, { headers });
    }

    public registerHttpCall(_loginVM: LoginVmData): Observable<loginVM> {

        const headers = new HttpHeaders().set('Content-Type', 'application/json; charset=utf-8');

        return this._httpClientModule.post<loginVM>(this.registerUrl, _loginVM, { headers });
    }

}

Since I, search in the google and found some hints that it cause due to the circular dependency. I, am not able to figure it out where is the circular dependency in my case.

Here is the login component which calls the login services

import { Component } from '@angular/core';
import { AppComponent } from "../app/app.component";
import { LoginService } from "../../service/account/app.service.account.login";
import { LoginViewModel } from "../../viewmodel/app.login.viewmodel";
import { Data as LoginVmData } from "../../viewmodel/app.loginVm";
import { Router } from "@angular/router";
declare var componentHandler: any;
@Component({
    selector: 'login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css'],
    providers: [LoginService]
})
export class LoginComponent {
    private _appComponent: AppComponent;
    private _loginService: LoginService;
    private _loginViewModel: LoginViewModel;
    private _loginVmData: LoginVmData;
    private _router: Router;
    constructor(private appComponent: AppComponent, loginService: LoginService, loginViewModel: LoginViewModel, loginVm: LoginVmData, router: Router) {
        this._appComponent = appComponent;
        this._appComponent.menulist = false;
        this._loginService = loginService;
        this._loginViewModel = loginViewModel;
        this._loginVmData = loginVm;
        this._router = router;

    }

    ngOnInit() {
        componentHandler.upgradeAllRegistered();

    }

    save(modelValue: LoginViewModel, isValid: boolean) {
        if (isValid) {
            this._loginService.LoginHttpCall().subscribe(item => {
                this._loginViewModel.isSuccess = item.isSuccess;
                this._loginViewModel.message = item.message;
                this._loginViewModel.data.userName = item.data.userName;
                this._loginViewModel.data.profilePic = item.data.userName;
                this._loginViewModel.data.isAdmin = item.data.isAdmin;
                if (item.data.isAdmin && item.isSuccess) {
                    this._router.navigate(['/dashboard']);
                } else if (item.isSuccess) {
                    this._router.navigate(['/home'])
                }
            },
                err => {
                    console.log("Error occured.");
                });
        }
    }


}

APP.Shared.Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './components/app/app.component';
import { EqualValidator } from "./components/Validation/equal.validator.directive";
import { HomeComponent } from './components/home/home.component';
import { LoginComponent } from './components/usercreation/login.component';
import { MobileComponent } from './components/mobile/mobile.component';
import { SocialComponent } from './components/usercreation/social.component';
import { RegisterComponent } from './components/usercreation/signup.component';
import { DashBoardComponent } from './components/dashboard/dashboard.component';

@NgModule({
    declarations: [
        AppComponent, RegisterComponent, EqualValidator, DashBoardComponent,
        HomeComponent,
        LoginComponent,
        MobileComponent,
        SocialComponent
    ],
    imports: [
        CommonModule,
        HttpClientModule,
        FormsModule,
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'login', component: LoginComponent },
            { path: 'mobile', component: MobileComponent },
            { path: 'dashboard', component: DashBoardComponent },
            { path: 'signup', component: RegisterComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ]
})
export class AppModuleShared {
}

And the last App.Component.ts

import { Component } from '@angular/core';
import { DashBoardComponent } from "../../components/dashboard/dashboard.component";
import { LoginViewModel } from "../../viewmodel/app.login.viewmodel";
@Component({
    selector: 'app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],

})
export class AppComponent {
    public menulist: boolean = true;
    private _dashBoard: DashBoardComponent;
    public _loginVM: LoginViewModel;
    constructor(loginVm: LoginViewModel, dashboard: DashBoardComponent) {
        this.menulist = true;
        this._dashBoard = dashboard;
        this._loginVM = loginVm;
    }
    ngOnInit() {
        this.menulist = true;

    }
}

Where is the circular dependency I, am creating I am not able to figure it out.

Please can some help me. I am using Angular 5 with asp.net core 2.0

Answer 1

Issue is related to the loginVmData: LoginVmData in the LoginService . DI can not detect what is it when trying to inject it. About this you can read Dependency Injection in Angular .

But

Looking at your code, you are just passing this data into the LoginHttpCall service. So you can remove it from the constructor and make that method to accept this data, similar to the registerHttpCall method. Pass login model in the method instead of injecting it in the constructor.

constructor(httpClientModule: HttpClient ) {
   this._httpClientModule = httpClientModule;
}

public LoginHttpCall(loginVmData: LoginVmData): Observable<loginVM> {    
   const headers = new HttpHeaders().set('Content-Type', 'application/json; charset=utf-8');    
   return this._httpClientModule.post<loginVM>(this.loginUrl, loginVmData, { headers });
}