CODEWITHSUNDEEP
angularsystemjsprimengquill
ebhh2001
ebhh2001

Reputation: 2116

QuillJS editor loads correctly, but fails to find CSS files during pasting

I have an Angular2 (RC5) and PrimeNG (Beta 13) app that uses the PrimeNG Editor component (p-editor) based on the QuillJS Editor (v1.0.0-rc.2). My project is based on the Angular 2 Seed project.

The page with the Editor component loads fine, and I am able to do some basic text editing. However, when I try to paste some text into the editor, Chrome Dev tools reports a number 404 errors:

Dev tools errors

The strange thing is that if I hover over the clipboard.js:122 link in Dev Tools, the address is show as webpack:///./modules/clipboard.js I don't believe I am using webpack.

Here is my tools/config/project.config.ts file

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 });
  }
}

Looks like a dependency of Quill (clipboard) is not getting loaded properly. How do I fix this?

Upvotes: 1

Views: 1536

Answers (1)

ebhh2001
ebhh2001

Reputation: 2116

Solved the problem by following the instructions in Add external dependency article on the Angular2 Seed Wiki.

Removed the quill entries from NPM_DEPENDENCIES and added the following code to the constructor of ProjectConfig class in tools/config/project.config.ts 

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

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

Upvotes: 1

Related Questions