Why is dynamic component code in main.js?

[bostondevin]

I would expect the dynamic component code to be part of the chunk instead of inside the main.js file - is this intentional? I see you are importing the message component at the top of app.component.ts:

import { MessageComponent } from './dynamic-modules/message/message.component';

Doesn't this cause it to be part of the main.js file? Maybe i'm missing something

[evandrogrm]

He imports to make generic type in this line, but the component itself is not loaded. Only when you press the button, them the factory loads it

[jamOne-]

@evandrogrm
What do you mean saying that component itself is not loaded?
Do you mean that it is not loaded into the view or the bundle containing component isn't loaded yet?

I am wondering about my scenario:

• I have component with big library dependency loaded via import * ...
• I want this component (and its dependencies) to be downloaded lazily, only when needed.

If I make an import analogously to one that @bostondevin mentioned, will the component and its dependencies be included into main bundle or the lazy one?
What if I won't make that import?

[evandrogrm]

In the project approach he is importing the component to be a generic type of the component factory that's all, it's a independent test file.
In a production approach, you will have to import that component in the module, them when you call it from another componet the component itself is loaded.
In my case we are using like this:

In the module I tell the component to be loaded on @NgModule:

LazyLoaderModule.forChild([
	{
		component: FormExampleComponent,
		modalOptions: {
			size: 'lg'
		}
	}
])

Them we made a external lib to listen the key F5 on a input. To load that component mentioned on the module by path, like 'generals/add/example'. So i call a openExternal('generals/add/example') on the service and voialla it's loaded.