<p dir="auto">After upgrading Angular and CLI versions, I'm getting error only when building for production</p>
<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 =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong></p>
<ul dir="auto">
<li>when used common ng build, it builds with no problem</li>
<li>When used ng build --prod, gives an error:</li>
</ul>
<p dir="auto"><strong>Expected behavior</strong><br>
Prod build should work too</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
app.module.ts:<br>
import { BrowserModule }  from '@angular/platform-browser';<br>
import {NgModule}                   from '@angular/core';<br>
import {CommonModule}               from '@angular/common';<br>
import {HttpModule}                 from '@angular/http';</p>
<p dir="auto">import { AppComponent }         from './app.component';</p>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/NgModule/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/NgModule">@NgModule</a>({<br>
declarations: [ AppComponent],<br>
imports: [ ],<br>
providers: [{ provide: 'Window',  useValue: window }],<br>
bootstrap: [AppComponent]<br>
})<br>
export class AppModule { }</p>
<p dir="auto">some-class.ts:<br>
import {Inject , Injectable} from '@angular/core';</p>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Injectable/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Injectable">@Injectable</a>()<br>
export class ServiceBase {<br>
private _urlPrefix = "http://";<br>
private _urlPostfix = ":8080/mycode/";</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="constructor(
   @Inject('Window') window: Window
) {}

public get servcieURL() : string {
    return this._urlPrefix + window.location.hostname + this._urlPostfix;
}"><pre class="notranslate"><code class="notranslate">constructor(
   @Inject('Window') window: Window
) {}

public get servcieURL() : string {
    return this._urlPrefix + window.location.hostname + this._urlPostfix;
}
</code></pre></div>
<p dir="auto">}</p>
<ul dir="auto">
<li>now build using ng build : works</li>
<li>now build again using ng build --prod, it fails</li>
</ul>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
Node: V7.5.0<br>
NPM: 4.1.2<br>
Angular: 2.4.0<br>
Angular CLI: 1.0.0-rc.0</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.4.0</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> [Chrome XX ]</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> [TypeScript 2.0.0 ]</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =   V7.7.0</p>
</li>
</ul>
<p dir="auto">Currently Component and routable component lifecycles are defined via interfaces (e.g. <code class="notranslate">OnInit</code>).</p>
<p dir="auto">This is problematic because the interfaces have no runtime representation in JavaScript. So at runtime, we just check if the method defined in the interface (e.g. <code class="notranslate">onInit</code>) exists on the component instance and if it does we call it. If a component has a method <code class="notranslate">onInit</code> that is not meant to be a lifecycle hook, we'll still call it.</p>
<p dir="auto">These name collisions can result in surprising results, and if we add new lifecycle hooks, we can end up breaking existing components.</p>
<p dir="auto">For these reasons, I propose that we move away from interfaces and use property decorators instead.</p>
<p dir="auto">Before:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import {Component, OnInit} from 'angular2/angular2';

@Component({
  selector: 'test-foo'
})
class TestFoo implements OnInit {
  onInit() { ... }
}"><pre class="notranslate"><code class="notranslate">import {Component, OnInit} from 'angular2/angular2';

@Component({
  selector: 'test-foo'
})
class TestFoo implements OnInit {
  onInit() { ... }
}
</code></pre></div>
<p dir="auto">After:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import {Component, OnInit} from 'angular2/angular2';

@Component({
  selector: 'test-foo'
})
class TestFoo {
  @OnInit() onInit() { ... }
}"><pre class="notranslate"><code class="notranslate">import {Component, OnInit} from 'angular2/angular2';

@Component({
  selector: 'test-foo'
})
class TestFoo {
  @OnInit() onInit() { ... }
}
</code></pre></div>
<p dir="auto">Dart notes: this api can be implemented via transformers for production and via mirrors for development mode.</p>
<p dir="auto">Migration notes: I'm not sure how to deal with migration just yet because we are going to reuse the same symbol for different purpose. there might be no good way to provide a transitional path, which would argue for making this change asap.</p>
<p dir="auto">//cc: <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/mhevery/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/mhevery">@mhevery</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/vsavkin/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/vsavkin">@vsavkin</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/tbosch/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/tbosch">@tbosch</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/btford/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/btford">@btford</a></p>