title: Angular: How to import and use Carousel from ng-bootstrap?
body: <p>I'm tasked with styling an Angular 6 sandbox using ng-bootstrap. That part has been going very well. Now I'm trying to install a carousel and I'm hitting a wall.  I'm using the ng-bootstrap carousel, as i figure that's probably the best choice, but any other suggestions are welcome, such as a "pure javascript" carousel.</p>
  
  <p>Note, this is my setup:</p>
  
  <p>Angular CLI: 6.0.7
  Node: 10.3.0
  OS: darwin x64</p>
  
  <p>I located the ng install instructions:</p>
  
  <p><a href="https://ng-bootstrap.github.io/#/components/carousel/examples" rel="nofollow noreferrer">https://ng-bootstrap.github.io/#/getting-started</a> </p>
  
  <p>But it seems I need more things spelled out. The first part worked: </p>
  
  <pre><code>npm install --save @ng-bootstrap/ng-bootstrap
  </code></pre>
  
  <p>But the next part threw me off:</p>
  
  <blockquote>
    <p>The only remaining part is to list the imported module in your root
    module and any additional application modules that make use of the
    components in this library. The exact method will be slightly
    different for the root (top-level) module for which you should end up
    with the code similar to (notice NgbModule.forRoot()):</p>
  </blockquote>
  
  <p>What is the 'root module'?  I assume that would be app.module.ts.  So I added the new code to app.module.ts:</p>
  
  <pre><code>import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
  @NgModule({
    declarations: [AppComponent, ...],
    imports: [NgbModule.forRoot(), ...],
    bootstrap: [AppComponent]
  })
  export class AppModule {
  }
  </code></pre>
  
  <p>And I see there is another version of the code to add to all modules other than the root. No problem there. I checked my site, it still functions. </p>
  
  <p>Note, I also assume I need to do nothing with app.component.ts, correct? I initially thought I needed to add the import to it:</p>
  
  <pre><code>import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
  </code></pre>
  
  <p>And it did not break the site, though I don't think it was needed so I removed it. </p>
  
  <p>So, app.module.ts should be good to go.  Next, to add the actual carousel code as found on the example page:</p>
  
  <p><a href="https://ng-bootstrap.github.io/#/components/carousel/examples" rel="nofollow noreferrer">https://ng-bootstrap.github.io/#/components/carousel/examples</a></p>
  
  <p>Now, I'm at a loss as to the best way to barebones test it. Should I use the core module and/or component as my component?  Or should I generate a NEW component?  I saw a tutorial for adding a carousel to Angular 5 that simply added code to the core module/component so that's what I'm trying now. Could be a big mistake? Please let me know.</p>
  
  <p>At any rate, if I add the carousel-basic.html to appl.component.html, and carousel-basic.ts to the app.component.ts, I get errors. Specifically, </p>
  
  <pre><code>./src/app/app.module.ts
  Module not found: Error: Can't resolve './carousel-basic.html'
  </code></pre>
  
  <p>And if I change the path to ./component.html it doesn't help.</p>
  
  <p>So really at this point, I'm missing something fundamental but having a hard time asking the right questions.  </p>
  
  <p>Can anybody point me to some guidance?</p>
  
  <p>Thank you</p>