<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request"><pre class="notranslate"><code class="notranslate">[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong></p>

<p dir="auto">ngc doesn't work. If I run ngc, I then get the response:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="C:\Users\George\Source\Repos\docs&gt;ngc
module.js:457
    throw err;
    ^

Error: Cannot find module '@angular/compiler'
    at Function.Module._resolveFilename (module.js:455:15)
    at Function.Module._load (module.js:403:25)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)
    at Object.&lt;anonymous&gt; (C:\Users\George\AppData\Roaming\nvm\v6.7.0\node_modules\@angular\compiler-cli\src\codegen.js:13:16)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)"><pre class="notranslate"><code class="notranslate">C:\Users\George\Source\Repos\docs&gt;ngc
module.js:457
    throw err;
    ^

Error: Cannot find module '@angular/compiler'
    at Function.Module._resolveFilename (module.js:455:15)
    at Function.Module._load (module.js:403:25)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)
    at Object.&lt;anonymous&gt; (C:\Users\George\AppData\Roaming\nvm\v6.7.0\node_modules\@angular\compiler-cli\src\codegen.js:13:16)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
</code></pre></div>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto">ngc to work as described in the docs.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>
<p dir="auto">I assume this is something with my system, but:</p>
<ol dir="auto">
<li><code class="notranslate">npm install @angular/compiler-cli typescript@next @angular/platform-server @angular/compiler</code></li>
<li><code class="notranslate">ngc</code> (in same dir as above)</li>
</ol>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto">Use AOT compilation<br>
<strong>Please tell us about your environment:</strong></p>

<p dir="auto">Windows 10 Pro, Command Prompt, npm</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.0.2</p>

</li>
<li>
<p dir="auto"><strong>Browser:</strong> [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]</p>

</li>
<li>
<p dir="auto"><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =   6.7.0 (x64)</p>
</li>
</ul>
<p dir="auto"><strong>Version Alpha 46, TS</strong></p>
<p dir="auto">When trying to learn the various ways of working with forms I ran into an odd issue where select elements trigger change events twice for the same change when subscribed to the valueChanges observable.</p>
<p dir="auto">If I have a function that changes the value from the model it only fires the change event once as expected.</p>
<p dir="auto">It's pretty short so heres my code:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Component({
  selector: 'my-app',
})
@View({
  template: `
        &lt;h3&gt;Simple Select on App Component&lt;/h3&gt;
        &lt;form&gt;
        &lt;select [ng-form-control]=&quot;simpleSelect&quot;&gt;
          &lt;option value=&quot;1&quot;&gt;One&lt;/option&gt;
          &lt;option value=&quot;2&quot;&gt;Two&lt;/option&gt;
          &lt;option value=&quot;3&quot;&gt;Three&lt;/option&gt;
        &lt;/select&gt;
        &lt;button type=&quot;button&quot; (click)=&quot;changeSelect()&quot;&gt;Change Select to 3 From Model&lt;/button&gt;
      &lt;/form&gt;
  `,
  directives: [FORM_DIRECTIVES]

})
export class App {
  simpleSelect: Control = new Control('');
  counter: number = 0;
  constructor() {
    //watch simple select
    this.simpleSelect.valueChanges.subscribe((value)=&gt;{
      console.log(&quot;Simple Select Val:&quot; + value + &quot; and counter:&quot;+this.counter)
      this.counter++;
    });
  };
  changeSelect() {
    this.simpleSelect.updateValue(3);
  }
}"><pre class="notranslate">@<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">'my-app'</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
@<span class="pl-v">View</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">template</span>: <span class="pl-s">`</span>
<span class="pl-s">        &lt;h3&gt;Simple Select on App Component&lt;/h3&gt;</span>
<span class="pl-s">        &lt;form&gt;</span>
<span class="pl-s">        &lt;select [ng-form-control]="simpleSelect"&gt;</span>
<span class="pl-s">          &lt;option value="1"&gt;One&lt;/option&gt;</span>
<span class="pl-s">          &lt;option value="2"&gt;Two&lt;/option&gt;</span>
<span class="pl-s">          &lt;option value="3"&gt;Three&lt;/option&gt;</span>
<span class="pl-s">        &lt;/select&gt;</span>
<span class="pl-s">        &lt;button type="button" (click)="changeSelect()"&gt;Change Select to 3 From Model&lt;/button&gt;</span>
<span class="pl-s">      &lt;/form&gt;</span>
<span class="pl-s">  `</span><span class="pl-kos">,</span>
  <span class="pl-c1">directives</span>: <span class="pl-kos">[</span><span class="pl-c1">FORM_DIRECTIVES</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-c1">simpleSelect</span>: <span class="pl-v">Control</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Control</span><span class="pl-kos">(</span><span class="pl-s">''</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-c1">counter</span>: <span class="pl-c1">number</span> <span class="pl-c1">=</span> <span class="pl-c1">0</span><span class="pl-kos">;</span>
  <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-c">//watch simple select</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">simpleSelect</span><span class="pl-kos">.</span><span class="pl-c1">valueChanges</span><span class="pl-kos">.</span><span class="pl-en">subscribe</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">value</span><span class="pl-kos">)</span><span class="pl-c1">=&gt;</span><span class="pl-kos">{</span>
      <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"Simple Select Val:"</span> <span class="pl-c1">+</span> <span class="pl-s1">value</span> <span class="pl-c1">+</span> <span class="pl-s">" and counter:"</span><span class="pl-c1">+</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">counter</span><span class="pl-kos">)</span>
      <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">counter</span><span class="pl-c1">++</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">;</span>
  <span class="pl-en">changeSelect</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">simpleSelect</span><span class="pl-kos">.</span><span class="pl-en">updateValue</span><span class="pl-kos">(</span><span class="pl-c1">3</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">And <a href="http://plnkr.co/edit/PVLJrmNHXQpUX3fQVxvc?p=preview" rel="nofollow">Here is a Plunker</a> of this in action.</p>
<p dir="auto">I thought maybe it was something with how simple I was interfacing it so I did it with the FormBuilder and got the same results. I added a text field to see how it's changes effect the form and they work correctly (only fire once)<br>
<a href="http://plnkr.co/edit/yI7ULjWIpow03OxQUS3g?p=preview" rel="nofollow">That Plunker Here</a></p>
<p dir="auto">I'm not sure if I'm doing something incorrectly, but I think the expected behavior is the event to fire only once. I'm not experienced enough to track back whats causing the double bindings so I hoped I could have someone take a look at it...</p>