La proprietà "X" è privata e accessibile solo all'interno della classe "xyzComponent"

Sto cercando di creare un'applicazione angular2 per la produzione che sto seguendo questo blog . Dopo il mio NGC compilation di successo quando la compilation TSC avviene genera sotto l'errore mostrato nell'immagine:

Dopo aver cercato per un po 'ho trovato questo blog che spiega il problema nella sezione "La proprietà del contesto" che non sono in grado di capire bene potrebbe essere che ti dia un'idea che cosa sta succedendo male. fondamentalmente quando rendiamo privata una variabile otteniamo "ERRORE: la proprietà è privata e accessibile solo all'interno della classe" . Non capisco perché sta arrivando.

Si prega gentilmente di aiutarci mentre stiamo sbattendo la testa in questo problema negli ultimi due giorni.

Per un dato componente, tutti i suoi membri (metodi, proprietà) a cui accede il modello devono essere pubblici nello scenario di compilazione AOT. Ciò è dovuto al fatto che un modello viene trasformato in una classe TS. Una classe generata e un componente sono ora 2 classi separate e non è possibile accedere a membri privati ​​tra classi.

In breve: non puoi accedere ai membri privati ​​nei tuoi modelli se desideri utilizzare la compilazione anticipata.

Per una migliore spiegazione https://github.com/angular/angular/issues/11422

Forse un'altra risposta ancora più semplice è:

Ragazzi, per favore non chiamare metodi, campi o proprietà privati ​​dall'HTML :)

PS durante la compilazione del *.tscodice *.js, AOT rifiuta di connettere membri non pubblici con il modello HTML .

E "sì" questo farà fallire la pipeline di build: D

Quindi ho risolto questo problema, lo terrò breve e semplice. Per risolvere questo problema ho letto a fondo questo blog . Come nella sezione " La proprietà del contesto " La soluzione per questo problema è che Non utilizzare o creare una variabile privata se vuoi usarla nella vista direttamente quando crei la tua build con AOT ( cioè, Ahead Of Time ) per produzione.

*per esempio *

// 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: la proprietà "_initials" è privata e accessibile solo all'interno della classe "ThirdPartyComponent".

Soluzione:

aggiorna questo private _initials: string;a semplicemente_initials: string;

Per questa risposta Harish Gadiya mi ha fornito un aiuto e grazie per questo.

Ho ottenuto questo quando ho dichiarato iniettabili privati ​​nel costruttore:

constructor(private service: SpecificObjectService) { }

E li ho usati nel modello:

*ngFor="let pd of service.listSpecificObject "

La soluzione è:

constructor(public service: SpecificObjectService) { }

Questo funziona per me ragazzi: cambia semplicemente il servizio in pubblico.

constructor(public service: SpecificObjectService) { }

App funzionante in produzione !!

ok vedi questo è davvero un semplice problema javascript es6, se devi mantenere privato il tipo di dati puoi semplicemente farlo

privateAccess(){
     return this.cannotAccessByInstanceButStillNeeded
}

Se desideri utilizzare il router visualizzato, rendilo pubblico.

Per esempio:

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

L'ho trascurato finché Github CI non mi ha inviato una mail di avviso.