在哪里將angular-cli.json內容放在Ionic 3應用程序上

Question

我將videogular2與Ionic 3應用程序配合使用。 你能告訴我如何使用ionic 3應用程序進行以下修改嗎，因為它沒有angular-cli.json

我已經這樣安裝了它： npm install hls.js --save

角cli.json

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

錯誤，因為我沒有做上面的事情：

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

您需要按照以下步驟操作：

1. 將JS文件安裝/復制到項目中，可以使用npm或復制到特定文件夾。

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

2. 將以下配置添加到package.json ：

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

3. 創建具有以下路徑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不包含此構建文件夾中的資產。

為什么我們在index.html添加scripts＆styles標簽？ 很簡單，我們到目前為止所做的只是復制build文件夾中的assets 。 但是我們需要告訴應用程序使用它們。 這就是為什么我們也將它們導入index.html 。 請注意我們在index.html使用的路徑，這是我們復制資產的路徑。