Replace initial constructor with the inject function | Angular Community | Page 1

vital osprey Jan 17, 2023, 11:09 AM

#

Hello Angular fans,
I’ve been trying to replace initial constructor with the inject function from angular/core sadly the component did not perform the task it should have done with constructor. Any ideas ?

worthy crane Jan 17, 2023, 11:44 AM

#

Without seeing any code of what you tried, it's impossible to help you.

vital osprey Jan 17, 2023, 12:03 PM

#

import { Component, EventEmitter, Inject, inject, Injector, Input, Output } from '@angular/core';
import { DeviceService } from "../../../service/device.service";
import { Device } from "../../../model/device";
import { MatSnackBar } from "@angular/material/snack-bar";
import { TranslateService } from "@ngx-translate/core";

@Component({
  selector: 'app-sound-test',
  templateUrl: './sound-test.component.html',
  styleUrls: ['./sound-test.component.scss']
})
export class SoundTestComponent {

  constructor(
    private deviceService: DeviceService,
    private snackBar: MatSnackBar,
    private translate: TranslateService
  ) {
  }

   actions: string[] = [
    'armed',
    'disarmed',
    'intrusion',
    'ok'
  ];

  @Input() public dev;
  @Input() btnClick;

 
  postDeviceSoundActionOnclick = (action: string): void => {
    this.deviceService.postDeviceAction(
      this.dev.device_install.device_install_id,
      {
        type: "sound",
        parameters: {
          sound: `${action}`
        }
      }
    ).subscribe({
      next: (res) => {
        console.log(action);
        console.log(res);
        this.snackBar.open(this.translate.instant(`device-detail.action.sound.${action}`), 'Close', {
          duration: 3000,
        });
      },
      // TODO: Type error with appropriate type
      error: (err: any) => {
        console.log(action);
        console.log(err);
      }
    })
    console.log(`Clicked on ${action}`)
  }
}

I wanted to replace the constructor by

    private deviceService: DeviceService = inject(DeviceService);
    private snackBar: MatSnackBar = inject(MatSnackBar);

    private translate: TranslateService = inject(TranslateService);

and the import is import { inject } from '@angular/core';

solar hatch Jan 17, 2023, 12:16 PM

#

That looks correct to me.

worthy crane Jan 17, 2023, 12:22 PM

#

Which angular version are you using?

#

Also, any errors showing up when using the inject function?

vital osprey Jan 17, 2023, 3:06 PM

#

angular_version: 13.3.10
and in the console i have the following errors:

vendor.js:1 TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

polyfills.js:1 Uncaught Error: NG0203

worthy crane Jan 17, 2023, 3:10 PM

#

The inject function is only publicly available from v14 if I recall correctly

vital osprey Jan 17, 2023, 3:11 PM

#

Ha i found it, using Inject and not inject.

#

Ah ok so you have to use inject with v14 and with lower version of angular Inject, am i correct ?

worthy crane Jan 17, 2023, 3:13 PM

#

both versions are totally fine in versions v14 and up. It's just a preference thing, under the hood the constructor does the same thing as the inject function

#

I think most people prefer inject function because it looks cleaner to them and they can get rid of the constructor, but functionally it doesn't matter

vital osprey Jan 17, 2023, 3:16 PM

#

i wanted to use inject because i don't have to mock the services in the constructor in test files.
I can just spy on these injected services and inject them into the compiled component

worthy crane Jan 17, 2023, 3:17 PM

#

Yup, well upgrading your version to v14 should not be to difficult. So it might be worth it do that so you can use inject function

#Replace initial constructor with the inject function