title: Angular 2 Carousel Plugin 'carousel-component' is not a known element:
body: <p>I am trying to implement the plugin from here;</p>
  
  <p><a href="https://www.npmjs.com/package/angular2-carousel" rel="nofollow noreferrer">Angular2-Carousel Plugin</a></p>
  
  <p>I am running the SPA Angular 2 template with Visual Studio 2017 Community. I have added the packages to my packages.json file and updated it to install the packages.</p>
  
  <pre><code>"angular2-carousel": "1.0.12",
  "hammerjs": "2.0.8",
  </code></pre>
  
  <p>In my app.browser.module.ts I have;</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { AppModuleShared } from './app.shared.module';
  import { AppComponent } from './components/app/app.component';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { CarouselModule } from "angular2-carousel";
  
  @NgModule({
      bootstrap: [ AppComponent ],
      imports: [
          BrowserModule,
          BrowserAnimationsModule,
          AppModuleShared,
          CarouselModule
      ],
      providers: [
          { provide: 'BASE_URL', useFactory: getBaseUrl }
      ]
  })
  export class AppModule {
  }
  </code></pre>
  
  <p>and then in the my Component.ts </p>
  
  <pre><code>import { Injectable, Inject, Component } from '@angular/core';
  import { CarouselModule } from "angular2-carousel";
  import { APP_CONFIG, AppConfig } from '../../../app.config';
  
  @Component({
      selector: 'serviceSlider',
      templateUrl: './serviceSlider.component.html',
      styleUrls: ['./serviceSlider.component.css']
  })
  export class ServiceSliderComponent {
      constructor(@Inject(APP_CONFIG) private config: AppConfig) { }
  }
  </code></pre>
  
  <p>and in the component.html I have;</p>
  
  <pre><code>&lt;carousel-component&gt;
      &lt;div class="item-carousel"&gt;a&lt;/div&gt;
      &lt;div class="item-carousel"&gt;
          &lt;div class="b"&gt;
              b
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item-carousel"&gt;c&lt;/div&gt;
      &lt;div class="item-carousel"&gt;d&lt;/div&gt;
  &lt;/carousel-component&gt;
  </code></pre>
  
  <p>however, when I run this I get the error;</p>
  
  <blockquote>
    <p>NodeInvocationException: Template parse errors: 'carousel-component'
    is not a known element:
    1. If 'carousel-component' is an Angular component, then verify that it is part of this module.
    2. If 'carousel-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component
    to suppress this message. (" </p>
  </blockquote>