Why DI for `FormBuilder` fails if used like this `private fb: FormBuilder`

Question

I'm trying to inject FormBuilder class like this into component:

@Component({
   ...
})
export class TaskComponent implements OnInit {
constructor(private fb: FormBuilder) {}

However, it fails and I get the error:

(SystemJS) Can't resolve all parameters for TaskComponent: (?).↵ Error: Can't resolve all parameters for TaskComponent: (?).

If I change the constructor to this form:

constructor(@Inject(FormBuilder) fb: FormBuilder) {    }

It's working fine. What's the problem?

Answer 1

I didn't have

"emitDecoratorMetadata": true

in tsconfig.json and so this part wasn't generated by tsc:

TaskComponent = __decorate([
    core_1.Component({
        moduleId: module.id,
        selector: 'task',
        templateUrl: 'task.component.html',
        styleUrls: ['task.component.css']
    }),
    __metadata("design:paramtypes", [forms_1.FormBuilder])
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
], TaskComponent);