如何在Angular 2项目中导入js包？
我有一个Angular 2项目，我想添加一个名为bootstrap-slider的JavaScript包，我很难理解如何将该包集成到该项目中。
我首先将这个包添加到我的node_modules中，方法是在package.json文件的依赖项下添加"bootstrap-slider“，然后运行"npm install”。我的包中的条目如下所示：
"bootstrap-slider": "^9.2.0",我可以看到在node_modules中添加了一个包含滑块内容的新文件夹。在查阅了几个指南和解释之后，我在我的index.html中尝试了以下方法，以便正确地导入和使用JS包。我的索引html现在看起来像这样：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><%= webpackConfig.metadata.title %></title>
<meta name="description" content="<%= webpackConfig.metadata.description %>">
<% if (webpackConfig.htmlElements.headTags) { %>
<!-- Configured Head Tags -->
<%= webpackConfig.htmlElements.headTags %>
<% } %>
<!-- base url -->
<base href="<%= webpackConfig.metadata.baseUrl %>">
<script src="../node_modules/bootstrap-slider/src/js/bootstrap-slider.js"></script>
<script>
System.config({
paths: {
bootstrap-slider: ‘../node_modules/bootstrap-slider/src/js/bootstrap-slider.js’
}
});
</script>
</head>
<body>
<app>
</app>
<div id="preloader">
<div></div>
</div>
<% if (webpackConfig.metadata.isDevServer && webpackConfig.metadata.HMR !== true) { %>
<!-- Webpack Dev Server reload -->
<script src="/webpack-dev-server.js"></script>
<% } %>
<link
href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic'
rel='stylesheet' type='text/css'>
</body>
</html>然后我试着在他们的github上运行示例代码(没有jQuery)，在我的网站上的一个页面上没有结束。
<input
type="text"
name="somename"
data-provide="slider"
data-slider-ticks="[1, 2, 3]"
data-slider-ticks-labels='["short", "medium", "long"]'
data-slider-min="1"
data-slider-max="3"
data-slider-step="1"
data-slider-value="3"
data-slider-tooltip="hide"
>我想知道是如何添加这个JavaScript包和其他包在未来到我的项目。任何帮助都是非常感谢的！
回答 2
Stack Overflow用户
发布于 2017-11-28 20:20:31
我认为为你的项目保留一个包管理器会更舒服。如果您仍然喜欢为您的前端运行时依赖项使用特定的包管理器，我不建议再使用bower，因为它已被弃用。请改用Yarn。
如果您正在使用angular-cli来设置您的项目，那么包含来自node_modules的样式和脚本是完全可能的。您可以编辑项目中的.angular-cli.json文件，并根据需要向angular应用程序添加任意数量的样式或脚本。为了添加样式和脚本，您可以将它们分别添加到app.styles和app.scripts数组中：
{
...
"apps": [
{
...
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": ["../node_modules/bootstrap/dist/js/bootstrap.min.js"],
}
]
}Angular-cli将分别在styles.bundle.js和scripts.bundle.js中包含您在.angular-cli.json中指定的样式和脚本。这两个包都会自动添加到您的Angular应用程序中。
Stack Overflow用户
发布于 2016-09-20 20:44:02
我从未使用过bootstrap-slider，但已经安装了很多模块。您的Javascript控制台中有任何错误消息吗？
否则，要添加模块，您必须执行以下操作：
- 通过npm或bower安装它(就像你已经做的或者通过执行：
npm install bootstrap-slider) - 在你的index.html文件中导入JS和CSS文件(同样，你已经这样做了)在你的模块配置中的
- 导入模块，app.js，下面是一个使用ngRoute模块的例子：
angular .module('myApp'，'ngRoute‘);
https://stackoverflow.com/questions/39593935
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号