error TS2554: Expected 1 arguments, but got 0. Angular6

Question

i have this problem, my app working fine but this error shows in IDE.

employee.service.ts :

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class EmployeeService {
getEmployee(){
  return [
    {"id":1,"name":"Micheal","age":21},
    {"id":2,"name":"Jackson","age":22},
    {"id":3,"name":"Hales","age":23},
    {"id":4,"name":"Moz","age":25}
  ];
}
  constructor() { }
}

and my employeeDetail.ts file is this:

import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../services/employee.service';

@Component({
  selector: 'employee-detail',
  templateUrl: './employee-detail.component.html',
  styleUrls: ['./employee-detail.component.css']
})
export class EmployeeDetailComponent implements OnInit {

  public employees = [];
  constructor(private _employeeService : EmployeeService) {

   }

  ngOnInit() {
    this.employees = this._employeeService.getEmployee();
  }

}

Here is the Employee-list.ts

import { Component, OnInit } from '@angular/core';
import {HttpClientModule} from '@angular/common/http';
import { EmployeeService } from '../services/employee.service';

@Component({
  selector: 'employee-list',
  templateUrl: './employee-list.component.html',
  styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {

  public employees = []



  constructor(private _employeeService : EmployeeService) { 


  }

  ngOnInit() {
    this.employees = this._employeeService.getEmployee();
  }

}

how can I solve this problem? what is the actual problem? as I am new to angular6 so I cannot figure out the error, please explain this. Thank you.

Answer 1

This is from my Angular 11 experience, although the solution might apply for other versions. I accidentally added a parameter to onSubmit() in my Typescript, when my markup was not passing any.

All I had to do was to remove the unused/unnecessary parameter from the onSubmit().

Answer 2

Sometimes you are missing an argument in a function it will work fine while a local build but for production build it will look for the argument and raise an error for missing argument.

Answer 3

It's a valid error, and isn't caused by the fullTemplateTypeCheck compile option per say. It happens when you create an instance of an object who's class makes use of Angular injectable's. If you switch to using the class as an injectable, it's solved.

Here's a working example. Let's say that we have a service class that looks like this:

Service Class

/**
 * First Service
 */
import { Injectable } from '@angular/core';
import { SecondService } from './second-service';

@Injectable({
  providedIn: 'root',
})
export class FirstService {
  constructor(public secondService: SecondService) {
    ...
  }
}

If you try to use this in another service or component with new FirstService(), you'll see the error.

Broken

/**
 * Third Service
 */
import { Injectable } from '@angular/core';
import { FirstService } from './first-service';

@Injectable({
  providedIn: 'root',
})
export class ThirdService {
  firstService: any;

  constructor() {
    this.firstService = new FirstService();
  }
}

The error error TS2554: Expected X arguments, but got 0. happens because the injectable class does have parameters if you attempt to instantiate it directly like this. If you use it as an Angular injectable, it's no longer an issue.

Fixed

/**
 * Third Service
 */
import { Injectable } from '@angular/core';
import { FirstService } from './first-service';

@Injectable({
  providedIn: 'root',
})
export class ThirdService {
  constructor(public firstService: FirstService) {
    ...
  }
}

Using the FirstService as an Angular @Injectable solves the problem.

@intotecho's answer was very helpful in determining this.

Answer 4

It seems to be related to the new Angular compiler option fullTemplateTypeCheck, if that option is set to true in the tsconfig file, the error appears.

Here is an example of the tsconfig.app.json file that reproduces the build error:

{  
  "extends": "../tsconfig.json",  
  "compilerOptions": {  
    "outDir": "../out-tsc/app",  
    "baseUrl": "./",  
    "module": "es2015",  
    "types": []  
  },

  "angularCompilerOptions": {  
     "fullTemplateTypeCheck": true  
  },  
  "exclude": [  
    "test.ts",  
    "**/*.spec.ts"  
  ]  
}

Answer 5

Using Angular8, I had the same error trigger on this line:

private configService= new ConfigService();

Where ConfigService uses HttpClient as per the demo.

I was constructing the service inside my component with new, and that needed HttpClient as a parameter to instantiate the service.

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css' ],
})
export class MainComponent {
  private dataService= new ConfigService();
}

Changed to this and the error goes away. Note the addition of the line providers: [ConfigService]

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css' ],
  providers: [ConfigService]
})
export class MainComponent {
  private dataService: ConfigService;
}

Hope this helps.

Answer 6

uninstall Angular CLI by running npm uninstall -g @angular/cli
clear the cach by running npm cache clean --force
and re-install the CLI by running npm install -g @angular/cli

Then create a new app from a clean directory and made sure all the versions are current

Angular CLI: 6.1.2
Node: 10.7.0
OS: win32 x64
Angular: 6.1.2
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.7.2
@angular-devkit/build-angular     0.7.2
@angular-devkit/build-optimizer   0.7.2
@angular-devkit/build-webpack     0.7.2
@angular-devkit/core              0.7.2
@angular-devkit/schematics        0.7.2
@ngtools/webpack                  6.1.2
@schematics/angular               0.7.2
@schematics/update                0.7.2
rxjs                              6.2.2
typescript                        2.7.2
webpack                           4.9.2

Answer 7

I do not see any issue with your code, as i see you should stop the applicaiton with Ctrl + C

and then do ng serve

Anyhow the reason being is that, your getEmployee method still needs one parameter to be passed, just make sure your code is saved on the service part.