title: Invalid Character Error Angular
body: <p>I am getting <code>ERROR DOMException [InvalidCharacterError: "String contains an invalid character"
  code: 5
  nsresult: 0x80530005
  location: http://localhost:4200/vendor.bundle.js:67608]</code> when trying to compile an Angular component with a custom attribute directive. My code for the AppComponent, Directive and base template is given below:</p>
  
  <p>leftAlign.directive.ts</p>
  
  <pre><code>import {
    Directive,
    HostListener,
    HostBinding,
    Input,
    Output,
    ElementRef,
    Renderer2 // for host class binding
   } from '@angular/core';
  
  @Directive({
    selector: '[leftAlign]'
  })
  export class LeftAlignDirective {
  
    public constructor(
      private el: ElementRef,
      private renderer: Renderer2
    ) {
      this.renderer.addClass(this.el.nativeElement, 'ui leftAlign');
    }
  }
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { LeftAlignDirective } from './Directives/left-align.directive';
  
  
  @Component({
    selector: `app-root`,
    templateUrl: './app.component.html'
  })
  export class AppComponent {
    public static SemanticUiBaseDir = '../../semantic/dist/';
    public getSemanticeUiBaseDir() : string{
      return AppComponent.SemanticUiBaseDir;
    }
    public constructor() {}
  }
  </code></pre>
  
  <p>app.component.html</p>
  
  <pre><code>!--
    @ semantic-ui.min.css
  --&gt;
  &lt;link rel="stylesheet" type="text/css" href="/home/zerocool/km-live/FrontEndComponent/semantic/dist/semantic.css"&gt;
  
  &lt;!--
    @ @semantic.min.js
  --&gt;
  &lt;script src="./home/zerocool/km-live/FrontEndComponent/semantic/semantic.js"&gt;&lt;/script&gt;
  
  &lt;p leftAlign&gt;This should be aligned left!&lt;/p&gt;
  </code></pre>
  
  <p>I am interested in understanding the following:
  1. What causes such errors?
  2. What caused the error in this case?</p>
  
  <p>Thanks</p>