CODEWITHSUNDEEP
angularangular6angular4-formsangular4-router
rupesh sripuram
rupesh sripuram

Reputation: 309

how to load the angular 6 application fast in browser?

how to reduce the time for loading of the application. My angular6 application has one app module. under the app module, I have so many components like home, signup, login, user-dashboard, client-dashboard etc.my application is taking to much time to load and I want to load the one or two components first then remaining components need to load in the background. please let me is it possible or not if it is possible how to do. thanks in advance.

Upvotes: 0

Views: 636

Answers (3)

Pawan Singh
Pawan Singh

Reputation: 71

The best way to load application fast is Lazy Loader(Load Module on Demand). And Make Production build with:

ng build --prod --build-optimizer

Upvotes: 1

Cpt Kitkat
Cpt Kitkat

Reputation: 1402

Basically in Angular application components load only when they are clicked on.When you click on a component the ngOninit gets triggered and the page loads. I am guessing if your app is loading slow then try removing Entry components from module.ts file.Remove unnecessary componentsthat you don't think will be needed at load time.You must have declared all the components in entry component of your module.ts file. Other scenario where a page will load slowly is if you have lot of images and videos.In that case you can try optimizing your code and use javascript library or lazy load feature. If your data is not being rendered or displayed because your backend is slow or it is taking time to fetch data from backend then you need to optimize your backend. There is nothing you can do to decrease load time in this case.

Angular has many features that allow us to configure apps to be as fast and high performing as possible. Go through the following article. AngularCustom Preloading and Lazy Loading Strategies with Angular

It will guide you and help you with selective loading of angular application.

Upvotes: 0

Anil Kumar Reddy A
Anil Kumar Reddy A

Reputation: 648

The best approach can be achieved by using lazy loading.Angular-Lazy-Loading.

If you use --prod flag while using ng serve it may take time to load but it increases the total performance of the application.

It can also be achieved using ng build --prod.

Upvotes: 0

Related Questions