CODEWITHSUNDEEP
angular
Bob5421
Bob5421

Reputation: 9153

Why angular component field should be public

This angular component works fine on development mode:

Here is the html file:

     <form>
            <select id="id_liste_selectionnee" [(ngModel)]="champ_id_liste_selectionnee" name="zzz">
                <option></option>
                <option *ngFor="let item of donnees" value="{{ item.id_liste }}">{{ item.nom_liste }}</option>
            </select>
        </div>
    </form>

And here is the top of the typescript file:

import { Component } from '@angular/core';
import {Service1} from "../services/service1.service";
import {Liste} from "../models/Liste";

@Component({
  selector: 'tagcomposant1',
  templateUrl: './composant1.component.html'
})
export class Composant1Component {
    private donnees:Liste[];
    private champ_id_liste_selectionnee:number|null;
  ....

But look at this error when i try to publish:

$ ng build --extract-css "--prod"

Property 'donnees' is private and only accessible within class 'Composant1Component'.

If i changed this field to public: Everything works. My question is: Why do not i have an error in development mode. The application works very well at runtime on my development computer.

Thanks

Upvotes: 0

Views: 602

Answers (2)

JB Nizet
JB Nizet

Reputation: 691993

In dev mode, the JIT compiler of Angular is used: once the application is downloaded by the browser, it transforms html templates into JavaScript code. In JavaScript, everything is public, so you have no problem.

In prod mode, the AOT compiler is used. When building the application, the templates are transformed to TypeScript files, which are then compiled, along with the component's code you wrote, into JavaScript.

So Angular generates a TypeScript class for your template, which of course needs to access the fields in your component. Since they are private, the TypeScript compiler complains.

AOT will, one day or another, become the default, even during development. When that happens, you will detect such mistakes sooner, while developing.

Upvotes: 2

Ploppy
Ploppy

Reputation: 15363

It's because in development the Compilation Ahead Of Time (AOT) is not enabled as opposed to production builds.

Serving with AOT enabled should throw an error:

ng serve --aot

In the future AOT will be enabled by default in development mode.

If you use Visual Studio Code, you can install the Angular Language Service extension, one of its features is to check for AOT errors.

Upvotes: 0

Related Questions