<p dir="auto">I made a simple app to test compatibility with IE and it seems that adding router (<code class="notranslate">RouteConfig</code> and <code class="notranslate">&lt;router-outlet&gt;</code>) gives following error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="TypeError: Unable to get value of the property 'contains': object is null or undefined"><pre class="notranslate"><code class="notranslate">TypeError: Unable to get value of the property 'contains': object is null or undefined
</code></pre></div>
<p dir="auto">I can't really say which line exactly produces the error (debugging on IE is really painful, especially on VM - any tips regarding that are welcome).</p>
<p dir="auto">Main component looks like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import {Component} from 'angular2/angular2';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';

import {TestComponent} from './components/test';

@Component({
  selector: 'app',
  template: '&lt;router-outlet&gt;&lt;/router-outlet&gt;',
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  { path: '/', component: TestComponent }
])
export class App {}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-v">Component</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'angular2/angular2'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-v">RouteConfig</span><span class="pl-kos">,</span> <span class="pl-c1">ROUTER_DIRECTIVES</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'angular2/router'</span><span class="pl-kos">;</span>

<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-v">TestComponent</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./components/test'</span><span class="pl-kos">;</span>

@<span class="pl-v">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">selector</span>: <span class="pl-s">'app'</span><span class="pl-kos">,</span>
  <span class="pl-c1">template</span>: <span class="pl-s">'&lt;router-outlet&gt;&lt;/router-outlet&gt;'</span><span class="pl-kos">,</span>
  <span class="pl-c1">directives</span>: <span class="pl-kos">[</span><span class="pl-c1">ROUTER_DIRECTIVES</span><span class="pl-kos">]</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
@<span class="pl-v">RouteConfig</span><span class="pl-kos">(</span><span class="pl-kos">[</span>
  <span class="pl-kos">{</span> <span class="pl-c1">path</span>: <span class="pl-s">'/'</span><span class="pl-kos">,</span> <span class="pl-c1">component</span>: <span class="pl-v">TestComponent</span> <span class="pl-kos">}</span>
<span class="pl-kos">]</span><span class="pl-kos">)</span>
<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-v">App</span> <span class="pl-kos">{</span><span class="pl-kos">}</span></pre></div>
<p dir="auto"><code class="notranslate">TestComponent</code> is:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import {Component} from 'angular2/angular2';

@Component({
  selector: 'test',
  template: 'Hello from component: {{ test }}'
})
export class TestComponent {
  public test: string = 'test';
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-v">Component</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'angular2/angular2'</span><span class="pl-kos">;</span>

@<span class="pl-v">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">selector</span>: <span class="pl-s">'test'</span><span class="pl-kos">,</span>
  <span class="pl-c1">template</span>: <span class="pl-s">'Hello from component: {{ test }}'</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-v">TestComponent</span> <span class="pl-kos">{</span>
  <span class="pl-c1">public</span> <span class="pl-s1">test</span>: <span class="pl-c1">string</span> <span class="pl-c1">=</span> <span class="pl-s">'test'</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Hi,</p>
<p dir="auto">I'm having some issues with Angular 2, pushState &amp; IE9 as I've documented initially in <a href="https://groups.google.com/forum/#!topic/angular/TdCt6KyhwI8" rel="nofollow">https://groups.google.com/forum/#!topic/angular/TdCt6KyhwI8</a> before carrying out much more investigation!</p>
<p dir="auto">I've read <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="121474169" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/5792" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/5792/hovercard" href="https://github.com/angular/angular/issues/5792">#5792</a> and attempted to apply the history.js script with mixed results!</p>
<p dir="auto">I have had to modify angular2.dev.js locally to return window.History instead of window.history (not a long term solution really!)</p>
<p dir="auto">In Everything but IE9 things work as expected using path location mode - in IE9 history.js takes over and injects urls to look like <a href="http://my.app.com/#./dashboard" rel="nofollow">http://my.app.com/#./dashboard</a></p>
<p dir="auto">But those hashtag paths are then not recognised by the angular router..!!</p>
<p dir="auto">So I turn on the hash location strategy and that works fine in chrome etc but in IE history.js kicks in and alerts the following..</p>
<blockquote>
<blockquote>
<p dir="auto">History.js does not support states with fragment-identifiers (hashes/anchors).</p>
</blockquote>
</blockquote>
<p dir="auto">The root issue is found in the following code in the router..</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    PlatformLocation.prototype.pushState = function(state, title, url) {
        console.log('pushState line 2022');
      this._history.pushState(state, title, url);
      console.log('after push line 2026');
    };"><pre class="notranslate"><code class="notranslate">    PlatformLocation.prototype.pushState = function(state, title, url) {
        console.log('pushState line 2022');
      this._history.pushState(state, title, url);
      console.log('after push line 2026');
    };
</code></pre></div>
<p dir="auto">If I comment out the pushState line then everything works.. but of course the url is not updated in the browser window :(</p>
<p dir="auto">It feels a bit like a catch-22 situation!!</p>
<p dir="auto">a) Is this a bug??<br>
b) Does the Angular team have a compatible IE9 routing solution?</p>
<p dir="auto">Help!!!</p>