Angular2 Lazy Loading syntax

Question

I am implementing lazy loading technique in an Angular6 project, but I am confused as for the syntax to fetch the "lazy" module.

Inside the app.module (main module), when declaring the Routes, I would like to ask if the following:

{ path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule' }

is equivalent to the following:

import { LazyModule } from './lazy/lazy.module';

{ path: 'lazy', loadChildren: () => LazyModule }

Through my eyes, the second approach actually makes useless the lazy loading since the LazyModule has to already been imported in order to call it. In the first approach, I successfully call the LazyModule without having to import it.

Any help is welcome.

Guerric P · Accepted Answer · 2018-08-06 17:24:18Z

3

You're right, the second solution is actually not lazy loading. As you stated, the purpose of lazy loading is not to import the module (like on your first example), otherwise it is included in the initial chunk, thus eagerly loaded.

So the answer to your question is: no, the two syntaxes are not equivalent.

edited Aug 6, 2018 at 17:24

answered Aug 6, 2018 at 17:16

Guerric P

32k6 gold badges61 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

George George Over a year ago

although, I wish there was a way to avoid magic strings but anyway!

Guerric P Over a year ago

@GeorgeGeorge I know that feel

Collectives™ on Stack Overflow

Angular2 Lazy Loading syntax

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related