Angular 7: Построить на prod: свойство 'service' является частным и доступно только в пределах класса "Component"

Question

Я использую Angular 7. Я запускаю эту сборку cmd ng build --prod для защиты.

В этот раз я кеширую эту ошибку (свойство 'service' является частным и доступно только в классе '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'.

Это мой 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>

Это мой Файл 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() {
  }

}

при запуске ng serve я его не ловлю.

Answer 1

Похоже, что вы используете опережающую компиляцию (во время сборки) и пытаетесь получить доступ к частному члену (service) компонента в его шаблоне [disabled]="service.loginform.invalid" service.loginform. Но это должно быть public в случае использования его в шаблоне и ahead-of-time compilation:

constructor(private service: LoginService) { }

должно быть:

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

Если вам нужна служба, являющаяся частной, и вам все же нужно использовать некоторые ее элементы в шаблоне вашего компонента, используйте get или другие методы (общедоступные), чтобы вернуть эти элементы:

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

Answer 2

Есть 2 способа решить эту проблему.
1.
Изменить private service: LoginService на public service: LoginService
Поскольку вы используете AOT во время компиляции, вы не можете получить доступ к закрытым свойствам вашего компонента в своем HTML-шаблоне.

2.

Если вы хотите сохранить свою службу приватной, вы можете предоставить открытый метод в контроллере, который возвращает свойства службы. Вы можете вызвать этот метод из вашего 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]="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>

Контроллер:

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

П.С .: Я сам еще не проверял второй.

Answer 3

Вам нужно сделать свой спецификатор доступа общедоступным, чтобы сделать его доступным

constructor(public service: LoginService) { }