title: Unresolved variable in WebStorm, Angular 4
body: <p>So I have an HTML-template, in which I refer to a service, defined in a constructor and WebStorm sends me this warnings about unresolved variables, although the variables to which I point are defined and linked to a service via import.</p>
  
  <p>Here is the template:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;nav class="navbar navbar-default"&gt;
      &lt;div class="navbar-header"&gt;
          &lt;a routerLink="/" class="navbar-brand"&gt;Recipe Book&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="collapse navbar-collapse"&gt;
          &lt;ul class="nav navbar-nav"&gt;
              &lt;li routerLinkActive="active"&gt;&lt;a routerLink="/recipes"&gt;Recipies&lt;/a&gt;&lt;/li&gt;
              &lt;li routerLinkActive="active"&gt;&lt;a routerLink="/shopping-list" &gt;Shopping List&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul class="nav navbar-nav navbar-right"&gt;
        &lt;ng-template **[ngIf]="!authService.isAuthenticated()**"&gt;
          &lt;li&gt;&lt;a routerLink="/signup"&gt;Register&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a routerLink="/signin"&gt;LogIn&lt;/a&gt;&lt;/li&gt;
        &lt;/ng-template&gt;
              &lt;li class="dropdown" app-dropdown&gt;
                  &lt;a style="cursor: pointer" class="dropdown-toggle" role="button" *ngIf="authService.isAuthenticated()"&gt;Manage &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a style="cursor: pointer" (click)="OnSave()"&gt;Save Data&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a style="cursor: pointer" (click)="OnGet()"&gt;Fetch Data&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Here is the TypeScript code:</p>
  
  <pre><code>import {Component} from '@angular/core';
  import { Response } from '@angular/http';
  import {RecipeDataService} from '../shared/RecipeData.service';
  import {SignupUserService} from '../auth/signupUser.service';
  
  
  @Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.css']
  })
  export class HeaderComponent {
    constructor(private RecipeDataService: RecipeDataService,
                **private authService: SignupUserService**) { }
    OnSave()
    {
      this.RecipeDataService.OnSaveRecipe()
        .subscribe(
          (response: Response) =&gt;
          {
            console.log(response);
          }
        );
    }
    OnGet()
    {
      this.RecipeDataService.OnGettingRecipe();
    }
  }
  </code></pre>
  
  <p>and the contents of the service: </p>
  
  <pre><code>import {Injectable} from '@angular/core';
  import * as firebase from 'firebase';
  
  
  @Injectable()
  
  export class SignupUserService {
    token = '';
    signUpUser(email: string, password: string) {
      firebase.auth().createUserWithEmailAndPassword(email, password)
        .catch(
          error =&gt; console.log(error)
        );
    }
    signInUser(email: string, password: string)
    {
      firebase.auth().signInWithEmailAndPassword(email, password)
        .then(
          response =&gt; {
            firebase.auth().currentUser.getIdToken()
              .then(
                (token: string) =&gt; this.token = token
              );
          }
          )
        .catch (
          error =&gt; {console.log(error); }
        );
    }
    getToken() {
      firebase.auth().currentUser.getIdToken()
        .then(
          (token: string) =&gt; this.token = token
        );
      return this.token;
    }
    isAuthenticated(): 
    {
      return this.token != null;
    }
  }
  </code></pre>