Lazy-Loaded and angular charging shapes

Question

Hello good afternoon everyone...

I’ve been an angular developer for a while, and I’ve come across two ways to make the famous Lazy-Loaded, which are:

{ path: 'rota', loadChildren: '../module/function.module#FunctionModule'}

and

{ path: 'rota', loadChildren: () => import('../module/function.module').then(m => m.FunctionModule)}

I searched on the internet the difference between the two but never found anything related!

I wonder if there really is a difference between those two calls, or are they just different ways of doing the same thing??

Anyway thank you in advance...

Answer 1

Basically the first form is the old one that we used until the Angular 7 and the second is the new form introduced in Angular 8. The second one turns out to be more reliable, because your IDE can help you more in importing, is the standard of EC2020 and simpler to understand by those who are not connected with the framework.

It is interesting to note the motivation of such forms, at the time that even Angular 7 was developed few browsers supported the import, for this reason they chose the way in the first way. Here they explain more detailed.

{ path: 'rota', loadChildren: '../module/function.module#FunctionModule'}

But as today it is already supported by several browsers they have decided to adopt, thus following the pattern of ES2020

{ path: 'rota', loadChildren: () => import('../module/function.module').then(m => m.FunctionModule)}

Today the two forms still work, but the one made with string is deprecated, probably in the next versions should be discontinued.

Answer 2

The first form

{ path: 'rota', loadChildren: '../module/function.module#FunctionModule'}

It is the oldest form of how it was done when Angular2 came out, however because it is a path within a string, it is more succeeding the error. However for reasons of legacy keeps working.

This shape here is newer:

{ path: 'rota', loadChildren: () => import('../module/function.module').then(m => m.FunctionModule)}

She makes sure you’re caring right. For example you can press Ctrl plus Functionmodule and it will take you to the module to see if it is really the module you want. Thus it becomes more explicit the Imports.