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

Answer 1

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
  ],

Answer 2

This is a new feature in Angular 6.

@Injectable({
  providedIn: 'root'
})

You have two options:

1. 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.)

2. 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

Answer 3

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

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

Answer 4

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 
    ]
})