使用angular-cli安装第三方jquery-ui

Question

我是在我的Angular 2项目中使用angular-cli。在我的项目中，我想使用jQuery UI。我使用以下命令安装了jQuery UI:

npm install jquery jquery-ui

我编辑了我的angular-cli-build.js文件

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
          'jquery/src/jquery.js',
          'jquery-ui/jquery-ui.js'
    ]
  });
};

它将如何自动更新到我的dist/vendor文件夹中，我是否需要像下面这样在我的index.html中添加css文件（例如css/jquery-ui.css）？

我已经按照此链接中的moment.js集成进行了操作，但它没有帮助jquery-ui。 我将感激有一个与angular-cli集成jquery-ui的工作示例。

- pd farhad

---

是的，除非您使用webpack或类似工具捆绑样式，否则您需要将CSS文件添加到index.html中。 - dfsq

Answer 1

当您在angular-cli.json文件的scripts部分中添加.js文件时，它应该按照上述方法工作。

请将此代码添加到您的主模块类中，并检查它是否正常工作。

import 'jquery';
import 'jquery-ui';

- JLS

Answer 2

在你的angular-cli-build.js文件中加入以下内容：

'jquery/dist/jquery.min.js',
jquery-ui/jquery-ui.min.js', </i>

然后在你的 system.config.ts 文件中：

const map: any = {
'jquery': 'vendor/jquery/dist/jquery.min.js',
'jquery.ui': 'vendor/jquery-ui/jquery-ui.min.js',

希望它有所帮助

- user3518668

Answer 3

在 angular-cli.json 文件中导入脚本是更好的方法。这样可以避免在生产部署期间出现问题。

"scripts": [
"../node_modules/jquery/dist/jquery.js",
"vendor/jquery/dist/jquery.min.js",
"'vendor/jquery-ui/jquery-ui.min.js"
],

- Praneeth Reddy