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.

what is `endSourceSpan` in you code ? – Pardeep Jain Apr 08 '16 at 05:32 — Pardeep Jain, Apr 08 '16 at 05:32

maxime1992 · Answer 1 · 2017-02-28T13:22:55.713

29

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 ;)

edited Feb 28 '17 at 13:22

answered May 06 '16 at 11:13

maxime1992

22,502
10
80
121

5

Thanks... that's saved my time.. +1 – Nisar May 14 '16 at 18:23
*bows* @mod: this should be marked as correct answer – Jan P. May 26 '16 at 14:39
1

Is it just me, or does this seem ridiculous for Angular 2 to not be able to compile when a
tag contains a block element?!?! I realize Angular 2 is trying to help you write _correct_ HTML code, but this seems like an over-reaction to me
– Chris Knight Jun 27 '16 at 02:40
Agree with @JanP. - This should be marked as the correct answer – Joshua Wiens Jul 05 '16 at 20:34

score 14 · Answer 2 · answered Apr 25 '16 at 00:58

14

Can also mean you're missing a closing double quote

<div (click)="myClick()>What's up with my CODE!???</div>

answered Apr 25 '16 at 00:58

Justin

3,255
3
22
20

Very troublesome that the missing double quote can lead to this! – ZoolWay May 12 '16 at 12:10
One of the big issues I have with angular2/typescript is templates circumvent type checking – Justin May 15 '16 at 20:17

score 6 · Answer 3 · answered Apr 24 '16 at 20:07

6

I had a similar issue. The error I received was "EXCEPTION: TypeError: Cannot set property 'endSourceSpan' of null" (see image below). In my template, I missed the ending ">" for the div (see image below). Once I added the ">", the error went away.

I believe this error occurs for any malformed HTML in an Angular 2 template.

answered Apr 24 '16 at 20:07

Mike Barlow - BarDev

11,087
17
62
83

1

yes I also received the endSourceSpan error only when I'm missing the end of a tag or I close a tag wrong like cause the template parser will not understand the template :) – Nicu Apr 25 '16 at 06:46

score 4 · Answer 4 · answered Jun 08 '16 at 12:08

4

I had the same issue and it turned it out was an HTML tag I hadn't closed.. very tricky to find

answered Jun 08 '16 at 12:08

Spock

2,482
29
27

Günter Zöchbauer · Answer 5 · 2016-04-08T07:27:37.580

3

<xxx /> is valid if xxx is a void element

area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

https://www.w3.org/TR/html-markup/syntax.html#syntax-elements

No that's ok, I found the bug an unclosed div in html,

Missing closing <div> it is.

~~Probably~~

<input class="form-control" [(ngModel)]="newMenuItem"/>

/> is not valid HTML5. Angular is quite strict about the HTML you pass to Angular.

<input>

Tag omission Must have a start tag and must not have an end tag.

Change it to

<input class="form-control" [(ngModel)]="newMenuItem">

edited Apr 08 '16 at 07:27

answered Apr 08 '16 at 05:32

Günter Zöchbauer

623,577
216
2,003
1,567

you think this creates some kind of problem ? – Pardeep Jain Apr 08 '16 at 05:33
1

I think it creates the problem described in the question ;-) - not tested though. – Günter Zöchbauer Apr 08 '16 at 05:38
2

No that's ok, I found the bug an unclosed div in html, thank's for help. Angular accepts inpust witch end with `/>` – Nicu Apr 08 '16 at 05:47
Interesting. I think it shouldn't accept `` Thanks for the feedback. – Günter Zöchbauer Apr 08 '16 at 05:50
See for example the 4th comment in https://github.com/angular/angular/issues/5563 – Günter Zöchbauer Apr 08 '16 at 05:59

score 0 · Answer 6 · answered Jun 26 '16 at 23:33

0

I had the same issue and it turned out I was missing an assignment operator in a HTML tag (i.e. <div class"cf"> instead of <div class="cf">)

answered Jun 26 '16 at 23:33

Luke Schoen

4,129
2
27
25

score 0 · Answer 7 · answered Sep 17 '16 at 07:20

i have this problem , because i break html law that i do not know about it .

this an example of forbidden html : because you have ul element inside p element and that is forbidden in html law

<p>this will not work <ul><li *ngFor="#item on items">{{item.name}}</li></ul></p>

but this will work :

<p>This will definitely work </p>
<ul><li *ngFor="#item on items">{{item.name}}</li></ul>

when i talk to angulars dev about this , they told that i have to get the hard way

https://github.com/angular/angular.js/issues/15139#issuecomment-247256778

of course you will have this in angularjs1 and angularjs2 .

Uncaught exception in promise when when trying to use nested components

7 Answers7

Linked