带有angular-cli的.html文件中的参考外部Javascript库 [英] Reference External Javascript Library in .html files with angular-cli

问题描述

在角度应用程序中收到引用旧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

如果解决方法是答案，那么答案是否还可以包含为什么需要使用角度解决方法的原因?

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")

在此 链接 中查看.带有和不带有输入的相同内容的详细信息.在该项目中，我已经在Angular中使用了bootstrap和jquery，您也可以检查存储库.

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屋！