web-dev-qa-db-fra.com

Angular 7: Build on prod: La propriété 'service' est privée et accessible uniquement dans la classe "Component"

J'utilise Angular 7. je lance cette cmd ng build --prod construire pour la protection.

Cette fois, je mets en cache cette erreur (la propriété 'service' est privée et accessible uniquement dans la classe 'LoginComponent'):

ERROR in src\app\login\login.component.html(5,33): : Property 'service' is private and only accessible within class 'LoginComponent'.
src\app\login\login.component.html(18,104): : Property 'service' is private and only accessible within class 'LoginComponent'.

C'est mon Code HTML:

<div id="login_section" class="d-flex justify-content-center align-items-center">
    <div class="login_cnt col-8 row">
        <div class="col-6 d-flex justify-content-center py-4">
            
            <form class="col-8" [formGroup]="service.loginform">
                <h2 class="text-center">User Login</h2>
                <mat-form-field class="col-12">
                  <input matInput type="text" placeholder="Username" formControlName="username" >
                  <mat-error>Username is Required</mat-error>
                </mat-form-field>
              
                <mat-form-field class="col-12">
                  <input matInput [type]="hide ? 'password' : 'text'" formControlName="password" placeholder="Password">
                  <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
                  <mat-error>Password is Required</mat-error>
                </mat-form-field>
                <a href="#" class="float-left lnk_forgot h7">Forgot Password</a>
                <button mat-raised-button color="primary" class="float-right" [routerLink]="['/home']" [disabled]="service.loginform.invalid">Login</button>
              </form>
        </div>
    </div>
</div>

C'est mon fichier TS:

import { Component, OnInit } from '@angular/core';
import { LoginService } from '../shared/login.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
  username : string;
  password: string;
  hide = true;

  constructor(private service: LoginService) { }
  ngOnInit() {
  }

}

lors de l'exécution du service, je ne l'attrape pas.

javascripthtmlangulartypescriptproduction-environment
5
Selvaprakasam Chellamuthu

Vous devez rendre votre spécificateur d'accès public pour le rendre accessible

constructor(public service: LoginService) { }
1
Sajeetharan

Il semble que vous utilisez la compilation Ahead-of-Time (lors de la génération) et que vous essayez d'accéder à un membre privé (service) du composant dans son modèle [disabled]="service.loginform.invalid", service.loginform. Mais il doit être public dans le cas de son utilisation dans le modèle et ahead-of-time compilation:

constructor(private service: LoginService) { }

devrait être:

// your component: change private service to public service
constructor(public service: LoginService) { }

// then you can use it like this in the template of your component:
[formGroup]="service.loginform"

[disabled]="service.loginform.invalid"

Si vous avez besoin qu'un service soit privé et que vous ayez encore besoin d'utiliser certains de ses membres dans le modèle de votre composant, utilisez get ou d'autres méthodes (publiques) pour renvoyer ces membres:

// your component
constructor(private service: LoginService) { }

get loginForm() {
  return this.service.loginform;
}

get loginIsInvalid(): boolean {
  return this.service.loginform.invalid;
}

// then in the template of your component you can use:
[formGroup]="loginform"

[disabled]="loginIsInvalid"
0
Vadi