Модуль не найден: ошибка: не удается разрешить ... при использовании внешней библиотеки JS - PullRequest
Новая
       29

Модуль не найден: ошибка: не удается разрешить ... при использовании внешней библиотеки JS

0 голосов
/ 14 июня 2019

Я пытаюсь использовать редактор WYSIWYG ( TUI Editor ) в моем приложении Angular2 +.Они не предоставляют оболочку Angular, поэтому я решил создать свою собственную (на основе этой оболочки ).

Из-за некоторых проблем, связанных с установкой npm, я сохранил их файл сценария (https://cdnjs.cloudflare.com/ajax/libs/tui-editor/1.4.0/tui-editor-Editor-full.js) в папке.

Я создал службу для создания экземпляра редактора, и она отлично работает: 

import {ElementRef, Injectable} from '@angular/core';
import Editor from '../js/tui-editor-Editor-full';

@Injectable({
  providedIn: 'root'
})
export class TuiService {

  editor: any;

  createEditor(options: object, element: ElementRef): any {
    if (options) {
      this.editor = new TuiEditor(Object.assign({
          el: element.nativeElement
        },
        options));
    }
    return this.editor;
  }
  ...
}

Теперь я не хочу добавлять одиних расширения (таблица одна: https://github.com/nhn/tui.editor/blob/master/docs/using-extensions.md), но у меня возникают некоторые проблемы.

Когда я добавляю скрипт расширения так же, как я добавил файл скрипта редактора 

import '../js/tui-editor-extTable';

Я получил эти ошибки при сборке приложения 

WARNING in ./src/js/tui-editor-extTable.js
Module not found: Error: Can't resolve 'tui-editor' in 'C:\workspace\src\js'

WARNING in ./src/js/tui-editor-extTable.js
Module not found: Error: Can't resolve 'tui-editor/dist/tui-editor-Viewer' in 'C:\workspace\src\js'

ERROR in ./src/js/tui-editor-extTable.js
Module not found: Error: Can't resolve 'jquery' in 'C:\workspace\src\js'
ERROR in ./src/js/tui-editor-extTable.js
Module not found: Error: Can't resolve 'to-mark' in 'C:\workspace\src\js'
ERROR in ./src/js/tui-editor-extTable.js
Module not found: Error: Can't resolve 'tui-code-snippet' in 'C:\workspace\src\js'
i ｢wdm｣: Failed to compile.

Если вы посмотрите на tui-editor-Editor-full.js , все эти зависимости уже включены в этот файл.Почему скрипт tui-editor-extTable.js их не видит?

Как я могу использовать это расширение?

Я установил jquery в качестве зависимости моего проекта, нокажется, что он все еще не распознается сценарием tui-editor-extTable.js .

Я пытался воспроизвестиМоя рабочая область на stackblitz

Спасибо за вашу помощь

Ответы [ 2 ]

0 голосов
/ 20 июня 2019

Я наконец решил клонировать репозиторий tui-editor, чтобы создать свой собственный js-файл tui-Editor с помощью пользовательской конфигурации веб-пакета.

Он включает в себя:

  • всезависимости, используемые в проекте (jquery, highlightjs ...)
  • расширение таблицы

Так что мне нужно только импортировать этот файл в мой код.

Этоне лучшее решение, и оно не отвечает на основной вопрос, но работает: /

0 голосов
/ 17 июня 2019

Раньше у нас была такая же проблема с библиотеками js в нашем приложении.Мы решили это, добавив библиотеку js в папку 'assets', например:

enter image description here

И после этого мы создаем ее так: 

    import 'assets/js/leaflet-tilelayer-wmts-src';
    import 'assets/js/NonTiledLayer.WMS';
    import { environment } from 'environments/environment';
    import * as E from 'esri-leaflet';
    import * as L from 'leaflet';

    export const baseMaps_dev = {
        OSM: L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: false,
            detectRetina: true,
            maxNativeZoom: 19,
            maxZoom: 20,
            name: 'OSM',
        }),
        IGN: L.tileLayer.wms('https://www.ign.es/wms-inspire/ign-base?SERVICE=WMS&', {
            format: 'image/png',
            layers: 'IGNBaseTodo',
            maxZoom: 20,
            name: 'IGN',
        }),
        IGNWMTS: L.tileLayer.wmts('https://www.ign.es/wmts/ign-base?', {
            format: 'image/png',
            layer: 'IGNBaseTodo',
            tilematrixSet: 'EPSG:3857',
            maxZoom: 20,
            name: 'IGNWMTS',
        }),
...

Надеюсь, это поможет

...