使用 angular-cli 在 .html 文件中引用外部 Javascript 库 [英] Reference External Javascript Library in .html files with angular-cli

问题描述

在 Angular 应用程序中引用旧版 javascript 库时收到错误 404.我的问题是为什么?

Receiving error 404 referencing a legacy javascript library in angular application. My question is why?

这些是我构建环境的特点

These are the characteristics of my build environment

• Angular CLI:1.6.0
• 节点:7.10.0
• 操作系统:win32 x64
• 角度:4.4.6

下图显示了 index.html 中引用使用 node 安装的 chart.js javascript 文件的标记.我已经检查了路径并确定该文件存在于该位置，并想了解为什么我不能直接在我的 html 中使用 node_modules 中的位置引用 javascript 文件.

The image below shows the tag in the index.html referencing the chart.js javascript file that was installed using node. I have checked the path and determined that the file is present at that location and would like to understand why I can't reference the javascript file directly in my html with the location in node_modules.

下图显示了我在尝试使用脚本标记引用 html 中的 javascript 文件时收到的错误

The image below shows the error that I receive trying to reference the javascript file in my html using the script tag

如果解决方法是答案，答案是否还包含必须使用 angular 的解决方法的原因?

If a workaround is the answer, can the answer also contain the reason why the workaround is necessary using angular?

推荐答案

这可以使用 Angular Cli 实现

This is possible using Angular Cli

以jssha js库为例

Taking example of jssha js library

第一步

npm install jssha --save [using jssha for this demo]
If it is your own custom file place it in the scripts array of angular-cli.json skip this step 1

第二步

Add the jssha scripts file in .angular-cli.json file
"scripts": [ "../node_modules/jssha/src/sha.js" ]

第三步在组件中添加一个 var 用作全局变量

Step three Adding a var in component to be used as a global variable

//using external js modules in Angular Component
declare var jsSHA: any; // place this above the component decorator
shaObj:any;
hash:string;
this.shaObj = new jsSHA("SHA-512", "TEXT");
this.shaObj.update("This is a Test");
this.hash = this.shaObj.getHash("HEX")

看看@这个链接.详细信息与打字和没有打字相同.我在那个项目中使用了 Bootstrap 和 jquery 和 Angular，你也可以查看 repo.

Take a look @ this link. details for the same with typings and without it. I have used bootstrap and jquery with Angular in that project, you can check the repo too.

工作示例

这篇关于使用 angular-cli 在 .html 文件中引用外部 Javascript 库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！