在 Ionic 3 应用程序上放置 angular-cli.json 内容的位置

Question

我将videogular2 与Ionic 3 应用程序一起使用。你能告诉我如何使用 ionic 3 应用程序进行以下修改，因为它没有angular-cli.json

我是这样安装的：npm install hls.js --save

angular-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

1. 将此配置添加到您的package.json：

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

1. 使用以下路径 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 复制到构建文件夹中。

什么是构建文件夹？ build 文件夹是应用程序运行时生成的文件夹。它包含您的artifects。默认情况下，ionic 不包含此构建文件夹中的资产。

我们为什么要在index.html 中添加脚本和样式标签？到目前为止，我们所做的很简单，只是将assets 复制到build 文件夹中。但是我们需要告诉应用程序使用它们。这也是我们将它们导入index.html 的原因。注意我们在index.html 中使用的路径，它是我们复制资产的路径。