La propiedad 'X' es privada y solo se puede acceder a ella dentro de la clase 'xyzComponent'

Estoy tratando de crear una aplicación angular2 para producción, por eso estoy siguiendo este blog . Después de mi compilación exitosa de ngc cuando se lleva a cabo la compilación de tsc , genera el siguiente error que se muestra en la imagen:

Después de buscar por un tiempo, encontré este blog que explica el problema en la sección "La propiedad de contexto" que no puedo entender correctamente, puede ser que te dé una buena idea de lo que está sucediendo mal. básicamente, cuando hacemos una variable privada, obtenemos "ERROR: La propiedad es privada y solo se puede acceder a ella dentro de la clase" . No entiendo por qué viene.

Por favor ayúdenos ya que nos estamos dando golpes de cabeza con este problema durante los últimos días.

Para un componente dado, todos sus miembros (métodos, propiedades) a los que accede su plantilla deben ser públicos en el escenario de compilación AOT. Esto se debe al hecho de que una plantilla se convierte en una clase TS. Una clase generada y un componente son 2 clases separadas ahora y no puede acceder a miembros privados entre clases.

En resumen: no puede acceder a miembros privados en sus plantillas si desea utilizar la compilación anticipada.

Para una mejor explicación https://github.com/angular/angular/issues/11422

Quizás otra respuesta aún más simple es:

Chicos, no llamen a métodos, campos o propiedades privados desde el HTML :)

PD: al compilar el *.tscódigo *.js, AOT se niega a conectar miembros no públicos con la plantilla HTML .

Y "sí", esto hará que su canal de compilación falle: D

Así que arreglé este problema, lo mantendré breve y simple. Para arreglar esto, leí este blog profundamente. Como en la sección " La propiedad de contexto " La solución para este problema es que no use o cree una variable privada si desea usarla en la vista directamente cuando esté creando su compilación con AOT ( es decir, Ahead Of Time ) para producción.

*por ejemplo *

// 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;
    }
  }
}

salida: la propiedad '_initials' es privada y solo se puede acceder a ella dentro de la clase 'ThirdPartyComponent'.

Solución:

actualiza esto private _initials: string;para simplemente_initials: string;

Para esta respuesta, Harish Gadiya me brindó algo de ayuda, así que gracias por eso.

Obtuve esto cuando declaré inyectables privados en el constructor:

constructor(private service: SpecificObjectService) { }

Y los usó en la plantilla:

*ngFor="let pd of service.listSpecificObject "

La solucion es:

constructor(public service: SpecificObjectService) { }

Esto funciona para mí, chicos: simplemente cambie el servicio a público.

constructor(public service: SpecificObjectService) { }

App trabajando en producción !!

De acuerdo, esto es realmente un problema simple de javascript es6, si debe mantener el tipo de datos en privado, simplemente puede hacer esto

privateAccess(){
     return this.cannotAccessByInstanceButStillNeeded
}

Si desea utilizar el enrutador a la vista, hágalo público.

P.ej:

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

Lo pasé por alto hasta que Github CI me envía un correo de advertencia.