Необходимо выполнить следующие шаги:
- Установить / скопировать файлы JS в проект, вы можете использовать npm или скопировать в определенную папку.
$ npm install videogular2 --save
$ npm install @types/core-js --save-dev
$ npm install hls.js --save
Добавьте к
package.json эту конфигурацию:
...
"config": { "ionic_copy": "./config/copy.config.js" },
...
Создайте файл по следующему пути
ROOT_OF_YOUR_PROJECT/config/copy.config.js и добавьте следующее:
module.exports = {
copyAssets: {
src: ['{{SRC}}/assets/**/*'],
dest: '{{WWW}}/assets'
},
copyIndexContent: {
src: ['{{SRC}}/index.html', '{{SRC}}/manifest.json', '{{SRC}}/service-worker.js'],
dest: '{{WWW}}'
},
copyFonts: {
src: ['{{ROOT}}/node_modules/ionicons/dist/fonts/**/*', '{{ROOT}}/node_modules/ionic-angular/fonts/**/*'],
dest: '{{WWW}}/assets/fonts'
},
copyPolyfills: {
src: ['{{ROOT}}/node_modules/ionic-angular/polyfills/polyfills.js'],
dest: '{{BUILD}}'
},
copySwToolbox: {
src: ['{{ROOT}}/node_modules/sw-toolbox/sw-toolbox.js'],
dest: '{{BUILD}}'
},
copyVideogularStyles: {
src: ['{{ROOT}}/node_modules/videogular2/fonts/videogular.css'],
dest: '{{BUILD}}'
},
copyHlsScripts: {
src: ['{{ROOT}}/node_modules/hls.js/dist/hls.min.js'],
dest: '{{BUILD}}'
},
}
Измените файл src/index.html, чтобы импортировать ваши скрипты и стили
<head>
...
<link href="build/videogular.css" rel="stylesheet">
...
</head>
<body>
<script type="text/javascript" src="build/hls.min.js"></script>
</body>
РЕДАКТИРОВАТЬ: Объяснение
Мы сделали здесь, чтобы исправить проблему, известную в Ionic, которая заключается в импорте внешних ресурсов (скриптов, стилей, изображений ...).
Мы добавили небольшую настройкуфайл в package.json, который заставит ionic скопировать assets, который мы хотим, в папку сборки.
Что такое папка сборки?Папка сборки - это папка, созданная во время выполнения приложения.Он содержит ваш artifects.По умолчанию ionic не включает ресурсы в эту папку сборки.
Почему мы добавили тег scripts & styles в index.html?Все, что мы делали до сих пор, было простым копированием assets в папку build.Но нам нужно указать приложению использовать их.Вот почему мы импортируем их также в index.html.Обратите внимание на путь, который мы использовали в index.html, это путь, куда мы скопировали наши активы.