Angular AOT build failing because of Private member

Question

I am working on a migration project where i have existing UI application codebase which is developed on Angular 8 .

When i am doing normal build (ie. ng build) i am able to build successfully but the deployed artifacts size is more.

Eg: main.js (4.5 mb) in size.

If i deploy above artifcats to my production my page is taking more time to render in browser.

So, For production build i tried building my angular application in AOT mode but the build is failing.

Below is the log getting from almost every template.

src/app/components/header/header.component.html(52,19): Property 'competenciesService' is private and only accessible within class 'HeaderComponent'

What I understood from log's are i can't use private members inside.html templates in AOT mode.

But as my application is build by some other team and i can't go and change the property in each and every template practically not possible.

Please suggest me is their any approach to resolve this so that my production build artifacts will reduce in size so that application performance will increase.

Angualr CLI global Version: 8.3.15

Angular CLI local Version: 8.3.0

Let me know if anything more information required.

Thanks,

Answer 1

Since you are migrating your code, your first focus should be to make as compliant as possible with your framework, even if it is a lot of work because the application will get harder and harder to maintain in the future. A template should only access public variables. You could add getters in your component ts file.