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

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

constructor(public service: LoginService) { }

Il semble que vous utilisez la compilation Ahead-of-Time (lors de la compilation) 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 un modèle et une compilation anticipée :

// 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"

doit ê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 d'un service privé et que vous devez toujours utiliser certains de ses membres dans le modèle de votre composant, utilisez get ou d'autres méthodes ( public) pour renvoyer ces membres:

constructor(private service: LoginService) { }

Il existe deux façons de résoudre ce problème.
1.
Remplacez service privé: LoginService par service public: LoginService
Comme vous utilisez AOT lors de la compilation, vous ne pouvez pas accéder aux propriétés privées de votre composant dans votre modèle HTML.

2.

Si vous souhaitez garder votre service privé, vous pouvez fournir une méthode publique dans le contrôleur qui renvoie les propriétés du service. Vous pouvez appeler cette méthode à partir de votre modèle HTML. Ce serait quelque chose comme ceci:

Modèle:

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

  getLoginForm() {
    return this.service.loginform;
  }
}

Contrôleur:

<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]="getLoginForm()"> <!-- Change here-->
                <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]="getLoginForm().invalid">Login</button> <!-- Change here-->
              </form>
        </div>
    </div>
</div>

PS: Je n'ai pas testé moi-même le second pour le moment.