將Dragular添加到Angular2應用程序：文檔未定義

Question

我對Angular2相當新，並且遇到了將Dragula添加到我的應用程序的問題。當我運行應用程序錯誤加載主頁之前拋出：

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

錯誤消息提到Prerending我懷疑是相對於使用asp-prerender-module項目。

我試過從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 
    }