Why Angular AOT compiles even when templates are accessing private properties?

Question

First of all I would like to say that I am completely new to Ionic and also to Angular. Forgive me for any stupid question or comment.

Well, I'm doing some testing to better understand how the AOT compiler works with Angular and Ionic.

I came across this situation where I have a component with private fields, which are accessed in my template, but still the build seems to work perfectly. From what I had understood, this should generate an error.

@IonicPage()
@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {

private username : string;

private password : string;  

//etc etc
}

My template references the fields as follows:

<ion-input [(ngModel)]="username" name="username" type="text" required>
<ion-input [(ngModel)]="password" name="password" type="password" required>

Then, I running the command below and no error was presented:

ionic build --prod

Running app-scripts build: --prod
[22:13:51]  build prod started ... 
[22:13:51]  clean started ... 
[22:13:51]  clean finished in 1 ms 
[22:13:51]  copy started ... 
[22:13:51]  deeplinks started ... 
[22:13:51]  deeplinks finished in 44 ms 
[22:13:51]  ngc started ... 
[22:13:57]  ngc finished in 5.39 s 
[22:13:57]  preprocess started ... 
[22:13:57]  preprocess finished in less than 1 ms 
[22:13:57]  webpack started ... 
[22:13:57]  copy finished in 5.66 s 
[22:14:23]  webpack finished in 25.97 s 
[22:14:23]  uglify started ... 
[22:14:23]  sass started ... 
[22:14:24]  sass finished in 1.35 s 
[22:14:24]  cleancss started ... 
[22:14:25]  cleancss finished in 1.22 s 
[22:14:37]  uglify finished in 14.13 s 
[22:14:37]  postprocess started ... 
[22:14:37]  postprocess finished in 13 ms 
[22:14:37]  lint started ... 
[22:14:37]  build prod finished in 45.69 s 

I found an issue open in Angular github with this same situation: https://github.com/angular/angular/issues/14739.

What was reported in this issue is that the error only appears when running ngc for the 2nd time, because in the first run ngc generates the ngfactories and only in the 2nd run it tries to convert these factories to Javascript and then detects the problem.

marlon@marlon-dell-5480 ~/ $ node_modules/.bin/ngc
marlon@marlon-dell-5480 ~/ $ node_modules/.bin/ngc
src/pages/login/login.ngfactory.ts:234:32: Property 'username' is private and only accessible within class 'LoginPage'.

This situation can be a problem if someone on the team forgets some private field and breaks the AOT build silently.

Faced with this scenario:

• Why AOT dont report any error when I running ionic build?
• Do I need to adjust any settings so that the error is shown by ionic-cli?
• Has there been any change in the AOT regarding the use of private fields that are accessed in the template?

Answer 1

You have an alternative here.That is you can easily see those errors if you install Angular Language Service extension.

On HTML code:

VS code problems section: