Javascript 将angular-cli.json内容放在离子3应用程序的何处_Javascript_Angular_Typescript_Ionic3_Videogular

Javascript 将angular-cli.json内容放在离子3应用程序的何处

javascript angular typescript

Javascript 将angular-cli.json内容放在离子3应用程序的何处,javascript,angular,typescript,ionic3,videogular,Javascript,Angular,Typescript,Ionic3,Videogular,我与爱奥尼亚3一起使用。你能告诉我，既然爱奥尼亚3应用程序没有angular cli.json 我是这样安装的：npm install hls.js--save angular-cli.json 错误，因为我没有执行上述操作： console.js:35 ERROR Error: Uncaught (in promise): ReferenceError: Hls is not defined ReferenceError: Hls is not defined at VgHLS.web

我与爱奥尼亚3一起使用。你能告诉我，既然爱奥尼亚3应用程序没有

angular cli.json

我是这样安装的：

npm install hls.js--save

angular-cli.json

错误，因为我没有执行上述操作：

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)

您需要遵循以下步骤：

在项目中安装/复制JS文件，您可以使用npm或复制到特定文件夹

将以下配置添加到

包.json

中：

使用项目/config/copy.config.js的以下路径

ROOT\u创建一个文件

&添加以下内容：

修改文件

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

中添加了一个小配置文件，这将强制爱奥尼亚复制我们想要在build文件夹中的

资产
构建文件夹是什么？生成文件夹是在应用程序运行时生成的文件夹。它包含您的工件
。默认情况下，ionic不包括此生成文件夹中的资产
为什么我们要在index.html
中添加脚本和样式标签？很简单，到目前为止，我们所做的只是复制build
文件夹中的资产。但是我们需要告诉应用程序使用它们。这就是为什么我们也在index.html
中导入它们。请注意我们在index.html
中使用的路径，它是我们复制资产的路径。
您是否在ionic 3
应用程序上使用过videogular2
？否。但是如果您想导入外部脚本，比如您的案例。这就是你可以做到的。我在这个路径上也有一个同名文件\node\u modules\@ionic\app scripts\config\copy.config.js
。那么，如果我进行上述修改，会发生什么？为什么我需要这一行
？我如何添加此样式文件？请参见在此处添加图标字体的名称下：
    $ npm install videogular2 --save
    $ npm install @types/core-js --save-dev
    $ npm install hls.js --save

 ...
"config": {   "ionic_copy": "./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}}'
        },
    }



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

<body>

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

</body>