title: Make simple ng2-translate translation work in HTML template
body: <p>I just added <a href="https://github.com/ocombe/ng2-translate" rel="nofollow noreferrer">ng2-translate</a> (5.0.0) to our angular (2.4.1) + typescript (2.0.3) + webpack (2.1.0-beta.25) project. I'm defining <a href="https://github.com/ocombe/ng2-translate#3-define-the-translations" rel="nofollow noreferrer">translations manually</a> through <code>setTranslation</code> and some dictionaries in memory, early on at construction time.</p>
  
  <p>When I use <code>TranslateService</code> within Component code, everything works fine. Now I'm not able to find the right syntax for neither the directive nor the pipe within HTML template.</p>
  
  <p>One set of translation has, for example:</p>
  
  <pre class="lang-ts prettyprint-override"><code>en = {
    ...
    loginTitle: 'Please log in',
    ...
  }
  </code></pre>
  
  <h3>1) Pipe</h3>
  
  <p>When template has:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;h3 class="panel-title"&gt;{{ 'loginTitle' | translate }}&lt;/h3&gt;
  </code></pre>
  
  <p>application breaks at runtime, at a very early stage, on <code>platformBrowserDynamic().bootstrapModule(AppModule)</code> with </p>
  
  <blockquote>
    <p>Error while bootstrapping application. SyntaxError</p>
  </blockquote>
  
  <h3>2) Directive + Content</h3>
  
  <p>When template has:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;h3 class="panel-title" translate&gt;loginTitle&lt;/h3&gt;
  </code></pre>
  
  <p>application does not break, but page just shows untranslated key, <code>loginTitle</code>.</p>
  
  <h3>3) Directive</h3>
  
  <p>When template has:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;h3 class="panel-title" [translate]="'loginTitle'"&gt;&lt;/h3&gt;
  </code></pre>
  
  <p>application does not break, but page does not show any text where that should be, the DOM node wraps no text.</p>
  
  <p>As recommended in docs, I've imported <code>TranslateModule</code> both at app-module level (with <code>forRoot</code>) as well as in a shared module, which in turn gets imported by other area modules.</p>
  
  <p>I also tried other variations, with nested translations, without single quotes, and so on, with no luck. What am I doing wrong?</p>
  
  <p><strong>EDIT</strong> In scenario #1 I was able to log more info on initial error:</p>
  
  <blockquote>
    <p>Error: Template parse errors: The pipe 'translate' could not be found</p>
  </blockquote>
  
  <p>but that should be part of ng2-translate already</p>