2016-08-24 5 views
1

QuillJS 편집기 (v1.0.0)를 기반으로하는 PrimeNG 편집기 구성 요소 (p-editor)를 사용하는 Angular2 (RC5) 및 PrimeNG (Beta 13) -rc.2). 내 프로젝트는 Angular 2 Seed 프로젝트를 기반으로합니다.QuillJS 편집기가 올바르게로드되지만 붙여 넣기 중에 CSS 파일을 찾지 못함

편집기 구성 요소가있는 페이지가 잘로드되고 일부 기본 텍스트 편집을 수행 할 수 있습니다. 내가 편집기에 텍스트를 붙여 넣을 때, 크롬 개발자 툴은 숫자 404 오류를보고합니다

Dev tools errors

이상한 것은입니다 나는 clipboard.js 위에 마우스를 올려 경우 : 개발 도구 122 링크 , 주소는 webpack:///./modules/clipboard.js으로 표시됩니다. 나는 webpack을 사용하고 있다고 생각하지 않습니다.

은 여기 내 도구/설정/project.config.ts가

import { join } from 'path'; 

import { SeedConfig } from './seed.config'; 

/** 
* This class extends the basic seed configuration, allowing for project specific overrides. A few examples can be found 
* below. 
*/ 
export class ProjectConfig extends SeedConfig { 

    PROJECT_TASKS_DIR = join(process.cwd(), this.TOOLS_DIR, 'tasks', 'project'); 
    FONTS_DEST = `${this.APP_DEST}/fonts`; 
    FONTS_SRC = [ 
    'node_modules/font-awesome/fonts/**' 
    ]; 

    constructor() { 
    super(); 
    // this.APP_TITLE = 'Put name of your app here'; 

    /* Enable typeless compiler runs (faster) between typed compiler runs. */ 
    // this.TYPED_COMPILE_INTERVAL = 5; 

    // Add `NPM` third-party libraries to be injected/bundled. 
    this.NPM_DEPENDENCIES = [ 
     ...this.NPM_DEPENDENCIES, 
     // {src: 'jquery/dist/jquery.min.js', inject: 'libs'}, 
     { src: 'lodash/lodash.min.js', inject: 'libs' }, 
     { src: 'primeui/primeui-ng-all.min.js', inject: 'libs' }, 
     { src: 'quill/dist/quill.min.js', inject: 'libs' }, 

     { src: 'primeui/themes/delta/theme.css', inject: true }, // inject into css section 
     { src: 'font-awesome/css/font-awesome.min.css', inject: true }, // inject into css section 
     { src: 'primeui/primeui-ng-all.min.css', inject: true }, // inject into css section 
     { src: 'quill/dist/quill.snow.css', inject: true } 
    ]; 

    // Add `local` third-party libraries to be injected/bundled. 
    this.APP_ASSETS = [ 
     ...this.APP_ASSETS, 
     // {src: `${this.APP_SRC}/your-path-to-lib/libs/jquery-ui.js`, inject: true, vendor: false} 
     // {src: `${this.CSS_SRC}/path-to-lib/test-lib.css`, inject: true, vendor: false}, 
    ]; 

    /* Add to or override NPM module configurations: */ 
    // this.mergeObject(this.PLUGIN_CONFIGS['browser-sync'], { ghostMode: false }); 
    } 
} 

가 제대로로드 점점되지 퀼 (클립 보드)의 종속성처럼 보이는 파일입니다. 이 문제를 어떻게 해결할 수 있습니까?

답변

1

Angular2 Seed Wiki의 Add external dependency 문서에있는 지침에 따라 문제를 해결했습니다.

는 NPM_DEPENDENCIES에서 퀼 항목을 제거 및 도구/설정/project.config.ts에서 ProjectConfig 클래스의 생성자에 다음 코드를 추가

this.SYSTEM_CONFIG_DEV.paths['quill'] = 
    `${this.APP_BASE}node_modules/quill/quill`; 

this.SYSTEM_BUILDER_CONFIG.packages['quill'] = { 
    main: 'quill.js', 
    defaultExtension : 'js' 
};