Where to put angular-cli.json content on Ionic 3 app

Question

I use videogular2 with Ionic 3 app. Can you tell me how can I do below kind of modification with ionic 3 app since it doesn't have angular-cli.json

I have installed it like so: npm install hls.js --save

angular-cli.json

{
        ...
        "apps": [
            {
                ...
                "scripts": [
                    "../node_modules/hls.js/dist/hls.min.js"
                ],
                ...
            }
        ],
        ...
    }

Error since I didn't do above:

console.js:35 ERROR Error: Uncaught (in promise): ReferenceError: Hls is not defined
ReferenceError: Hls is not defined
    at VgHLS.webpackJsonp.1185.VgHLS.createPlayer (vg-hls.js:59)
    at VgHLS.webpackJsonp.1185.VgHLS.ngOnChanges (vg-hls.js:47)
    at checkAndUpdateDirectiveInline (core.js:12092)
    at checkAndUpdateNodeInline (core.js:13598)
    at checkAndUpdateNode (core.js:13541)
    at debugCheckAndUpdateNode (core.js:14413)
    at debugCheckDirectivesFn (core.js:14354)
    at Object.eval [as updateDirectives] (LiveEventVideo.html:73)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14339)
    at checkAndUpdateView (core.js:13508)
    at callViewAction (core.js:13858)
    at execComponentViewsAction (core.js:13790)
    at checkAndUpdateView (core.js:13514)
    at callWithDebugContext (core.js:14740)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:14277)
    at ViewRef_.detectChanges (core.js:11300)
    at NavControllerBase._viewAttachToDOM (nav-controller-base.js:460)
    at NavControllerBase._transition (nav-controller-base.js:540)
    at nav-controller-base.js:261
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (core.js:4629)
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (core.js:4620)
    at t.invokeTask (polyfills.js:3)
    at r.runTask (polyfills.js:3)
    at o (polyfills.js:3)
    at e.invokeTask [as invoke] (polyfills.js:3)
    at p (polyfills.js:2)
    at IDBRequest.v (polyfills.js:2)
    at c (polyfills.js:3)
    at Object.reject (polyfills.js:3)
    at NavControllerBase._fireError (nav-controller-base.js:223)
    at NavControllerBase._failed (nav-controller-base.js:216)
    at nav-controller-base.js:263
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (core.js:4629)
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (core.js:4620)
    at t.invokeTask (polyfills.js:3)
    at r.runTask (polyfills.js:3)
    at o (polyfills.js:3)
    at e.invokeTask [as invoke] (polyfills.js:3)
    at p (polyfills.js:2)
    at IDBRequest.v (polyfills.js:2)

Answer 1

You need follow this steps:

1. Install / copy the JS files in to the project, you can use npm or copy to a specific folder.

    $ npm install videogular2 --save
    $ npm install @types/core-js --save-dev
    $ npm install hls.js --save

2. Add to your package.json this configuration:

 ...
"config": {   "ionic_copy": "./config/copy.config.js" },
 ...

3. Create a file with the following path ROOT_OF_YOUR_PROJECT/config/copy.config.js & add the following:

    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}}'
        },
    }

Modify the file src/index.html to import your scripts & styles

<head>
...
    <link href="build/videogular.css" rel="stylesheet">
...
</head>

<body>

    <script type="text/javascript" src="build/hls.min.js"></script>

</body>

EDIT: Explanation

What we did here was to fix a problem known in Ionic which is for importing external assets ( scripts, styles, images ... ).

We added a little configration file in package.json which will force ionic to copy the assets we want in the build folder.

What is the build folder? The build folder is the folder generated in the runtime of the application. It contains your artifects. By default ionic doesn't include the assets in this build folder.

Why did we add the scripts & styles tag in index.html? It's simple what we did up to now was just copying the assets in the build folder. But we need to tell the application to use them. This is why we import them in the index.html too. Pay attention to path we used in the index.html it's the path where we copied our assets.