1

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

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

开发工具错误

奇怪的是，如果我将鼠标悬停在开发工具中的 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（剪贴板）的依赖项没有正确加载。我该如何解决？

4

1 回答 1

1

按照 Angular2 Seed Wiki 上的添加外部依赖项文章中的说明解决了该问题。

从 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'
};
于 2016-08-25T13:02:09.503 回答