Property 'X' is private and only accessible within class 'xyzComponent'

Question

I'm trying to build angular2 application for production for that I'm following this blog. After my ngc successful compilation when the tsc compilation takes place it generates below error shown in the image:

After searching for a while I found this blog which explains the problem in "The context property" section which I'm not able to understood properly may be it give some good idea to you that what's happening wrong. basically when we're making a variable private we're getting "ERROR: Property is private and only accessible within class".

Answer 1

For a given component all its members (methods, properties) accessed by its template must be public in the AOT compilation scenario. This is due to the fact that a template is turned into a TS class. A generated class and a component are 2 separate classes now and you can't access private members cross-class.

In short: you can't access private members in your templates if you want to use ahead-of-time compilation.

For better explaination https://github.com/angular/angular/issues/11422

Answer 2

Maybe another even simpler answer is:

Guys, please don't call private methods, fields or properties from the HTML :)

---

P.S. when compiling the *.ts code to *.js, AOT refuse to connect non-public members with the HTML template.

And "yes" this will make your build pipeline to fail :D

Answer 3

I got this when I declared private injectables in the constructor:

constructor(private service: SpecificObjectService) { }

And used them in the template:

*ngFor="let pd of service.listSpecificObject "

The solution is:

constructor(public service: SpecificObjectService) { }

Answer 4

So I fixed this problem I'll keep this short and simple. To fix this I read this blog deeply. As in section "The context property" The solution for this problem is that Don't use or create a private variable if you want to use it in the view directly when your are creating your build with AOT (i.e., Ahead Of Time) for production.

*for Example *

// component.ts
@Component({
  selector: 'third-party',
  template: `
    {{ _initials }}
  `
})
class ThirdPartyComponent {
  private _initials: string;
  private _name: string;

  @Input()
  set name(name: string) {
    if (name) {
      this._initials = name.split(' ').map(n => n[0]).join('. ') + '.';
      this._name = name;
    }
  }
}

output: Property '_initials' is private and only accessible within class 'ThirdPartyComponent'.

Solution:

update this private _initials: string; to simply _initials: string;

For this answer Harish Gadiya provide me some help so thanx for that.

Answer 5

This works for me guys: Simply change service to public.

constructor(public service: SpecificObjectService) { }

App working in production!!

Answer 6

If you want to use router in view, please make it public.

E.g:

<button 
   [routerLink]="['/login']"
   [queryParams]="{redirectTo: router.url}"
   translate="Please sign in to use this feature"
/>

import { Router } from '@angular/router'; 

constructor(
   public router: Router; // don't make it private
) {}

I overlooked it until Github CI sends me a warning mail.

Answer 7

ok see this is really a simple javascript es6 problem, if you must keep the data type private you can simply do this

privateAccess(){
     return this.cannotAccessByInstanceButStillNeeded
}

Answer 8

You can always add a // @ts-ignore before the lines causing this error. Check Doc

Answer 9

Just remove the 'private' access modifier in front of the variable. If it is the instance declared in a constructor then just change 'private' to 'public'.

Answer 10

To access private methods try to use in your tests :

spyOn(component as any, 'yourPrivateMethod').and.returnValue(...);

and

expect((component as any).yourPrivateMethod).toHaveBeenCalled();