Установите сторонний JS-плагин в angular 7
Я пытаюсь импортировать JS-плагин read-excel-file в проект angular 7. Я испробовал все способы, описанные на сайтах, но безуспешно.
Может ли кто-нибудь предложить лучший процесс.
declare var readXlsxFile: any;
В угловом.json
"scripts": [
"node_modules/read-excel-file/commonjs/readXlsxFileBrowser.js"
]
ИЛИ
"scripts": [
"node_modules/read-excel-file/bundle/read-excel-file.min.js"
]
Но ничего не сработало. Я могу получить функцию readXlsxFile и ее выполнение, но внутри кода она вызывает другой модуль. Как загрузить эти зависимые модули?
Не могли бы вы также объяснить концепцию проблемы.
Ответы 1
При включении сторонних библиотек есть две части: код javascript, который вы хотите выполнить, и файлы определений, чтобы дать IDE все его строго типизированные свойства.
Очевидно, что первое должно присутствовать, если приложение должно функционировать. Самый простой способ получить это — включить стороннюю библиотеку с тегом <script src = "thirdLib.js"> на html-страницу, на которой размещено ваше приложение Angular 2. Это не даст вам определений, поэтому у вас не будет преимуществ IDE, но приложение будет работать. (чтобы среда IDE не жаловалась на то, что она не знает о переменной « ThirdLib », добавьте declare var thirdLib:any в свой файл ts. Поскольку он имеет тип any, среда IDE не будет предлагать завершение кода для третьей библиотеки, но она также не будет бросать IDE ошибки.)
Чтобы получить исполняемый код и определения, если библиотека была написана на Typescript, вы можете добавить ссылку на этот ts-файл из своего кода с помощью import {thirdLib} from 'thirdLibfolder/thirdLib'. Файл ts библиотеки по своей природе содержит как исполняемый код, так и определения машинописного текста.
Если библиотека не написана на Typescript, но какая-то добрая душа написала для нее файл определения ThirdLib.d.ts, вы можете сослаться на файл d.ts с помощью /// <reference path = "thirdLibfolder/thirdLib.d.ts" /> в вашем файле ts. А затем по-прежнему включите фактический исполняемый javascript со ссылкой на скрипт, как указано выше.
Расположение этих файлов и то, включаете ли вы расширения в ссылку, зависят от настройки вашего проекта и используемого вами средства сборки и сборки. Webpack будет искать в папке node_modules библиотеки, на которые есть ссылки в import {..., и примет ссылку с расширением .ts и без него. Метеор выдаст ошибку, если вы включите расширение .ts.
доп ссылка. https://github.com/angular/angular-cli/wiki/3rd-party-libs