QuillJS编辑器正确加载，但在粘贴期间无法找到CSS文件

Question

我有一个Angular2（RC5）和PrimeNG（Beta 13）应用程序，它使用基于QuillJS编辑器（v1.0.0-rc.2）的PrimeNG编辑器组件（p-editor）。我的项目基于Angular 2 Seed项目。

带有编辑器组件的页面加载正常，我可以进行一些基本的文本编辑。但是，当我尝试将某些文字粘贴到编辑器中时，Chrome Dev工具会报告404错误：

奇怪的是，如果我将鼠标悬停在Dev Tools中的clipboard.js：122链接上，则地址显示为webpack:///./modules/clipboard.js 我不相信我在使用webpack。

这是我的tools / config / 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 });
  }
}

看起来Quill（剪贴板）的依赖关系没有正确加载。我该如何解决这个问题？

Answer 1

按照Angular2 Seed Wiki上Add external dependency文章中的说明解决问题。

从NPM_DEPENDENCIES中删除了quill条目，并将以下代码添加到tools / config / 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'
};