Uncaught exception in promise when when trying to use nested components

Question

I am getting this exception when trying to use nested components:

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 

This is my code for the main component:

<base-menu [menu-items-list]="menuList" [menu-layer]="layer"     (select-menu-item)="selectMenuItem($event)"     (add-new-item)="addMenuItem($event)"></base-menu> 

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<RequestType> = 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();     } } 

and this is the child component:

import {Component, Input, Output, EventEmitter, OnInit} from 'angular2/core';  @Component({     selector: 'base-menu',     //templateUrl: '/app/components/menuComponent/baseMenuComponent/baseMenuComponent.html'     template:`     <div class="base-menu-component">         <ul class="nav nav-pills nav-stacked">             <li class="form-group row">                 <input class="form-control" [(ngModel)]="newMenuItem"/>                 <button class="btn btn-success" (click)="addMenuItem()">                     <span class="glyphicon glyphicon-plus"></span>                 </button>                 <button class="btn btn-success" (click)="clearMenuItem()">                     <span class="glyphicon glyphicon-remove"></span>                 </button>             </li>             <li *ngFor="#item of menuItems" [class]="isItemSelected(item) ? 'active':''" (click)="selectItem(item)">                 <a>{{item.name}}</a>             </li>         </ul>     </div>` })  export class BaseMenuComponent implements OnInit {     @Input('menu-items-list') menuItemsList:Array<MenuItem>;     @Input('menu-layer') menuLayer:number;     @Output('select-menu-item') broadcastMenuItem: EventEmitter<MenuData> = new EventEmitter<MenuData>();     @Output('add-new-item') broadcastNewItem: EventEmitter<MenuData> = new EventEmitter<MenuData>();      selectedItem:MenuItem;     newMenuItem:string;      constructor() { }      ngOnInit(){         this.selectedItem = this.menuItemsList && this.menuItemsList.length > 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; } 

Can someone explain me from where is this error and why it appears?
To me, the html and both components look very clear.

Answer 1

I did have a similar issue with a different cause :

I built a small app using angular-cli and when the html of the component is created, it has something like :

<p>    Component works ! </p> 

So what I did is that to test a little bit my component :

<p>    Component works !     <div *ngFor="#value in values">       {{value}}    </div> </p> 

But then the error showed up.

It's just because a paragraph can't contain a block element like ( div , h1, ul etc).

So many time wasted just to spot that ...

When I do

 <div>     Component works !      <div *ngFor="#value in values">        {{value}}     </div>  </div> 

It's working fine ;)