angular 9

Angular – Use of access modifier while injection of service

Pandiyan MuruganLeave a comment

This is a small writing about the interesting error I have faced recently while debugging an angular app.

The following error shows up in browser console

đź’ˇ Error: can’t access property “run”, this.appService is undefined

this is a generic error shows up when we add one of the service as DI in our component.

The error is can’t access property or function, because particular service is undefined.

In my case, I have a function called run() which is present in appService

this.appService.run();

And the error showing in console is telling us that the code is trying to call undefined service’s function

undefined.run()

This is what the error telling to us.

You can use the following stackblitz link to try out and reproduce the issue

https://stackblitz.com/edit/angular-service-nzkubh?file=app%2Fhello.component.ts

In the below example, I have called particular function in the service.

export class HelloComponent {
  @Input() name: string;

  constructor(
    appService: AppService,
    private helloService: HelloService
  ) {
    this.appService.run();
    this.helloService.run();
  }
}

Issue

What was the issue?

From the above snippet, you could have noticed that I haven’t mentioned the access specifier of the appService.

This is why it is throwing issue in out console.

The issue resolved by setting up the access specifier of the appService in the constructor.

export class HelloComponent {
  @Input() name: string;

  constructor(
    **private** appService: AppService,
    private helloService: HelloService
  ) {
    this.appService.run();
    this.helloService.run();
  }
}

Explanation

When we prefix a constructor parameter with an access modifier, it is getting promoted as class property in Typescript.

Without any access modifier prefix the constructor parameter is just the method parameter. We should manually assign it to declared class property from the constructor.

Method #1

In the following snippet, we have added a class property and assigned the the parameter and used it later on.

export class HelloComponent {
  @Input() name: string;
  private _appService: AppService;

  constructor(appService: AppService) {
    this._appService = appService;
    this._appService.run();
  }
}

Method #2

In the following snippet, I have declared a class property name same as parameter name and used it later on.

export class HelloComponent {
  @Input() name: string;
  private appService: AppService;

  constructor(appService: AppService) {
    this.appService = appService;
    this.appService.run();
  }
}

Method #3

In the following snippet, I have added the constructor parameter with access modifier. Now no need to declare separate class property.

export class HelloComponent {
  @Input() name: string;

  constructor(private appService: AppService) {
    this.appService = appService;
    this.appService.run();
  }
}

Hope the above explanation is simple and helpful.

Cheers!

#HappyCoding

Source:

https://stackoverflow.com/questions/53075139/angular-6-use-of-access-modifier-while-injection-any-service

Advertisement

Difference between constructor and ngOnInit

Pandiyan MuruganLeave a comment

The Constructor is a default method of the class that is executed when the class is instantiated and ensures proper initialisation of fields in the class and its subclasses. Angular, or better Dependency Injector (DI), analyses the constructor parameters and when it creates a new instance by calling new MyClass() it tries to find providers that match the types of the constructor parameters, resolves them and passes them to the constructor like

new MyClass(someArg);

ngOnInit is a life cycle hook called by Angular to indicate that Angular is done creating the component.

We have to import OnInit like this in order to use it (actually implementing OnInit is not mandatory but considered good practice):

import { Component, OnInit } from '@angular/core';

then to make use of the method OnInit, we have to implement the class like this:

export class App implements OnInit {
  constructor() {
     // Called first time before the ngOnInit()
  }

  ngOnInit() {
     // Called after the constructor and called  after the first ngOnChanges() 
  }
}

Implement this interface to execute custom initialization logic after your directive’s data-bound properties have been initialized. ngOnInit is called right after the directive’s data-bound properties have been checked for the first time, and before any of its children have been checked. It is invoked only once when the directive is instantiated.

Mostly we use ngOnInit for all the initialisation/declaration and avoid stuff to work in the constructor. The constructor should only be used to initialise class members but shouldn’t do actual “work”.

So you should use constructor() to setup Dependency Injection and not much else. ngOnInit() is better place to “start” – it’s where/when components’ bindings are resolved.