Lazy loading a component that uses other components

[soares-fernando]

Hello guys, how is it going?

I'd like to know this: I'm lazy loading a component, but it uses other components, meaning it has other selectors on its .html file. Assuming I have something like this in my MessageComponent:

<h1>Lazy-Loading Components Without Routing</h1>

<p>Check out the "Network" tab in F12 DevTools.</p>

<p>Then, click "Load!".</p>

<h2>Dynamically-loaded content!</h2>

<app-test></app-test>

If I don't declare TestComponent in MessageModule I can't use <app-test> tag. MessageModule:

import { TestComponent } from './../../test/test.component';
import { NgModule } from '@angular/core';

import { DynamicComponentLoaderModule } from '../../dynamic-component-loader/dynamic-component-loader.module';
import { MessageComponent } from './message.component';

@NgModule({
  declarations: [MessageComponent, TestComponent],
  imports: [DynamicComponentLoaderModule.forChild(MessageComponent)]
})
export class MessageModule {}

Is this the way to do it?

Thanks in advance for the support.