title: Uncaught exception in promise when when trying to use nested components
body: <p>I am getting this exception when trying to use nested components:</p>
  
  <pre><code>EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot set property 'endSourceSpan' of null
  XCEPTION: Error: Uncaught (in promise): TypeError: Cannot set property 'endSourceSpan' of nullBrowserDomAdapter.logError @ angular2.dev.js:23877BrowserDomAdapter.logGroup @ angular2.dev.js:23888ExceptionHandler.call @ angular2.dev.js:1317(anonymous function) @ angular2.dev.js:12763schedulerFn @ angular2.dev.js:13167SafeSubscriber.__tryOrUnsub @ Rx.js:10775SafeSubscriber.next @ Rx.js:10730Subscriber._next @ Rx.js:10690Subscriber.next @ Rx.js:10667Subject._finalNext @ Rx.js:11191Subject._next @ Rx.js:11183Subject.next @ Rx.js:11142EventEmitter.emit @ angular2.dev.js:13148NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ angular2.dev.js:13566NgZoneImpl.inner.inner.fork.onHandleError @ angular2.dev.js:2128ZoneDelegate.handleError @ angular2-polyfills.js:336Zone.runGuarded @ angular2-polyfills.js:244drainMicroTaskQueue @ angular2-polyfills.js:495ZoneTask.invoke @ angular2-polyfills.js:434
  angular2.dev.js:23877 STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:23877ExceptionHandler.call @ angular2.dev.js:1319(anonymous function) @ angular2.dev.js:12763schedulerFn @ angular2.dev.js:13167SafeSubscriber.__tryOrUnsub @ Rx.js:10775SafeSubscriber.next @ Rx.js:10730Subscriber._next @ Rx.js:10690Subscriber.next @ Rx.js:10667Subject._finalNext @ Rx.js:11191Subject._next @ Rx.js:11183Subject.next @ Rx.js:11142EventEmitter.emit @ angular2.dev.js:13148NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ angular2.dev.js:13566NgZoneImpl.inner.inner.fork.onHandleError @ angular2.dev.js:2128ZoneDelegate.handleError @ angular2-polyfills.js:336Zone.runGuarded @ angular2-polyfills.js:244drainMicroTaskQueue @ angular2-polyfills.js:495ZoneTask.invoke @ angular2-polyfills.js:434
  angular2.dev.js:23877 Error: Uncaught (in promise): TypeError: Cannot set property 'endSourceSpan' of null
      at resolvePromise (angular2-polyfills.js:543)
      at angular2-polyfills.js:520
      at ZoneDelegate.invoke (angular2-polyfills.js:332)
      at Object.NgZoneImpl.inner.inner.fork.onInvoke (angular2.dev.js:2111)
      at ZoneDelegate.invoke (angular2-polyfills.js:331)
      at Zone.run (angular2-polyfills.js:227)
      at angular2-polyfills.js:576
      at ZoneDelegate.invokeTask (angular2-polyfills.js:365)
      at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (angular2.dev.js:2103)
      at ZoneDelegate.invokeTask (angular2-polyfills.js:364)BrowserDomAdapter.logError @ angular2.dev.js:23877ExceptionHandler.call @ angular2.dev.js:1320(anonymous function) @ angular2.dev.js:12763schedulerFn @ angular2.dev.js:13167SafeSubscriber.__tryOrUnsub @ Rx.js:10775SafeSubscriber.next @ Rx.js:10730Subscriber._next @ Rx.js:10690Subscriber.next @ Rx.js:10667Subject._finalNext @ Rx.js:11191Subject._next @ Rx.js:11183Subject.next @ Rx.js:11142EventEmitter.emit @ angular2.dev.js:13148NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ angular2.dev.js:13566NgZoneImpl.inner.inner.fork.onHandleError @ angular2.dev.js:2128ZoneDelegate.handleError @ angular2-polyfills.js:336Zone.runGuarded @ angular2-polyfills.js:244drainMicroTaskQueue @ angular2-polyfills.js:495ZoneTask.invoke @ angular2-polyfills.js:434
  angular2-polyfills.js:469 Unhandled Promise rejection: Cannot set property 'endSourceSpan' of null ; Zone: angular ; Task: Promise.then ; Value: TypeError: Cannot set property 'endSourceSpan' of null(…)consoleError @ angular2-polyfills.js:469drainMicroTaskQueue @ angular2-polyfills.js:498ZoneTask.invoke @ angular2-polyfills.js:434
  angular2-polyfills.js:471 Error: Uncaught (in promise): TypeError: Cannot set property 'endSourceSpan' of null(…)consoleError @ angular2-polyfills.js:471drainMicroTaskQueue @ angular2-polyfills.js:498ZoneTask.invoke @ angular2-polyfills.js:434
  </code></pre>
  
  <p>This is my code for the main component:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;base-menu [menu-items-list]="menuList" [menu-layer]="layer"
      (select-menu-item)="selectMenuItem($event)"
      (add-new-item)="addMenuItem($event)"&gt;&lt;/base-menu&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>import {BaseMenuComponent} from '../../../../components/menuComponent/baseMenuComponent/baseMenuComponent';
  
  let applicationPath: string = '/app/pages/adminPage/categoriesPage/requestsPage';
  
  @Component({
      selector: 'companies-Page',
      templateUrl: applicationPath + '/requestsPage.html',
      styleUrls:[ applicationPath + '/requestsPage.css'],
      providers:[RequestTypeService, HTTP_PROVIDERS], 
      directives:[BaseMenuComponent]
  })
  export class RequestsPage implements OnInit {
      requestTypes:Array&lt;RequestType&gt; = new Array();
      searchQuery: string = "";
      menuList = [
          {id:12, layer:0, name:'asd'},
          {id:13, layer:0, name:'asda'},
          {id:14, layer:0, name:'asdd'}];
      layer = 0;
      _requestTypeService:RequestTypeService
  
      constructor(requestTypeService:RequestTypeService) {
          this._requestTypeService = requestTypeService;
      }
  
      ngOnInit(){
          //this.getRequestTypesWithFilters();
      }
  }
  </code></pre>
  
  <p>and this is the child component:</p>
  
  <pre class="lang-js prettyprint-override"><code>import {Component, Input, Output, EventEmitter, OnInit} from 'angular2/core';
  
  @Component({
      selector: 'base-menu',
      //templateUrl: '/app/components/menuComponent/baseMenuComponent/baseMenuComponent.html'
      template:`
      &lt;div class="base-menu-component"&gt;
          &lt;ul class="nav nav-pills nav-stacked"&gt;
              &lt;li class="form-group row"&gt;
                  &lt;input class="form-control" [(ngModel)]="newMenuItem"/&gt;
                  &lt;button class="btn btn-success" (click)="addMenuItem()"&gt;
                      &lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;button class="btn btn-success" (click)="clearMenuItem()"&gt;
                      &lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;
                  &lt;/button&gt;
              &lt;/li&gt;
              &lt;li *ngFor="#item of menuItems" [class]="isItemSelected(item) ? 'active':''" (click)="selectItem(item)"&gt;
                  &lt;a&gt;{{item.name}}&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;`
  })
  
  export class BaseMenuComponent implements OnInit {
      @Input('menu-items-list') menuItemsList:Array&lt;MenuItem&gt;;
      @Input('menu-layer') menuLayer:number;
      @Output('select-menu-item') broadcastMenuItem: EventEmitter&lt;MenuData&gt; = new EventEmitter&lt;MenuData&gt;();
      @Output('add-new-item') broadcastNewItem: EventEmitter&lt;MenuData&gt; = new EventEmitter&lt;MenuData&gt;();
  
      selectedItem:MenuItem;
      newMenuItem:string;
  
      constructor() { }
  
      ngOnInit(){
          this.selectedItem = this.menuItemsList &amp;&amp; this.menuItemsList.length &gt; 0 ? this.menuItemsList[0] : null;
          this.newMenuItem = "";
      }
  
      isItemSelected(menuItem){
          return this.selectedItem == menuItem;
      }
  
      selectItem(menuItem){
          this.selectedItem = menuItem;
          this.broadcastMenuItem.emit({menuItem:menuItem, menuLayer:this.menuLayer});
      }
  
      addMenuItem(){
          this.broadcastNewItem.emit({menuItem:this.newMenuItem, menuLayer:this.menuLayer});
          this.clearMenuItem();
      }
  
      clearMenuItem(){
          this.newMenuItem = "";
      }
  }
  
  interface MenuItem{
      id;
      layer;
      parentId;
      name;
  }
  
  interface MenuData{
      menuItem;
      menuLayer;
  }
  </code></pre>
  
  <p>Can someone explain me from where is this error and why it appears?<br>
  To me, the html and both components look very clear.</p>