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\' o         


        

Answer 1

Can also mean you're missing a closing double quote

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

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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 .