<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><br>
I am loading some application configurations from a json file just before the application loads using APP_INITIALIZER shown below:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@Injectable()
export class ConfigService {
  private _config: any;
  constructor(private http: Http) {
  }

  load(): Promise&lt;any&gt; {
    let promise: Promise&lt;any&gt; = new Promise((resolve: any) =&gt; {
      this.http.get('app/config/appConfig.json').map(res =&gt; res.json())
        .subscribe(config =&gt; { 
          this._config = config;
          resolve(true);
        });
    });
    return promise;
  }

  get(key: any) {
    return this._config[key];
  }
}


export function initConfiguration(configService: ConfigService): Function {
  return () =&gt; configService.load();
}

@NgModule({
  imports: [
    //Some imports here.
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initConfiguration,
      deps: [ConfigService],
      multi: true
    }
  ]
})
export class AppModule { }"><pre class="notranslate"><code class="notranslate">@Injectable()
export class ConfigService {
  private _config: any;
  constructor(private http: Http) {
  }

  load(): Promise&lt;any&gt; {
    let promise: Promise&lt;any&gt; = new Promise((resolve: any) =&gt; {
      this.http.get('app/config/appConfig.json').map(res =&gt; res.json())
        .subscribe(config =&gt; { 
          this._config = config;
          resolve(true);
        });
    });
    return promise;
  }

  get(key: any) {
    return this._config[key];
  }
}


export function initConfiguration(configService: ConfigService): Function {
  return () =&gt; configService.load();
}

@NgModule({
  imports: [
    //Some imports here.
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initConfiguration,
      deps: [ConfigService],
      multi: true
    }
  ]
})
export class AppModule { }
</code></pre></div>
<p dir="auto">There are few services which use the loaded configurations by calling the <code class="notranslate">get</code> method defined in <code class="notranslate">ConfigService</code>. It was all working fine but after upgrading to 2.4.8, I can see that the <code class="notranslate">get</code> function is invoked before the configurations are loaded which produces an error.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
<code class="notranslate">ConfigService.load</code> should run in blocking mode like it used to work until 2.4.7</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
OS: Windows 10 Pro<br>
IDE: Visual Studio Code</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.8</li>
<li><strong>Browser:</strong> [all]</li>
<li><strong>Language:</strong> [TypeScript 2.1 | ES6]</li>
</ul>
<p dir="auto">It would be nice if we could tell angular not to destroy components when we navigate out of them, even if the next component is of a different type. This could be useful, for example, when building a window management system, where users can navigate through different windows (components) without<br>
the need for recovering the whole state.</p>
<p dir="auto">The existing canReuse hook is not useful for this use case, since it only allows us to reuse components if the previous and the next component have the same type.</p>
<p dir="auto">Code example:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Component({...})
class ExampleComponent {
    canDestroy() { // or some other name
      return this.closeButtonClicked;
    }
}"><pre class="notranslate">@<span class="pl-v">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>...<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">class</span> <span class="pl-v">ExampleComponent</span> <span class="pl-kos">{</span>
    <span class="pl-en">canDestroy</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-c">// or some other name</span>
      <span class="pl-k">return</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">closeButtonClicked</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>