web-dev-qa-db-fra.com

Angular 4: Build to prod: la propriété est privée et accessible uniquement dans la classe

j'utilise Angular 4, je lance: ng build --prod

je saisis ceci:

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

cette erreur semble étrange:

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

Le composant indiqué dans l'erreur est le suivant:

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

La vue html:

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

lors de l'exécution ng serve je ne l'attrape pas.

Toutes propositions ??

javascriptangulartypescriptwebpackproduction-environment
12
firasKoubaa

Passage à la route activée par le public

Vous devez faire votre enabledRoute public. Voici une liste de contrôle lors de la construction pour la production avec aot. (Tiré de ce projet github https://github.com/asadsahi/AspNetCoreSpa , bien qu'il soit applicable à tout autre angular.)

AOT - Ahead of time compilation À NE PAS FAIRE

  • N'utilisez pas d'instructions require pour vos modèles ou styles, utilisez styleUrls et templateUrls, le plug-in angular2-template-loader le modifiera en fonction des besoins lors de la génération.

  • N'utilisez pas d'export par défaut.

  • N'utilisez pas form.controls.controlName, utilisez form.get (‘controlName’)

  • N'utilisez pas control.errors? .SomeError, utilisez control.hasError (‘someError’)

  • N'utilisez pas de fonctions dans vos fournisseurs, routes ou déclarations, exportez une fonction, puis référencez ce nom de fonction Entrées, Sorties, Afficher ou Contenu enfant (s), Hostbindings et tout champ que vous utilisez à partir du modèle ou annoter pour Angular devrait être public

Garder activéRoute privée

Pour garder votre Route activée privée, vous pouvez faire quelque chose comme ça

theData:any;
constructor (
private sessionService: SessionService,
private router: Router,
private activatedRoute: ActivatedRoute
 ) {
     this.activatedRoute.params.subscribe(
      params => {
        this.theData= params['keyWorking']; 
        //you will bind the theData instead of the activatedROute
      }
    );
}

}

et dans votre modèle

<div class="confirmationMessage" *ngIf="theData == 'validateInscription'">
<br>Un lien de confirmation vous a été envoyé sur votre boîte email afin de 
 valider votre compte. Merci.</div>
16
brijmcq

Veuillez trouver plus de détails dans La propriété est privée et uniquement accessible dans la classe

L '"erreur" d'origine signalée n'est pas une erreur, mais une restriction normale d'AOT au moins pour les versions 2, 4, 5. La variable utilisée dans le modèle doit être déclarée "publique". Le modèle est traité comme une classe TypeScript distincte.

Vous pouvez changer toutes les variables des composants de privé à public. S'ils sont utilisés dans votre modèle.

Ou vous pouvez utiliser ng build -prod --aot = false pour la construction

3
Henry Zhang

Vous essayez d'accéder à activatedRoute que vous avez injecté dans votre constructor en tant que variable private. Cela signifie que vous ne pourrez pas y accéder à partir de votre modèle lorsque vous utilisez AOT.

Modifiez-le en public activatedRoute ou ne l'utilisez pas du tout pour résoudre ce problème.

0
Chrillewoodz

essayez avec la commande "ng build -env = prod". Cela a fonctionné pour moi de résoudre cette erreur.

0
SIddharth Pradhan