Как добавить внешний файл js в библиотеку angular 6

Question

Я создаю угловую библиотеку, используя угловую 6, которая основана на угловом материале, для этого мне нужно включить библиотеку hammer js.

Я знаю, что в angular 6 мы можем добавить внешнюю библиотеку js в angular.json в конфигурации проекта. Но это не работает в случае библиотеки. Я попытался добавить внешнюю библиотеку следующим образом.

"my-library": {
  "root": "projects/my-library",
  "sourceRoot": "projects/my-library/src",
  "projectType": "library",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-ng-packagr:build",
      "options": {
        "tsConfig": "projects/my-library/tsconfig.lib.json",
        "project": "projects/my-library/ng-package.json",
        "scripts": [
          "../node_modules/hammerjs/hammer.min.js"
        ]
      }
    }
}

Но я получаю эту ошибку.

Проверка схемы не удалась со следующими ошибками: Путь к данным "" НЕ должен иметь дополнительных свойств (скриптов).

Пожалуйста, предложите, как правильно добавить внешний js-файл в угловую библиотеку.

Answer 1

Что касается конкретного примера ОП, пытающегося добавить hammer.js. Просто npm установите hammerjs, затем отредактируйте ваш файл main.ts и добавьте import 'hammerjs', тогда он будет доступен глобально.

Также см. эту статью.

Answer 2

Итак, вот две возможные проблемы, которые нам нужно решить

1) Как добавить ссылку на внешний JS в основной угловой проект (демо-проект)

2) Как добавить ссылку на внешний JS в пакет NPM.

Решение для первого сценария:

Укажите ссылку на ваш внешний JS в файле angular.json основного углового проекта в теге сценария и укажите путь к вашему пакету из папки вашего библиотеки node_modules, например:

"scripts": [ "./projects/my-cool-library/node_modules/my-exteranl-library/dist/x.js"]

Решение для второго сценария:

Подход 1

Итак, теперь вы создали пакет NPM из своей библиотеки и собираетесь использовать его в другом проекте. очевидно, что ваша зависимость от стороннего пакета будет автоматически загружена после загрузки пакета, вам просто нужно указать ссылку на этот JS в теге script файла angular.json нового проекта.

"scripts": [ "./node_modules/my-exteranl-library/dist/x.js"]

Подход 2

Не указывайте стороннюю зависимость при создании пакета NPM удалить запись из package.json файла вашей классной библиотеки

"dependencies": { "my-exteranl-library": "^1.1.0" <-- Remove this } и добавьте js непосредственно во вновь созданное приложение через CDN в файле index.html, используя скрипт script

<script src="https://demo-cdn.com/ajax/libs/my-exteranl-library/dist/x.js"></script>

Существует 3-й способ, по которому вы можете скачать JS, написав код в вашей библиотеке, который вскоре будет здесь.

Answer 3

вы можете добавить свою внешнюю библиотеку в файл tsconfig.lib.jso n.

Откройте этот файл и добавьте свою библиотеку желаний в узел types , который вы можете найти в compilerOptios . Я даю вам и пример. В моем случае я ссылался на библиотеку из моего модуля узла проекта. Вы можете сделать то же самое с вашей библиотекой hammer.js. Удачи

Answer 4

сначала добавьте библиотеку в index.html или в

"scripts": [
"node_modules/hammerjs/hammer.min.js"
]

npm установить d3 - сохранить

npm install @ types / d3 --save-dev

Если в библиотеке нет доступных типов в @ types /, вы все равно можете использовать ее, вручную добавив для нее наборы:

1. Сначала создайте файл typings.d.ts в вашей папке src /. Этот файл будет автоматически включен как определение глобального типа.

2. Затем в файле src / typings.d.ts добавьте следующий код:

   объявить модуль 'typeless-package';

3. Наконец, в компонент или файл, который использует библиотеку, добавьте следующий код:

   импорт * как typelessPackage из 'typeless-package';

   typelessPackage.method ();

перейдите по ссылке

Answer 5

Вы должны попробовать команду ниже, если вы ранее использовали угловую версию 1.x. И это работает для меня.

ng update @angular/cli --migrate-only --from=1.7.4

Answer 6

удалить ../ до пути node_modules

"scripts": [
    "node_modules/hammerjs/hammer.min.js"
]