title: Angular Karma Jasmine test "Can't bind to 'ngIf' since it isn't a known property"
body: <p>My Karma Jasmine tests of an Angular <code>@Component</code> complain that</p>
  <blockquote>
  <p>ERROR: 'Can't bind to 'ngIf' since it isn't a known property of 'p'.'</p>
  </blockquote>
  <p>When there is <a href="https://stackoverflow.com/questions/40331549/cant-bind-to-ngforof-since-it-isnt-a-known-property-of-tr-final-release">that kind of error for the application itself</a>, the <a href="https://stackoverflow.com/a/40331563/545127">fix</a> is to ensure you add <code>BrowserModule</code> to the <code>imports: []</code> in the <code>@NgModule()</code> of your application module (<code>app.module.ts</code>). I indeed have that import
  (so this question is not a duplicate of that <a href="https://stackoverflow.com/questions/40331549/cant-bind-to-ngforof-since-it-isnt-a-known-property-of-tr-final-release">canonical question about &quot;Can't bind to 'ngXXX' since it isn't a known property of 'YYY'</a>).</p>
  <p>This is my test set-up code:</p>
  <pre><code>    let component: MyComponent;
      let fixture: ComponentFixture&lt;MyComponent&gt;;
  
      beforeEach(async () =&gt; {
          TestBed.configureTestingModule({
              imports: [
                  BrowserModule
              ],
              providers: [
                  MyComponent,
                  { provide: MyService, useClass: MockMyService }
              ]
          }).compileComponents();
          TestBed.inject(MyService);
          component = TestBed.inject(MyComponent);
          fixture = TestBed.createComponent(MyComponent);
          fixture.detectChanges();
      });
  </code></pre>
  <p>My HTML template says <code>*ngIf</code>, not <code>ngIf</code> or a typo for that, which is another <a href="https://stackoverflow.com/a/47945655/545127">common cause of that error message</a>:</p>
  <pre><code>&lt;div class=&quot;self&quot;&gt;
      &lt;p *ngIf=&quot;isLoggedIn() else selfLogin&quot;&gt;Logged in as
          {{getUsername()}}&lt;/p&gt;
      &lt;ng-template #selfLogin&gt;
      &lt;button id=&quot;login&quot; (click)=&quot;login()&quot;&gt;login&lt;/button&gt;
      &lt;/ng-template&gt;
  &lt;/div&gt;
  </code></pre>
  <hr />
  <p>Putting the test module configuration and object injection in separate <code>beforeEach</code> calls (as suggested for a <a href="https://stackoverflow.com/a/46919789/545127">different Angular testing problem</a>) did not help.</p>