CODEWITHSUNDEEP
angularangular6
Techno Crave
Techno Crave

Reputation: 433

Angular 6 application taking too long to respond after publishing it into server

I have developed one angular application and deployed it in production build using (ng build --prod) in windows server (IIS). All images are compressed and API responses are taking normal time to respond (max 800 ms) But my application is too slow to load the first time; when I hit the URL in browser it takes nearly equal to 75 seconds to completely load the application. After that, all the components are working smoothly. I have doubt in below points.

Route file in my application is as below.

const appRoutes:Routes=[
    {path:'',component:HomeComponent},
     ...
     ]

@NgModule({
    imports:[
        RouterModule.forRoot(appRoutes)
    ],
    exports:[ RouterModule ]
})

export class AppRountingModule{

}

Any suggestions regarding above will be very helpful as I am stuck in this since last week. Thanks in advance!

Upvotes: 2

Views: 4209

Answers (2)

danday74
danday74

Reputation: 57036

If you aren't using lazy loading, Angular will load absolutely everything up front. This is of course pretty slow (but 75 secs is excessively slow so it may suggest other issues).

You need to organise your components into modules and load those modules using lazy loading. This will only load the components declared in the lazily loaded module on demand when the route is first accessed and will not load all components up front.

This will reduce your initial app load time. There may be some delay on loading a route for the first time but if the route is not overloaded with components it will be fine.

Also, notice the new Angular way of using services:

@Injectable({
  providedIn: 'root'
})

This means that the service no longer has to be put in a providers array but is instead loaded on demand. This has a double benefit of making code organisation easier and is great if you are just using singleton services. You can also specify a module instead of 'root' if the service is only used within a single module.

Upvotes: 3

Omid Farhang
Omid Farhang

Reputation: 46

Does Angular Loads All components declared in routes at the time of initialization?

Not if you use Lazy loading.

Do I have to use Lazy loading to overcome this performance issue?

First you have to make sure if it's bandwidth issue. You can analyze the loading overview of your app using developer tools (e.g. Chrome Developer Tools -> Network Overview) to see which part is taking too long. Sometimes it's DNS issue with your hosting provider or other network problems or maybe a promise inside your app is making things slower.

Upvotes: 1

Related Questions