Неперехваченное исключение в обещании при попытке использовать вложенные компоненты

Я получаю это исключение при попытке использовать вложенные компоненты:

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

Это мой код для основного компонента:

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

и это дочерний компонент:

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

Может кто-нибудь объяснить мне, откуда эта ошибка и почему она появляется?
Мне html и оба компонента выглядят очень понятно.


person Nicu    schedule 08.04.2016    source источник
comment
что такое endSourceSpan в вашем коде?   -  person Pardeep Jain    schedule 08.04.2016


Ответы (7)


У меня была аналогичная проблема с другой причиной:

Я создал небольшое приложение, используя angular-cli, и когда создается html компонента, он имеет что-то вроде:

<p>
   Component works !
</p>

Итак, что я сделал, так это немного протестировал свой компонент:

<p>
   Component works !

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

Но потом вылезла ошибка.

Это просто потому, что абзац не может содержать блочный элемент, такой как ( div , h1, ul и т. д.).

Столько времени потрачено впустую, чтобы заметить это...

Когда я делаю

 <div>
    Component works !

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

Работает нормально ;)

person maxime1992    schedule 06.05.2016
comment
Спасибо ... это сэкономило мое время .. +1 - person Nisar; 14.05.2016
comment
bows @mod: это должно быть помечено как правильный ответ - person Jan P.; 26.05.2016
comment
Мне кажется, или это кажется смешным, что Angular 2 не может скомпилироваться, когда тег ‹p› содержит блочный элемент?!?! Я понимаю, что Angular 2 пытается помочь вам писать правильный HTML-код, но мне кажется, что это чрезмерная реакция. - person Chris Knight; 27.06.2016
comment
Согласен с @JanP. - Это следует отметить как правильный ответ - person Joshua Wiens; 05.07.2016

Также может означать, что вам не хватает закрывающей двойной кавычки.

<div (click)="myClick()>What's up with my CODE!???</div>
person Justin    schedule 25.04.2016
comment
Очень неприятно, что отсутствующая двойная кавычка может привести к этому! - person ZoolWay; 12.05.2016
comment
Одна из больших проблем, с которыми я сталкиваюсь при работе с angular2/typescript, заключается в том, что шаблоны обходят проверку типов. - person Justin; 15.05.2016

У меня была аналогичная проблема. Я получил сообщение об ошибке: «ИСКЛЮЧЕНИЕ: TypeError: невозможно установить для свойства endSourceSpan значение null» (см. изображение ниже). В моем шаблоне я пропустил окончание «>» для div (см. изображение ниже). Как только я добавил «>», ошибка исчезла.

Я считаю, что эта ошибка возникает для любого искаженного HTML в шаблоне Angular 2.

Ошибка Angular 2 - невозможно установить для свойства endSourceSpan значение null

Angular 2 - отсутствует конечная скобка в Div

person Mike Barlow - BarDev    schedule 24.04.2016
comment
да, я также получил ошибку endSourceSpan только тогда, когда мне не хватает конца тега или я неправильно закрываю тег, например ‹input›‹/input›, потому что парсер шаблона не понимает шаблон :) - person Nicu; 25.04.2016

У меня была такая же проблема, и оказалось, что это HTML-тег, который я не закрыл ... очень сложно найти

person Spock    schedule 08.06.2016

<xxx /> действителен, если xxx является пустым элементом

область, база, br, col, команда, вставка, час, изображение, ввод, кейген, ссылка, мета, параметр, источник, дорожка, wbr

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

Нет, все в порядке, я нашел ошибку в незакрытом div в html,

Отсутствует закрытие <div> это.

Возможно

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

/> не является допустимым HTML5. Angular довольно строго относится к HTML, который вы передаете в Angular.

<input>

Отсутствие тега Должен иметь начальный тег и не иметь конечного тега.

Измените его на

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

person Günter Zöchbauer    schedule 08.04.2016
comment
вы думаете, что это создает какую-то проблему? - person Pardeep Jain; 08.04.2016
comment
Я думаю, что это создает проблему, описанную в вопросе ;-) - хотя и не проверено. - person Günter Zöchbauer; 08.04.2016
comment
Нет, все в порядке, я нашел ошибку в незакрытом div в html, спасибо за помощь. Angular принимает входную ведьму, заканчивающуюся /> - person Nicu; 08.04.2016
comment
Интересно. Я думаю, что это не должно принимать <input /> Спасибо за отзыв. - person Günter Zöchbauer; 08.04.2016
comment
См., например, 4-й комментарий в github.com/angular/angular/issues/5563. - person Günter Zöchbauer; 08.04.2016

У меня была такая же проблема, и оказалось, что мне не хватало оператора присваивания в теге HTML (т.е. <div class"cf"> вместо <div class="cf">)

person Luke Schoen    schedule 26.06.2016

у меня есть эта проблема, потому что я нарушаю закон HTML, о котором я не знаю.

это пример запрещенного html: потому что у вас есть элемент ul внутри элемента p, а это запрещено законом html

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

но это будет работать:

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

когда я разговаривал с разработчиками angulars об этом, они сказали, что мне нужно пройти трудный путь

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

конечно, у вас будет это в angularjs1 и angularjs2.

person albaiti    schedule 17.09.2016