Angular Injectable decorator - Expected 0 arguments but got 1

Question

I am just getting started with the base tutorial for Angular but I face a small compilation issue.

I am following the tutorial on Angular's website. I am stuck with the dependency injection part because it doesn't want to compile.

In the tutorial they ask to create a service with :

ng generate service hero

In this generated service you have a decorator like this :

@Injectable()

Then they ask to add a parameter to that decorator like this :

@Injectable({
  providedIn: 'root'
})

When I try to do so I have a TypeScript error telling me :

error TS2554: Expected 0 arguments, but got 1. The versions I use are those ones :

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

@angular/cli: 1.7.4
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

Any idea why it doesn't accept the parameter ?

Thanks in advance !

That parameter is new. See https://blog.ninja-squad.com/2018/05/04/what-is-new-angular-6/ — rickz, May 12 '18 at 15:12
The tutorial you are referring must be of Angular 6. The parameter support in the @Injectable is recently introduced. — Rohit.007, May 12 '18 at 15:18
If you want to continue to use that tutorial, and stay with Angular 5, then change the version of the docs from *stable (6.0.1)* to *v5* in the dropdown at the bottom of the left nav (just below API). — R. Richards, May 12 '18 at 15:29

score 38 · Accepted Answer · edited Oct 26 '20 at 13:39

This is a new feature in Angular 6.

@Injectable({
  providedIn: 'root'
})

You have two options:

Refer to the Angular 5 documentation. (As @r-richards notes - change the version of the docs to v5 in the dropdown at the bottom of the left nav.)
Upgrade your project to Angular 6 to fix the issue

Follow the official Angular upgrade guide.

You'll fill out a short form selecting which version of Angular you are on and which version you want to upgrade to. It then shows you the list of necessary steps to take to perform the upgrade. You should follow this guide for all upgrades.

https://update.angular.io/

Here are some notes I took while upgrading from Angular 5 to Angular 6.

Your mileage may vary depending on your configuration. I linked to a couple articles below that helped me.

Update npm (Node Package Manager)

npm install npm@latest -g

Upgarde node

For Windows and mac users, the easiest method is with the official Node installer. Or see the article below for linux/unix.

https://nodejs.org/en/download/

Upgarde Angular CLI globally and locally

npm install -g @angular/cli
npm install @angular/cli

Update package.json

ng update @angular/cli

Update @Angular/Core

ng update @angular/core

Update Angular Material if you're using it

ng update @angular/material

Check for other packages that may need to be upgraded

npm outdated

Update all outdated packages

npm update

Or to upgrade a specific package

npm update <package name>

You may need to convert the angular-cli.json file to angular.json

ng update @angular/cli --migrate-only --from=1.7.4

And as @Sharondio notes, it never hurts to restart your IDE, and possibly your entire computer at this point if you're seeing weirdisms.

References:

Upgrading Node

http://www.hostingadvice.com/how-to/update-node-js-latest-version/

Upgrading Angular

https://vitalflux.com/upgrade-angular-5-app-angular-6/

Other Troubleshooting Steps

https://stackoverflow.com/a/49811824/151325

You have the links to node and angular flipped. You may want to edit this. — , May 24 '18 at 14:13
And the important part (that only took me 45 minutes or so to figure out)...restart your IDE so it recognizes the right TS Linting. — Sharondio, Jul 26 '18 at 21:41

score 7 · Answer 2 · edited Sep 09 '18 at 10:08

7

I also had this problem, and I have resolved it including the name of the class service in "Providers" in app.module.ts.

like this:

@NgModule({
    declarations:[

    ],
    imports:[
        CommonModule,
        HttpClientModule
    ],
    exports:[

    ],
    providers: [
        PostListService 
    ]
})

edited Sep 09 '18 at 10:08

David

5,882
3
33
44

answered Sep 09 '18 at 01:28

Rafael Marinho

71
1
1

As of Angular 6, this is not the recommended way to register a Service with your modules; the `@Injectable({ providedIn: '???' })` decorator is what should be done, in general. If you need to use an earlier version, what you say in your answer is how you should do it. – Andrew Gray Jan 24 '19 at 16:38

score 4 · Answer 3 · answered May 01 '20 at 18:47

The simplest solution to apply in Angular tutorial is:

1) Remove the unexpected argument in @Injectable decorator (due to your Angular version):

Do not use:

@Injectable({
  providedIn: 'root',
})
export class HeroService {

But use:

@Injectable()
export class HeroService {

2) Add HeroService and MessageService to app.module.ts to avoid a No provider for HeroService! execution error due to dependecy injection:

app.module.ts @NgModule metadata:

  providers: [
    HeroService,
    MessageService
  ],

score 1 · Answer 4 · answered Oct 30 '19 at 11:54

1

for angular 5 you need to NOT set the parameter and leave like

@Injectable(/* without any parameter here for angular 5 */)

answered Oct 30 '19 at 11:54

Igor Kurkov

4,318
2
30
31

Angular Injectable decorator - Expected 0 arguments but got 1

4 Answers4

Linked