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 및 구성 요소 파일 미리보기 (... 요약 코드를 의미한다)은 다음과 같습니다

이

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을 app.module.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] 
}) 

나는 드래그 룰라를 포함 할 때 단계가 빠져 있다고 생각하지만 어디에 있는지 알 수 없다. 내 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 
    }