Angular 4 : Build to prod: Property is private and only accessible within class

Viewed 25682

i'm using Angular 4 , i'm running : ng build --prod

i'm catching this :

ng build --prod
Your global Angular CLI version (1.2.2) is greater than your local
version (1.0.0). The local Angular CLI version is used.

To disable this warning use "ng set --global warnings.versionMismatch=false".
Hash: 7fce5d10c4c3ac9745e8
Time: 68351ms
chunk    {0} polyfills.7790a64cc25c48ae62ea.bundle.js (polyfills) 177 kB {4} [initial] [rendered]
chunk    {1} main.f10680210e9e45ed33cc.bundle.js (main) 382 kB {3} [initial] [rendered]
chunk    {2} styles.d2e6408caea42ccabf99.bundle.css (styles) 175 bytes {4} [initial] [rendered]
chunk    {3} vendor.fc69ec31f7ef40b5fffb.bundle.js (vendor) 5.9 MB [initial] [rendered]
chunk    {4} inline.91747411075ce6c7f438.bundle.js (inline) 0 bytes [entry] [rendered]

ERROR in ng:///D:/Sources/DotNet/NextGCClientWeb/src/app/login/login.component.html (11,3): Property 'activatedRoute' is private and only accessible within class 'Login
Component'.

ERROR in ng:///D:/Sources/DotNet/NextGCClientWeb/src/app/login/login.component.html (11,3): Property 'activatedRoute' is private and only accessible within class 'Login
Component'.

this error seems to be strange :

ERROR in 
    ng:///D:/Sources/DotNet/NextGCClientWeb/src/app/login/login.component.html (11,3): Property 'activatedRoute' is private and only accessible within class 'Login Component

The indicated component in the error is the follwoing :

import { Component } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Http, Response } from '@angular/http';
import { SessionService } from './../../shared/service';

import { User } from './../../model';

@Component({
  selector: 'login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  error: string;
  email: string;
  password: string;
  stayConnected: Boolean;

  constructor (
    private sessionService: SessionService,
    private router: Router,
    private activatedRoute: ActivatedRoute
  ) {
    if (activatedRoute.snapshot.params['keyWording']) {
      this.sessionService.logInWithFinalization(activatedRoute.snapshot.params['keyWording']);
    }
  }

  logIn() {
    this.sessionService.logIn(this.email, this.password, this.stayConnected).subscribe(
      () => {
        if (this.sessionService.pageRequestedInUnauthenticated == null) {
          this.router.navigate(['/welcome']);
        } else {
          this.router.navigate([this.sessionService.pageRequestedInUnauthenticated]);
        }
      },
      (error: Response) => this.error = error.json()
    );
  }
}

The html view:

<div id="divLogin">
  <h1>Se connecter</h1><br>
  <i class="fa fa-envelope-o fa-lg" id="iconEmail"></i>
  <input type="text" id="email" [(ngModel)]="email" (keyup.enter)="logIn()" class="form-control" placeholder="Adresse email" autofocus />
  <i class="fa fa-lock fa-lg" id="iconPassword"></i>
  <input type="password" id="password" [(ngModel)]="password" (keyup.enter)="logIn()" class="form-control" placeholder="Mot de passe" />
  <button (click)="logIn()" class="btn btn-primary btn-block btn-lg">Connexion</button>
  <span id="containerStayConnected" title="Non implémenté"><input type="checkbox" id="stayConnected" [(ngModel)]="stayConnected" /><label for="stayConnected">Restez connecté</label></span>
  <a id="forgetPassword" title="Non implémenté">Mot de passe oublié</a><br><br><br>
  <a routerLink="/inscription">S'inscrire</a><br>
  {{ error }}
</div>

<div class="confirmationMessage" *ngIf="activatedRoute.snapshot.params['keyWording'] == 'validateInscription'"><br>Un lien de confirmation vous a été envoyé sur votre boîte email afin de valider votre compte. Merci.</div>

<div id="piedDePage"></div>

when running ng serve am not catching it .

Any propositions ??

4 Answers

Please find more detail in Property is private and only accessible within class

Original "error" reported is not an error, but normal restriction of AOT at least for versions 2, 4, 5. The variable used in the template needs to be declared as "public". Template is treated as a separate Typescript class.

You can change all the components variable from private to public. If they are used into your template.

Or you can use ng build -prod --aot=false for building

try with " ng build -env=prod " command. It worked for me to solve this error.

Related