title: How to include a lazy-loaded Component selector into another Component's HTML in Angular 2+
body: <p>I am trying to achieve lazy load in angular 2. <br> I have created lazy load by following <a href="https://angular.io/guide/lazy-loading-ngmodules" rel="nofollow noreferrer">this link</a>. <br>I have two components like home1 and home2. home1 has the top news section and home2 is for listing other news. <br> At first time only home1 will be displayed. <br>After the user scrolls the page, home2 have to be loaded in home1.(like calling partial view in MVC).</p>
  
  <p>I tried by calling home2 in home1 as <code>&lt;app-home2-list&gt;&lt;/app-home2-list&gt;</code></p>
  
  <p>but getting an error.</p>
  
  <p><a href="https://i.stack.imgur.com/XBe4z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XBe4z.png" alt="Error"></a></p>
  
  <p>I don't how to call home2 html in home1 html?.Is any other way available for implementing this?</p>
  
  <p>app.module.ts:</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  
  import { AppComponent } from './app.component';
  import { MenuComponent } from './menu.component';
  import { HomeComponent } from './home/home.component';
  import { Const_Routing } from './app.routing';
  import { HttpModule } from '@angular/http';
  import { Home2ListComponent } from './home2/home2-list/home2-list.component';
  import { Home1ListComponent } from './home1/home1-list/home1-list.component';
  
  
  
  @NgModule({
    declarations: [
      AppComponent,
      MenuComponent,
      HomeComponent,
      Home1ListComponent,
      Home2ListComponent
    ],
    imports: [
      BrowserModule,
      Const_Routing,
      HttpModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>home1-list.component.ts and home2-list.component.ts(both codes are same,api call is differ):</p>
  
  <pre><code>import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
  import { ViewEncapsulation } from '@angular/compiler/src/core';
  import { DatePipe } from '@angular/common';
  import { Router } from '@angular/router';
  import '../../../assets/scripts/endlessriver.js';
  import * as $ from 'jquery';
  import { SharedService } from '../../Services/shared.service';
  import { Home1Service } from './home1.service';
  import { Home2ListComponent } from '../../home2/home2-list/home2-list.component';
  
  declare var jQuery: any;
  
  @Component({
    selector: 'app-home1-list',
    templateUrl: './home1-list.component.html',
    styleUrls: ['./home1-list.component.css','../../../assets/styles/common.css','../../../assets/styles/endlessriver.css'],
    providers: [Home1Service,SharedService]
  })
  export class Home1ListComponent implements OnInit {
  
    constructor(public Service: Home1Service,public CommonService:SharedService) { }
  
    @ViewChild('marqueeID') input: ElementRef;
  
    HomeList:any;
    HomeList1:any;
    HomeList2:any;
    HomeList3:any;
    sectionName:string;
    datetime:string;
    productId:number=2;
    getListingData(sectionName)
    {
                this.Service.getListingNews(sectionName,15).subscribe(
                    data =&gt; {
                        this.HomeList = data.map(e =&gt; {
                            return { SectionName:e.ChildName,ArticleId:e.ArticleId, HeadLine: e.HeadLine, Abstract: e.Abstract, ImageLink: e.ImageLink ,UpdatedDate:this.CommonService.getDateFormat(new Date(e.UpdatedDate),'others').toString()};
                        })
                    },
                    error =&gt; { console.log(error) });
                    this.Service.getListingNews("world",5).subscribe(
                      data =&gt; {
                          this.HomeList1 = data.map(e =&gt; {
                              return { Heading:'world',SectionName:e.ChildName,ArticleId:e.ArticleId, HeadLine: e.HeadLine, Abstract: e.Abstract, ImageLink: e.ImageLink ,UpdatedDate:this.CommonService.getDateFormat(new Date(e.UpdatedDate),'others').toString()};
                          })
                      },
                      error =&gt; { console.log(error) });
                      this.Service.getListingNews("national",5).subscribe(
                          data =&gt; {
                              this.HomeList2 = data.map(e =&gt; {
                                  return {Heading:'national', SectionName:e.ChildName,ArticleId:e.ArticleId, HeadLine: e.HeadLine, Abstract: e.Abstract, ImageLink: e.ImageLink ,UpdatedDate:this.CommonService.getDateFormat(new Date(e.UpdatedDate),'others').toString()};
                              })
                          },
                          error =&gt; { console.log(error) });
                          this.Service.getListingNews("state",5).subscribe(
                              data =&gt; {
                                  this.HomeList3 = data.map(e =&gt; {
                                      return { Heading:'state',SectionName:e.ChildName,ArticleId:e.ArticleId, HeadLine: e.HeadLine, Abstract: e.Abstract, ImageLink: e.ImageLink ,UpdatedDate:this.CommonService.getDateFormat(new Date(e.UpdatedDate),'others').toString()};
                                  })
                              },
                              error =&gt; { console.log(error) });
    }
    getHomeList(name: string) 
    {
      if(name=="0")
      {
        return this.HomeList1;
      }
      else if(name=="1")
      {
        return this.HomeList2;
      }
      else
      {
        return this.HomeList3;
      }
    }
  
    ngOnInit() {
        this.datetime=this.CommonService.getDateFormat(new Date(),'home').toString();
      this.getListingData('TopNews');
    }
  
    ngAfterViewInit() {
  
      jQuery(this.input.nativeElement).endlessRiver({
  
      });
      $( document ).ready(function() {
          $('.brkngBody').show();
      });
    }
  }
  </code></pre>
  
  <p>home1.module.ts:</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  
  import { Home1RoutingModule } from './home1-routing.module';
  import { Home1ListComponent } from './home1-list/home1-list.component';
  import { Home2ListComponent } from '../home2/home2-list/home2-list.component';
  import { Home2RoutingModule } from '../home2/home2-routing.module';
  import { Home2Module } from '../home2/home2.module';
  
  @NgModule({
    imports: [
      CommonModule,
      Home1RoutingModule,
      Home2ListComponent
    ],
    exports:[
      Home2ListComponent
    ],
    declarations: [Home1ListComponent]
  })
  export class Home1Module { }
  </code></pre>
  
  <p>home2.module.ts:</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  
  import { Home2RoutingModule } from './home2-routing.module';
  import { Home2ListComponent } from './home2-list/home2-list.component';
  
  @NgModule({
    imports: [
      CommonModule,
      Home2RoutingModule
    ],
    declarations: [Home2ListComponent]
  })
  export class Home2Module { }
  </code></pre>
  
  <p>home1-routing.module.ts:</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { Home1ListComponent } from './home1-list/home1-list.component';
  
  const routes: Routes = [ {
    path: '',
    component: Home1ListComponent
  }];
  
  @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
  })
  export class Home1RoutingModule { }
  </code></pre>
  
  <p><strong><a href="https://stackblitz.com/edit/angular-txzead?embed=1&amp;file=app/home1/home1.module.ts" rel="nofollow noreferrer">Demo</a></strong></p>