A propriedade 'X' é privada e acessível apenas dentro da classe 'xyzComponent'

Estou tentando construir um aplicativo angular2 para produção para isso, estou acompanhando este blog . Após minha compilação bem-sucedida do ngc, quando a compilação tsc ocorre, ele gera o erro abaixo mostrado na imagem:

Depois de pesquisar por um tempo encontrei este blog que explica o problema na seção "A propriedade do contexto" que não estou conseguindo entender direito, pode dar uma boa ideia para você do que está acontecendo de errado. basicamente, quando tornamos uma variável privada, obtemos "ERROR: a propriedade é privada e acessível apenas dentro da classe" . Não estou entendendo por que isso está vindo.

Por favor, ajude-nos, pois estamos batendo de cabeça neste problema nos últimos dias.

Para um determinado componente, todos os seus membros (métodos, propriedades) acessados ​​por seu modelo devem ser públicos no cenário de compilação AOT. Isso se deve ao fato de um template ser transformado em uma classe TS. Uma classe gerada e um componente são duas classes separadas agora e você não pode acessar membros privados entre classes.

Resumindo: você não pode acessar membros privados em seus modelos se quiser usar a compilação antecipada.

Para melhor explicação https://github.com/angular/angular/issues/11422

Talvez outra resposta ainda mais simples seja:

Pessoal, por favor, não chame métodos privados, campos ou propriedades do HTML :)

PS ao compilar o *.tscódigo *.js, AOT se recusa a conectar membros não públicos com o modelo HTML .

E "sim", isso fará com que seu pipeline de construção falhe: D

Então, resolvi esse problema e vou mantê-lo curto e simples. Para corrigir isso, li este blog profundamente. Como na seção " A propriedade do contexto " A solução para este problema é que não use ou crie uma variável privada se quiser usá-la na visualização diretamente quando estiver criando sua construção com AOT ( ou seja, Ahead Of Time ) para Produção.

*por exemplo *

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

saída: a propriedade '_initials' é privada e acessível apenas na classe 'ThirdPartyComponent'.

Solução:

atualize isso private _initials: string;para simplesmente_initials: string;

Para esta resposta, Harish Gadiya me deu alguma ajuda, então obrigado por isso.

Eu entendi quando declarei os injetáveis ​​privados no construtor:

constructor(private service: SpecificObjectService) { }

E os usei no modelo:

*ngFor="let pd of service.listSpecificObject "

A solução é:

constructor(public service: SpecificObjectService) { }

Isso funciona para mim: basta mudar o serviço para público.

constructor(public service: SpecificObjectService) { }

App funcionando em produção !!

ok veja que este é realmente um problema simples de javascript es6, se você deve manter o tipo de dados privado, você pode simplesmente fazer isso

privateAccess(){
     return this.cannotAccessByInstanceButStillNeeded
}

Se você quiser usar o roteador em vista, torne-o público.

Por exemplo:

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

Eu esqueci até que o Github CI me enviou um e-mail de aviso.