Angular 5+ Constructor fields injector error

Question

So I'm not injecting a service simply trying to init some fields with a constructor like so.

  constructor(private wheels : number, private model : string, private automatic : boolean, private colour : string, private engine : string, private seats :number) { 
    this.wheels = wheels;
    this.model = model;
    this.automatic = automatic;
    this.colour = colour;
    this.engine = engine;
    this.seats = seats;
  }

I've tried it without the this.x=x now if I create a new object and then console.log the object it has all the inited values, but the project wont load & gives me this error message.

ERROR Error: StaticInjectorError(AppModule)[Module1AComponent -> Number]: 
  StaticInjectorError(Platform: core)[Module1AComponent -> Number]: 
    NullInjectorError: No provider for Number!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1034)
    at resolveToken (core.js:1271)
    at tryResolveToken (core.js:1216)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1113)
    at resolveToken (core.js:1271)
    at tryResolveToken (core.js:1216)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1113)
    at resolveNgModuleDep (core.js:8161)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:8849)
    at resolveDep (core.js:9214)

Very frustrating as I can't seem to find an awful lot with regards to injection issues around fields, only in regards to services.

Answer 1

It seems like you're passing parameters to Angular's Component class, so that its instance can be created newed up. But as soon as you declared it as angular @Component. At the time of execution angular framework hijacks the class constructor, and started evaluating each parameter of constructor and check each parameter inside Dependency Injection. Basically it does pass each parameter's type as a token to Dependency Injection System. And extract the value map to that token based on provider register for that token inside providers array of @NgModule

Suppose you have written below class where constructor has test parameter of type number. At the time of Component execution Angular DI system will tries to find instance of number provider (ensuring singleton instance, depends on Injector hierarchy) and then serve that instance.

constructor(private test: number)

is also shorthand of

constructor(@Inject(number) private test)

Though I'd not recommend to allow to create Angular component class instance manually like the way you're thinking to do it. I'd not say it will not work, but its not good practice. Although the workaround to make it working would be using @Optional() decorator before theses parameters. @Optional will basically return the null value if value doesn't found inside Dependency Injector container of application context.

constructor(
    @Optional() private wheels : number,
    @Optional() private model : string,
    @Optional() private automatic : boolean,
    @Optional() private colour : string,
    @Optional() private engine : string,
    @Optional() private seats :number
) {
}