title: Angular2 - No provider for TemplateRef (ng2-bootstrap)
body: <p>I have been trying several solutios for this error, but didn't find any succesful way to overcome this: <strong>No provider for TemplateRef!</strong></p>
  
  <p><strong>Error log:</strong></p>
  
  <blockquote>
    <p>EXCEPTION: Uncaught (in promise): Error: Error in ./FooterComponent
    class FooterComponent - inline template:15:20 caused by: No provider
    for TemplateRef! Error: Error in ./FooterComponent class
    FooterComponent - inline template:15:20 caused by: No provider for
    TemplateRef!</p>
    
    <p>Unhandled Promise rejection: Error in ./FooterComponent class
    FooterComponent - inline template:15:20 caused by: No provider for
    TemplateRef! ; Zone: angular ; Task: Promise.then ; Value:</p>
  </blockquote>
  
  <p><strong>footer.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'sa-footer',
    templateUrl: './footer.component.html'
  })
  export class FooterComponent implements OnInit {
  
    constructor() {}
  
    ngOnInit() {}
  
  }
  </code></pre>
  
  <p><strong>footer.component.html</strong></p>
  
  <pre><code>&lt;div class="page-footer"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-12 col-sm-6"&gt;
              &lt;span class="txt-color-white"&gt;myAPP © 2016&lt;/span&gt;
          &lt;/div&gt;
  
          &lt;div class="col-xs-6 col-sm-6 text-right hidden-xs"&gt;
              &lt;div class="txt-color-white inline-block"&gt;
                  &lt;i class="txt-color-blueLight hidden-mobile"&gt;Last account activity &lt;i class="fa fa-clock-o"&gt;&lt;/i&gt;
                      &lt;strong&gt;52 mins ago &amp;nbsp;&lt;/strong&gt; &lt;/i&gt;
  
                  &lt;div class="btn-group dropup" dropdown&gt;
                      &lt;button class="btn btn-xs dropdown-toggle bg-color-blue txt-color-white" dropdownToggle&gt;
                          &lt;i class="fa fa-link"&gt;&lt;/i&gt; &lt;span class="caret"&gt;&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;ul class="dropdown-menu pull-right text-left" dropdownMenu&gt;
                          &lt;li&gt;
                              &lt;div class="padding-5"&gt;
                                  &lt;p class="txt-color-darken font-sm no-margin"&gt;Download Progress&lt;/p&gt;
  
                                  &lt;div class="progress progress-micro no-margin"&gt;
                                      &lt;div class="progress-bar progress-bar-success" style="width: 50%;"&gt;&lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                          &lt;li class="divider"&gt;&lt;/li&gt;
                          &lt;li&gt;
                              &lt;div class="padding-5"&gt;
                                  &lt;p class="txt-color-darken font-sm no-margin"&gt;Server Load&lt;/p&gt;
  
                                  &lt;div class="progress progress-micro no-margin"&gt;
                                      &lt;div class="progress-bar progress-bar-success" style="width: 20%;"&gt;&lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                          &lt;li class="divider"&gt;&lt;/li&gt;
                          &lt;li&gt;
                              &lt;div class="padding-5"&gt;
                                  &lt;p class="txt-color-darken font-sm no-margin"&gt;Memory Load &lt;span class="text-danger"&gt;*critical*&lt;/span&gt;
                                  &lt;/p&gt;
  
                                  &lt;div class="progress progress-micro no-margin"&gt;
                                      &lt;div class="progress-bar progress-bar-danger" style="width: 70%;"&gt;&lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                          &lt;li class="divider"&gt;&lt;/li&gt;
                          &lt;li&gt;
                              &lt;div class="padding-5"&gt;
                                  &lt;button class="btn btn-block btn-default"&gt;refresh&lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>I tried to do the following:</strong></p>
  
  <ol>
  <li><p><em>Research</em>: 
  But only found answers / solutions for templates that actually contain some directives like <code>ngIf</code>, <code>ngSwitch</code>, etc. (Forgetting the <code>*</code>, for example)</p></li>
  <li><p>Add <code>TemplateRef</code> to <code>providers</code>. This is what I get:</p></li>
  </ol>
  
  <blockquote>
    <p>Argument of type '{ selector: string; templateUrl: string; providers:
    typeof TemplateRef[]; }' is not assignable to parameter of type
    'Component'.   Types of property 'providers' are incompatible.
        Type 'typeof TemplateRef[]' is not assignable to type 'Provider[]'.
          Type 'typeof TemplateRef' is not assignable to type 'Provider'.
            Type 'typeof TemplateRef' is not assignable to type 'FactoryProvider'.
              Property 'provide' is missing in type 'typeof TemplateRef'.</p>
  </blockquote>
  
  <p>I will try to see how to add somehow <code>TemplateRef</code> to the app's module <code>providers</code>. But I don't know if this is the solution.
   I hope someone comes out with a solution while I continue researching.</p>
  
  <p>Thank you! :D</p>