Angular 7 : Build on prod : Property 'service' is private and only accessible within class "Component"

Question

I am Using Angular 7. i run this cmd ng build --prod build for protection.

That time i am caching this Error( Property 'service' is private and only accessible within class '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'.

It's my HTML Code:

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

It's My TS File:

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

}

when running ng serve am not catching it .

Answer 1

There are 2 ways to resolve this.
1.
Change private service: LoginService to public service: LoginService
As you are using AOT during compilation, you can not access private properties of your component in your HTML template.

2.

If you want to keep your service private, you can provide a public method in the controller which returns the service properties. You can call this method from your HTML template. It would be something like this:

Template:

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

Controller:

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

P.S: I have not tested the second one myself for the moment.

Answer 2

You need to make your access specifier to be public to make it accessible

constructor(public service: LoginService) { }

Answer 3

Seems that you're using Ahead-of-Time compilation (while build), and you're trying to access a private member (service) of the component in its template [disabled]="service.loginform.invalid", service.loginform. But it must be public in the case of using it in template and ahead-of-time compilation:

constructor(private service: LoginService) { }

should be:

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

If you need a service be private and still need to use some of its members in the template of your component, use get or other methods (public) to return that members:

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

Do you have concerns about having to call a function instead of using just a variable in the template?

Catch this self-executing function tip:

Template:

<form class="col-8" [formGroup]="loginform"> <!-- Change here-->

Controller:

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

  loginform = (() -> this.service.loginform)(); /* Change here */
}