将脚本 JS 添加到我的 angular7 项目中

Posted 2023-02-22

【中文标题】将脚本 JS 添加到我的 angular7 项目中

【英文标题】：Adding a script JS to my angular7 project

【发布时间】：2019-03-18 15:56:09

【问题描述】：

对于我的项目，我需要将“Loadingbar.js”库安装到我的一个页面（您可以在这里找到：https://loading.io/progress/）。 我确实将 CSS 粘贴到我的全局“style.css”文件中。

所以，首先，我只是尝试将 放入我的索引中：

<script type="text/javascript" src="assets/js/loading-bar.js"></script>

它工作了几个小时，现在它不再工作了。所以我尝试了一切：我尝试在我的 index.html 的每一行，甚至在我的页面的 html 中，在正文中，在正文下，在 ... 下放置任何地方。

此外，Angular 项目有时会欺骗我：js 很少加载一次。如果我在不更改任何内容的情况下刷新页面 - 它就不再起作用了。

我尝试将“延迟”添加到 .

我尝试等待文档准备好，我尝试了 setTimeout，但它没有成功。

我尝试在“angular.json”中添加脚本的路径，没有成功。

我可以做些什么来完成这项工作？如何将 JS lib 添加到 Angular 项目中？

谢谢。

【参考方案1】：

您应该知道的第一件事是，在 Angular 应用程序中，如果可能，最好使用任何库的 npm 依赖项。如果这不可行，而您需要使用外部 js 文件，您可以按照以下步骤操作：

首先，将您的 js 放入 node_modules 文件夹中。例如：node_modules/test-lib/loading-bar.js

在您的app.module.ts 中，您可以将此行放在文件顶部：

import test-lib/loading-bar.js(没有node_modules)

【讨论】：

谢谢，但如果我使用它，我将无法在 Git 上推送我的项目，因为没有推送 node_module 文件夹。

【参考方案2】：

Loading.io 将他们的库链接到他们的 GitHub 帐户。

他们在这里提供了一个 Angular 示例： https://github.com/loadingio/angular-loading-bar

看起来最好的方法是通过 npm 或 yarn 安装库。

【讨论】：

谢谢，库无法正常工作，某些导入不像“ldBar”导入那样正确