title: Angular 6 - Custom component from shared module not loaded in app module's page view
body: <p>I've creating an Angular 6 app and I was focusing now on creating reausable components created in my shared module to be able to be used in several views related to my app module. I'm stacked now in creating a language selector component using ngBootstrap &amp; i18nService that will be used in several pages, one of them will be Login page. This is what I've done so far:</p>
  
  <p>My shared's module definition:</p>
  
  <pre class="lang-ts prettyprint-override"><code>import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  import { CommonModule } from '@angular/common';
  
  // Shared components
  import { LanguageSelectorComponent } from '@app/shared/language-selector/language-selector.component';
  
  import { I18nService } from '@app/shared/i18n.service';
  import { NgbModule } from '../../../node_modules/@ng-bootstrap/ng-bootstrap';
  
  @NgModule({
    imports: [
      CommonModule,
      NgbModule.forRoot(),
    ],
    declarations: [
      LoaderComponent,
      LanguageSelectorComponent
    ],
    schemas: [
      CUSTOM_ELEMENTS_SCHEMA
    ],
    exports: [
      LoaderComponent,
      LanguageSelectorComponent
    ]
  })
  export class SharedModule {
    static forRoot() {
      return {
        ngModule: SharedModule,
        providers: [I18nService]
      };
    }
  }
  </code></pre>
  
  <p>My login module definition:</p>
  
  <pre class="lang-ts prettyprint-override"><code>import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { ReactiveFormsModule } from '@angular/forms';
  import { TranslateModule } from '@ngx-translate/core';
  import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  
  import { LoginRoutingModule } from '@app/pages/login/login-routing.module';
  import { LoginComponent } from '@app/pages/login/login.component';
  import { SharedModule, LanguageSelectorComponent } from '@app/shared';
  
  @NgModule({
    imports: [
      CommonModule,
      ReactiveFormsModule,
      TranslateModule,
      NgbModule,
      LoginRoutingModule,
      SharedModule
    ],
    declarations: [
      LoginComponent
    ],
    entryComponents: [LanguageSelectorComponent],
    schemas: [
      CUSTOM_ELEMENTS_SCHEMA
    ],
  })
  export class LoginModule { }
  </code></pre>
  
  <p>My custom shared component definition (app-language-selector):</p>
  
  <pre class="lang-ts prettyprint-override"><code>import { Component, Input, OnInit } from '@angular/core';
  import { I18nService } from '@app/shared/i18n.service';
  
  @Component({
    selector: 'app-language-selector',
    templateUrl: './language-selector.component.html',
    styleUrls: ['./language-selector.component.scss']
  })
  export class LanguageSelectorComponent implements OnInit {
  
    @Input() customClass: string;
    @Input() customStyle = '';
    @Input() customPlacement = '';
  
    constructor(private i18nService: I18nService) {
    }
  
    setLanguage(language: string) {
      this.i18nService.language = language;
    }
  
    get currentLanguage(): string {
      return this.i18nService.language;
    }
  
    get languages(): string[] {
      return this.i18nService.supportedLanguages;
    }
  
    ngOnInit() {
      console.log('Language selector shared component loaded!');
    }
  
  }
  </code></pre>
  
  <p>Login's template code section in which this re-usable will be used:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="login-container bg-light"&gt;
    &lt;div class="login-box"&gt;
      &lt;h1&gt;{{'APP_NAME' | translate}}&lt;/h1&gt;
      &lt;div&gt;
        &lt;h6 class="d-inline-block"&gt;v{{version}}&lt;/h6&gt;
        &lt;app-language-selector-component [customClass] = "'d-inline-block ml-3'"&gt;
        &lt;/app-language-selector-component&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I've seen in Chrome debugger console that the component related files are loaded but the related app-language-selector component's html don't, so it only appear as:
  </p>
  
  <pre><code>&lt;app-login _nghost-c1=""&gt;&lt;div _ngcontent-c1="" class="login-container bg-light"&gt;
    &lt;div _ngcontent-c1="" class="login-box"&gt;
      &lt;h1 _ngcontent-c1=""&gt;WindNetPro&lt;/h1&gt;
      &lt;div _ngcontent-c1=""&gt;
        &lt;h6 _ngcontent-c1="" class="d-inline-block"&gt;v1.0.0-dev&lt;/h6&gt;
        &lt;app-language-selector-component _ngcontent-c1=""&gt;
        &lt;/app-language-selector-component&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>What am I missing here? Is it related to the component or related to ngBootstrap?</p>
  
  <p>Thanks a lot!</p>