Angular2にDragularを追加するアプリケーション：文書が定義されていません

Question

私はAngular2が新しく、私のアプリケーションにDragulaを追加する際に問題があります。私は、アプリケーションを実行すると、エラーが前のホーム・ページをロードするにスローされます。

Exception: Call to Node module failed with error: Prerendering failed because of error: ReferenceError: document is not defined 

エラーメッセージが私はasp-prerender-moduleを使用して、プロジェクトに関連している疑いがあるPrerendingに言及しています。

私はDragulaとフォーラムの投稿から公式のチュートリアルに従おうとしました。以下は私のapp.moduleおよびコンポーネントファイルの抜粋です（...要約コードを示す）：

app.module.ts

import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 
import { UniversalModule } from 'angular2-universal'; 
import { AppComponent } from './components/app/app.component' 
... 
import { SearchComponent } from './components/search/search.component'; 

import { BrowserModule } from '@angular/platform-browser'; 
import { CommonModule } from '@angular/common'; 
import { FormsModule } from '@angular/forms'; 
import { Injectable } from '@angular/core'; 
import { DragulaModule } from 'ng2-dragula'; 


@NgModule({ 
    bootstrap: [ AppComponent ], 
    declarations: [ 
     AppComponent, 
     ... 
     SearchComponent 
    ], 
    imports: [ 
     UniversalModule, 
     BrowserModule, 
     FormsModule, 
     DragulaModule, 
     CommonModule, 
     RouterModule.forRoot([ 
      { path: '', redirectTo: 'home', pathMatch: 'full' }, 
      ... 
      { path: 'search', component: SearchComponent }, 
      { path: '**', redirectTo: 'home' } 
     ]) 
    ] 
}) 
export class AppModule { 
} 

search.component.ts

import { Component } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { SearchService } from '../../services/search.service'; 
import { DragulaService } from 'ng2-dragula'; 

@Component({ 
    selector: 'search', 
    template: require('./search.component.html'), 
    providers: [SearchService, DragulaService] 
}) 

私はDragulaを含むときに私は一歩足りないと思うが、私はどこにいるのか分からない。私のpackage.jsonファイルにdragula（^ 3.7.2）とng2-dragula（^ 1.3.0）が含まれています。

Answer 1

DragulaServiceの初期化が間違っています。 Dragulaのマニュアルを参照してくださいlink

search.component.ts今

import { Component } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { SearchService } from '../../services/search.service'; 
import { DragulaService } from 'ng2-dragula'; 

@Component({ 
    selector: 'search', 
    template: require('./search.component.html'), 
    providers: [SearchService] 
}) 

expoert searchcomponent{ 
constructor(private dragulaService: DragulaService) { 
     console.log('DragulaService created'); 
} 
} 

ドラッグで再生すると、あなたがドラッグをより細かく制御したい場合は

をドロップすると、あなたがイベントやオプションを追加することができますドロップすることができますdragulaService。

constructor(private dragulaService: DragulaService) { 
    dragulaService.drag.subscribe((value) => { 
     console.log(`drag: ${value[0]}`); 
     this.onDrag(value.slice(1)); 
    }); 
    dragulaService.drop.subscribe((value) => { 
     console.log(`drop: ${value[0]}`); 
     this.onDrop(value.slice(1)); 
    }); 
    dragulaService.over.subscribe((value) => { 
     console.log(`over: ${value[0]}`); 
     this.onOver(value.slice(1)); 
    }); 
    dragulaService.out.subscribe((value) => { 
     console.log(`out: ${value[0]}`); 
     this.onOut(value.slice(1)); 
    }); 
    } 

    private onDrag(args) { 
    let [e, el] = args; 
    // do something 
    } 

    private onDrop(args) { 
    let [e, el] = args; 
    // do something 
    } 

    private onOver(args) { 
    let [e, el, container] = args; 
    // do something 
    } 

    private onOut(args) { 
    let [e, el, container] = args; 
    // do something 
    }