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

Question

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

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

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) { }

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.

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

constructor(public service: SpecificObjectService) { }

App working in production!!