How to load component into another

Question

I try to add a homeComponent into my LayoutComponent. But I can't see the content of my homeComponent into the LayoutComponent.

After user connexion I redirected to homeComponent and I was able to see the right content. Now I want to use a general layout to wrap some components with.

My layout template

<app-top-nav></app-top-nav>
<div class="wrapper">
        <app-side-nav></app-side-nav>
        <app-home></app-home>
</div>

My redirect to the layout (from my loginComponent)

 onSubmit() {
                this.submitted = true;
                // stop here if form is invalid
                if (this.loginForm.invalid) {
                        return;
                }

                this.loading = true;
                this.user.login = this.f.username.value;
                this.user.pwd = this.f.password.value;
                console.log(this.user);
                this.authenticationService.login(this.user)
                        .pipe(first())
                        .subscribe(
                                data => {
                                //      console.log (' test '+ this.returnUrl);
                                        this.router.navigate([this.returnUrl]);
                                },
                                error => {
                                        this.error = error;
                                        this.loading = false;
                                });
        }

my routing

{ path: '', component: GlobalLayoutComponent, canActivate: [AuthGuard],
    //  children:[
    //          { path:'', redirectTo: 'home'},
    //          { path:'home', component : HomeComponent}
    //          ]
    },
        { path: 'login', component: LoginComponent },

edit (add app.module)

My app.module

import { NbSecurityModule, NbRoleProvider } from '@nebular/security';
import { NbEvaIconsModule } from '@nebular/eva-icons';
import { MenuService } from './alertes/menu/menu.service';

import { JwtInterceptor } from './_helpers/jwt.interceptor';
import { ErrorInterceptor } from './_helpers/error.interceptor';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { TopNavComponent } from './layout/top-nav/top-nav.component';
import { SideNavTogglerComponent } from './layout/side-nav-toggler/side-nav-toggler.component';
import { SideNavService } from './_services/side-nav.service';
import { GlobalLayoutComponent } from './layout/global-layout/global-layout.component';
import { SideNavComponent } from './layout/side-nav/side-nav.component';

@NgModule({
  declarations: [
  AppComponent,
  HomeComponent,
  LoginComponent,
  TopNavComponent,
  SideNavTogglerComponent,
  GlobalLayoutComponent,
  SideNavComponent

  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    HttpClientModule,
    ThemeModule.forRoot(),
    NbThemeModule.forRoot(),
    NbMenuModule.forRoot(),
    NbAuthModule.forRoot(),
    NbSecurityModule.forRoot(),
    FormsModule,
    ReactiveFormsModule,
    // Validators,
    ConfirmationPopoverModule.forRoot({
      confirmButtonType: 'danger'}),
    ToastrModule.forRoot(),
    ChartsModule,
    Ng2SmartTableModule,
    NbEvaIconsModule
  ],
  providers: [
    { provide: APP_BASE_HREF, useValue: '/' },
    UserService,
    MenuService,
    SideNavService,
    { provide: NbRoleProvider,
      useValue: {
      getRole: () => {
      return observableOf(['admin','user'])},},},
      { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
      { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

I Don't know what I've missed.

This code show my globallayout without homeComponent Inside. I'm looking for the solution to correctly show homeComponent (<app-home>) Inside the GlobalLayoutComponent. Thank you for help

Answer 1

In case you want to load one component inside another, You have to add the AnotherComponent in your Parent Module in declarations

declarations: [
  AnotherComponent 
]