-1

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,

Bikshu s
  • 389
  • 4
  • 14
  • Accessing private members is an error and so you should fix it. Solution: Make the property public. Every other solution I can imagine would be much more work than this simply search and replace task. – Christoph Lütjen Aug 12 '20 at 10:56
  • @ChristophLütjen as suggested tried but it was throwing other erros like Expected 0 arguments, but got 1. , Property 'customerMatchStatus' does not exist on type '{}'., Property 'event' does not exist on type 'FinanceHeaderInformationComponent'. and many more – Bikshu s Aug 12 '20 at 11:51
  • Afaik angular improved error checks and newer versions detect more errors than older versions. However… there are errors, you'll need to fix them. – Christoph Lütjen Aug 12 '20 at 13:24

1 Answers1

0

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.

Magnesium
  • 597
  • 6
  • 22