<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="[ ] bug report =&gt; search github for a similar issue or PR before submitting
[x] 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">[ ] bug report =&gt; search github for a similar issue or PR before submitting
[x] 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>
When creating a new Observable inside a <code class="notranslate">@Component</code> it won't be automatically disposed once the component is being destroyed (unless it is hooked to an <code class="notranslate">async</code> pipe).</p>
<p dir="auto"><strong>Expected behavior</strong><br>
I would expect the Observable to be automatically destroyed unless specified not to.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
Here's a brief implementation of a lazy load mechanism in a chat application:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  lazyLoadMessages() {
    this.autoScroller = this.autoScroll();
    this.subscribeMessages();

    // Get total messages count in database so we can have an indication of when to
    // stop the auto-subscriber
    this.countMessages().then((messagesCount) =&gt; {
      Observable
        // Chain every scroll event
        .fromEvent(this.scroller, 'scroll')
        // Remove the scroll listener once all messages have been fetched
        .takeUntil(this.autoRemoveScrollListener(messagesCount))
        // Filter event handling unless we're at the top of the page
        .filter(() =&gt; !this.scroller.scrollTop)
        // Prohibit parallel subscriptions
        .filter(() =&gt; !this.loadingMessages)
        // Invoke the messages subscription once all the requirements have been met
        .forEach(() =&gt; this.subscribeMessages());
    });
  }"><pre class="notranslate">  <span class="pl-en">lazyLoadMessages</span><span class="pl-kos">(</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">autoScroller</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">autoScroll</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-en">subscribeMessages</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-c">// Get total messages count in database so we can have an indication of when to</span>
    <span class="pl-c">// stop the auto-subscriber</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">countMessages</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">messagesCount</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
      <span class="pl-smi">Observable</span>
        <span class="pl-c">// Chain every scroll event</span>
        <span class="pl-kos">.</span><span class="pl-en">fromEvent</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">scroller</span><span class="pl-kos">,</span> <span class="pl-s">'scroll'</span><span class="pl-kos">)</span>
        <span class="pl-c">// Remove the scroll listener once all messages have been fetched</span>
        <span class="pl-kos">.</span><span class="pl-en">takeUntil</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">autoRemoveScrollListener</span><span class="pl-kos">(</span><span class="pl-s1">messagesCount</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
        <span class="pl-c">// Filter event handling unless we're at the top of the page</span>
        <span class="pl-kos">.</span><span class="pl-en">filter</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">!</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">scroller</span><span class="pl-kos">.</span><span class="pl-c1">scrollTop</span><span class="pl-kos">)</span>
        <span class="pl-c">// Prohibit parallel subscriptions</span>
        <span class="pl-kos">.</span><span class="pl-en">filter</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">!</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">loadingMessages</span><span class="pl-kos">)</span>
        <span class="pl-c">// Invoke the messages subscription once all the requirements have been met</span>
        <span class="pl-kos">.</span><span class="pl-en">forEach</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">subscribeMessages</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-kos">;</span>
  <span class="pl-kos">}</span></pre></div>
<p dir="auto">The code snippet above loads more messages whenever scrolling to the top of the page in the <code class="notranslate">messages</code> page. If I don't stop this Observable manually in the <code class="notranslate">onDestroy</code> callback, there might be a potential memory leak and unnecessary requests made in the background. The full component can be found <a href="https://github.com/Urigo/Ionic2CLI-Meteor-WhatsApp/blob/master/src/pages/messages/messages.ts">here</a>.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Lots of developers might forget to handle their observations which may lead to a total disaster with unnecessary requests and processes running in the background. Observables should be disposed by default unless specified else wise. It's hard for me to think of a scenario where the developer wants the Observable to keep running in the background despite the fact that the component has been already disposed long ago, it will only cause slow downs and issues.</p>
<p dir="auto">It would be a good idea to create a dedicated service called <code class="notranslate">NgObservable</code> where it can be injected to the component and be used to create new Observable instances which are bound to the component. After a brief thinking of how the service should look like led me to the following result, which might inspire you and give you an idea what I'm actually talking about:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { Observable } from &quot;rxjs&quot;;

/* Declarations */

// Save duplicate importations
export interface NgObservable&lt;T&gt; extends Observable&lt;T&gt; {
  _keep: boolean;
};

// Will define a dynamic interface based on the current version of &quot;rxjs&quot; installed
export interface NgObservableService extends Rx.ObservableStatic {
  readonly keep: NgObservableService;
};

/* Implementations */

// Creates new Observable instances through its prototypical methods.
// The constructor only holds options which should be applied to these instances
export class NgObservableService {
  private _keep: boolean;

  constructor({ keep }: { keep?: boolean } = {}) {
    this._keep = !!keep;
  }
}

// Solves &quot;Index signature is missing in type&quot; error:
// https://github.com/Microsoft/TypeScript/issues/1887
const IterableObserver = Observable as { [key: string]: any };

// Delegating all kind of Observable factory functions like 'of', 'from' etc.
// The advantages of automatically generated prototype are that we're always gonna
// be correlated with the currently installed Observable API
Object.keys(Observable).forEach((key) =&gt; {
  const value = IterableObserver[key];

  // Delegate function
  if (typeof value == &quot;function&quot;) {
    const methodHandler = function () {
      const observable = value.apply(Observable, arguments);

      if (observable instanceof Observable) {
        const ngObservable = observable as NgObservable&lt;any&gt;;
        ngObservable._keep = this._keep;
      }

      return observable;
    };

    Object.defineProperty(NgObservableService.prototype, key, {
      configurable: true,
      enumerable: true,
      writable: true,
      value: methodHandler
    });
  }
  // Delegate value
  else {
    Object.defineProperty(NgObservableService.prototype, key, {
      configurable: true,
      enumerable: true,
      get() {
        return IterableObserver[key];
      },
      set(value) {
        return IterableObserver[key] = value;
      }
    });
  }
});

// The &quot;keep&quot; getter will make sure that created observables won't be disposed
// automatically once their belonging components are being destroyed,
// e.g. this.observable.keep.of([1, 2, 3]);
Object.defineProperty(NgObservableService.prototype, &quot;keep&quot;, {
  configurable: true,
  enumerable: true,
  get() {
    return new NgObservableService({ keep: true });
  }
});"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">Observable</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"rxjs"</span><span class="pl-kos">;</span>

<span class="pl-c">/* Declarations */</span>

<span class="pl-c">// Save duplicate importations</span>
<span class="pl-k">export</span> <span class="pl-k">interface</span> <span class="pl-smi">NgObservable</span><span class="pl-c1">&lt;</span><span class="pl-smi">T</span><span class="pl-c1">&gt;</span> <span class="pl-k">extends</span> <span class="pl-smi">Observable</span><span class="pl-kos">&lt;</span><span class="pl-smi">T</span><span class="pl-kos">&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-c1">_keep</span>: <span class="pl-smi">boolean</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-c">// Will define a dynamic interface based on the current version of "rxjs" installed</span>
<span class="pl-k">export</span> <span class="pl-k">interface</span> <span class="pl-smi">NgObservableService</span> <span class="pl-k">extends</span> <span class="pl-smi">Rx</span><span class="pl-kos">.</span><span class="pl-smi">ObservableStatic</span> <span class="pl-kos">{</span>
  <span class="pl-k">readonly</span> <span class="pl-c1">keep</span>: <span class="pl-smi">NgObservableService</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-c">/* Implementations */</span>

<span class="pl-c">// Creates new Observable instances through its prototypical methods.</span>
<span class="pl-c">// The constructor only holds options which should be applied to these instances</span>
<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">NgObservableService</span> <span class="pl-kos">{</span>
  <span class="pl-k">private</span> <span class="pl-c1">_keep</span>: <span class="pl-smi">boolean</span><span class="pl-kos">;</span>

  <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-kos">{</span> keep <span class="pl-kos">}</span>: <span class="pl-kos">{</span> <span class="pl-c1">keep</span>?: <span class="pl-smi">boolean</span> <span class="pl-kos">}</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-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">_keep</span> <span class="pl-c1">=</span> <span class="pl-c1">!</span><span class="pl-c1">!</span><span class="pl-s1">keep</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-c">// Solves "Index signature is missing in type" error:</span>
<span class="pl-c">// https://github.com/Microsoft/TypeScript/issues/1887</span>
<span class="pl-k">const</span> <span class="pl-smi">IterableObserver</span> <span class="pl-c1">=</span> <span class="pl-smi">Observable</span> <span class="pl-k">as</span> <span class="pl-kos">{</span> <span class="pl-kos">[</span><span class="pl-s1">key</span>: <span class="pl-smi">string</span><span class="pl-kos">]</span>: <span class="pl-smi">any</span> <span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-c">// Delegating all kind of Observable factory functions like 'of', 'from' etc.</span>
<span class="pl-c">// The advantages of automatically generated prototype are that we're always gonna</span>
<span class="pl-c">// be correlated with the currently installed Observable API</span>
<span class="pl-smi">Object</span><span class="pl-kos">.</span><span class="pl-en">keys</span><span class="pl-kos">(</span><span class="pl-smi">Observable</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">forEach</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">key</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-s1">value</span> <span class="pl-c1">=</span> <span class="pl-smi">IterableObserver</span><span class="pl-kos">[</span><span class="pl-s1">key</span><span class="pl-kos">]</span><span class="pl-kos">;</span>

  <span class="pl-c">// Delegate function</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-k">typeof</span> <span class="pl-s1">value</span> <span class="pl-c1">==</span> <span class="pl-s">"function"</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-en">methodHandler</span> <span class="pl-c1">=</span> <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">const</span> <span class="pl-s1">observable</span> <span class="pl-c1">=</span> <span class="pl-s1">value</span><span class="pl-kos">.</span><span class="pl-en">apply</span><span class="pl-kos">(</span><span class="pl-smi">Observable</span><span class="pl-kos">,</span> <span class="pl-smi">arguments</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

      <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">observable</span> <span class="pl-k">instanceof</span> <span class="pl-smi">Observable</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">const</span> <span class="pl-s1">ngObservable</span> <span class="pl-c1">=</span> <span class="pl-s1">observable</span> <span class="pl-k">as</span> <span class="pl-smi">NgObservable</span><span class="pl-kos">&lt;</span><span class="pl-smi">any</span><span class="pl-kos">&gt;</span><span class="pl-kos">;</span>
        <span class="pl-s1">ngObservable</span><span class="pl-kos">.</span><span class="pl-c1">_keep</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">_keep</span><span class="pl-kos">;</span>
      <span class="pl-kos">}</span>

      <span class="pl-k">return</span> <span class="pl-s1">observable</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span><span class="pl-kos">;</span>

    <span class="pl-smi">Object</span><span class="pl-kos">.</span><span class="pl-en">defineProperty</span><span class="pl-kos">(</span><span class="pl-smi">NgObservableService</span><span class="pl-kos">.</span><span class="pl-c1">prototype</span><span class="pl-kos">,</span> <span class="pl-s1">key</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
      <span class="pl-c1">configurable</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
      <span class="pl-c1">enumerable</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
      <span class="pl-c1">writable</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
      <span class="pl-c1">value</span>: <span class="pl-s1">methodHandler</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
  <span class="pl-c">// Delegate value</span>
  <span class="pl-k">else</span> <span class="pl-kos">{</span>
    <span class="pl-smi">Object</span><span class="pl-kos">.</span><span class="pl-en">defineProperty</span><span class="pl-kos">(</span><span class="pl-smi">NgObservableService</span><span class="pl-kos">.</span><span class="pl-c1">prototype</span><span class="pl-kos">,</span> <span class="pl-s1">key</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
      <span class="pl-c1">configurable</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
      <span class="pl-c1">enumerable</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
      <span class="pl-en">get</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">return</span> <span class="pl-smi">IterableObserver</span><span class="pl-kos">[</span><span class="pl-s1">key</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">set</span><span class="pl-kos">(</span><span class="pl-s1">value</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">return</span> <span class="pl-smi">IterableObserver</span><span class="pl-kos">[</span><span class="pl-s1">key</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-s1">value</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-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">// The "keep" getter will make sure that created observables won't be disposed</span>
<span class="pl-c">// automatically once their belonging components are being destroyed,</span>
<span class="pl-c">// e.g. this.observable.keep.of([1, 2, 3]);</span>
<span class="pl-smi">Object</span><span class="pl-kos">.</span><span class="pl-en">defineProperty</span><span class="pl-kos">(</span><span class="pl-smi">NgObservableService</span><span class="pl-kos">.</span><span class="pl-c1">prototype</span><span class="pl-kos">,</span> <span class="pl-s">"keep"</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
  <span class="pl-c1">configurable</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
  <span class="pl-c1">enumerable</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
  <span class="pl-en">get</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-k">new</span> <span class="pl-smi">NgObservableService</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">keep</span>: <span class="pl-c1">true</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-kos">;</span></pre></div>
<p dir="auto">The biggest advantage of the code snippet above is that it's generic and it will work with whatever <code class="notranslate">rxjs</code> version currently installed in your project, you don't even need to be worried about maintaining this module.  Unfortunately this is not something that can be provided as a third-party service since the auto-disposal mechanism should be hard-coded in the <code class="notranslate">angular</code> library, since a service has not direct effect on a component. The implementation above is only a partial implementation of a bigger picture. I believe there should also be few additions made in the <a href="https://github.com/angular/angular/blob/master/modules/@angular/core/src/application_ref.ts">application_ref.ts</a> file where <code class="notranslate">onDestroy</code> callbacks are being registered.</p>
<p dir="auto">Moreover I would like to know why my feature request is not a good idea and what reason do you have to decline it, if at all. Let's discuss about it first and I would like to know your thoughts of such a feature.</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
[ ] 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
[ ] 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 created a new Component and set style using <code class="notranslate">styleUrl</code> property. This works with no problems, but i can't debug it in my browser.</p>
<p dir="auto"><strong>Expected/desired behavior</strong><br>
Since Angular2 injects the code within <code class="notranslate">&lt;style&gt;</code> tag it prevents styles code to be paired with CSS source files. I would like to get sourcemaps for CSS files.</p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
Here is an example of Component:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import {Component} from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'home',
    templateUrl: 'home.component.html',
    styleUrls: ['home.component.css']
})

export class HomeComponent {
}"><pre class="notranslate"><code class="notranslate">import {Component} from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'home',
    templateUrl: 'home.component.html',
    styleUrls: ['home.component.css']
})

export class HomeComponent {
}
</code></pre></div>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
I expect to see sourcemaps for style files in Chrome inspector, but this doesn't happen.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
I would see CSS files mapped in sourcemaps to easily debug style in my projects.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.4</li>
<li><strong>Browser:</strong> Chromium 50.0.2661.102 Built on Ubuntu 14.04, running on LinuxMint 17.2 (64-bit)</li>
<li><strong>Language:</strong> TypeScript 1.8.10</li>
</ul>