Angular 5: cannot get dependency injection working

Question

I have a angular 5 ("@angular/core": "5.1.2") app and I keep getting this error

Uncaught Error: Can't resolve all parameters for FooComponent: (?).

Service:

@Injectable()
export class FooService { }

Component:

@Component({template: '<p></p>'})
export class FooComponent {
    constructor(private s: FooService) { }
}

Module:

@NgModule({
    declarations: [ AppComponent, FooComponent ],
    bootstrap:[ AppComponent ],
    providers: [ FooService ] })
export class AppModule {}

My tsconfig:

{
    "compilerOptions": {
        "baseUrl": "",
        "declaration": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "noImplicitAny": false,
        "lib": [
            "es6",
            "dom"
        ],
        "mapRoot": "./",
        "module": "commonjs",
        "moduleResolution": "node",
        "rootDir": "./app",
        "outDir": "../dist",
        "sourceMap": true,
        "target": "es5",
        "noEmitOnError": true,
        "typeRoots": [
          "./node_modules/@types"
        ]
    },
    "include": [
      "./**/*.ts"
    ]
}

Any idea what I am missing? Note that I am using es6 lib and @Injectable doesn't take any parameters. I can't seem to find many good examples.

Generally how do we debug DI on angular?

Answer 1

@Component({
    template: '<p></p>'
})
export class FooComponent {
    constructor(@Inject("FooService") private s: FooService) { }
}

Missed @Inject