web-dev-qa-db-ja.com

入れ子になったコンポーネントを使用しようとすると、promiseでキャッチされない例外

ネストされたコンポーネントを使用しようとすると、この例外が発生します。

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と両方のコンポーネントは非常に明確に見えます。

angularangular2-templateangular2-directives
22
Nicu

私は別の原因で同様の問題を抱えていました：

Angle-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>

それはうまく動作しています;）

29
maxime1992

また、二重引用符がありません

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

同様の問題がありました。私が受け取ったエラーは「例外：TypeError：nullのプロパティ 'endSourceSpan'を設定できません」でした（下の画像を参照）。私のテンプレートでは、divの末尾の「>」が欠落していました（下の画像を参照）。 「>」を追加すると、エラーはなくなりました。

このエラーは、Angular 2テンプレートの不正なHTMLで発生すると考えられます。

Angular 2 error - Cannot set property 'endSourceSpan' of null

Angular 2 - Missing Ending Bracket on Div

6
Mike Barlow - BarDev

私は同じ問題を抱えていたが、それは私が閉じていなかったHTMLタグであることが判明した..見つけるのは非常に難しい

4
Spock

<xxx />は、xxxがvoid要素の場合に有効です

エリア、ベース、br、col、コマンド、埋め込み、hr、img、入力、keygen、リンク、メタ、パラメーター、ソース、トラック、wbr

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

いいえ、大丈夫です、私はバグをhtmlの閉じられていないdivと見つけました、

閉じていない<div>です。

多分

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

/>は有効なHTML5ではありません。 Angularは、Angularに渡すHTMLについて非常に厳密です。

<input>

タグの省略には開始タグが必要であり、終了タグは使用できません。

に変更する

<input class="form-control" [(ngModel)]="newMenuItem">
3
Günter Zöchbauer

私はこの問題を抱えています。なぜなら、私はそれについて知らないHTML法を破るからです。

これは、禁止されたhtmlの例です。p要素内にul要素があり、それが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>

私はこれについてアンギュラー開発者に話すとき、彼らは私が苦労する必要があると言いました

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

もちろんこれは、angularjs1とangularjs2にあります。

0
albaiti

私は同じ問題を抱えていたため、HTMLタグに割り当て演算子がありませんでした（つまり、<div class"cf"> の代わりに <div class="cf">）

0
Luke Schoen