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)

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

You need follow this steps:

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

Add to your package.json this configuration:

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

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 25 '19 at 14:23

Melchia

22,578
22
103
117

Have you worked with `videogular2` on `ionic 3` app? – Sampath Jan 25 '19 at 15:05
No. But if you want to import an external script, like your case. That's how you can do it. – Melchia Jan 25 '19 at 15:19
I have a same named file on this path too `\node_modules\@ionic\app-scripts\config\copy.config.js`. So what will happen if I'll do above modification? – Sampath Jan 25 '19 at 15:23
Why do I need this line ``? – Sampath Jan 25 '19 at 15:24
How can I add this `style file`? Please see under the name **Adding the icon font** here: https://videogular.github.io/videogular2/docs/getting-started/ – Sampath Jan 25 '19 at 15:27
@Sampath I updated my answer to import also the styles. Just follow the instructions I mentionned above. – Melchia Jan 25 '19 at 15:42
Sure, I'll do that. But I would like to know about `what is happening here`? Hope you'll see above my comments too. – Sampath Jan 25 '19 at 15:53
Now I have a better idea. But what happened the original `package.json` implementation due to our change? `"config": { "ionic_copy": "./config/copy.config.js" },`. At this moment it is geting from here `\node_modules\@ionic\app-scripts\config\copy.config.js` – Sampath Jan 25 '19 at 16:23
There can be multiples config\copy.config.js in your node_modules. But we need OUR config\copy.config.js to copy the assets we need. – Melchia Jan 25 '19 at 16:24
Actually, we're overriding it no? Will it have any after effects if Ionic team will change that node module file in the future? i.e. Do we need to monitor the changes in node module file(`copy.config.js`) and copy the same thing to our file if it'll have new things in the future. – Sampath Jan 25 '19 at 16:29
We're just copying the assets we want. But, if in the future Ionic team puts in place a better way of importing the assets then yes you need to change your code too. – Melchia Jan 25 '19 at 16:31
It's a pleasure. – Melchia Jan 25 '19 at 16:34

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

1 Answers1

EDIT: Explanation