javascript - Angular 2.0.0 with angular-cli 1.0.0-beta.15 : using typescript, 如何像以前的版本一样集成外部库

标签 javascript jquery angularjs angular

我正在使用 Angular 2 创建一个应用程序。我在 RC2 阶段开始使用它,在根据发布的 RC 对我的应用程序进行大量更新后,我终于让它在 Angular 2.0.0 最终版本上运行。

因为我也在使用 angular-cli 并更新到当前最新版本 (1.0.0-beta.15)。我还做了所有需要的更改,例如现在使用 webpack 而不是 SystemJs。

我现在的问题是,我似乎无法找到无需从 CDN 包含外部库(让我们以 jQuery 为例)到我的应用程序的方法。

在以前的 Angular 2 版本中,有一个 angular-cli-build.js 是这样的:

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'jquery/dist/*.min.+(js|map)'
    ]
  });
};

它(查看 vendorNpmFiles 数组的最后一行)将 jquery 库与 system-config.js 一起映射到准备构建应用程序的文件夹有点像这样:

 /** Map relative paths to URLs. */ 
const map: any = { 
  'jquery': 'vendor/jquery'
};  

它所做的是在最终构建文件夹中创建一个 vendor 文件夹(默认名为 dist),我可以从中简单地从我的父级中导入 jquery 最 index.html 带有如下语句:

<script src="vendor/jquery/dist/jquery.min.js"></script>

我现在的问题是如何获得与我正在使用的 angular-cli 版本中描述的类似的结果。

最佳答案

现在我在全局范围内使用这些库,所以我将它们包含在 angular-cli.json

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": "assets",
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/font-awesome/css/font-awesome.min.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],

这样也不需要将它们包含到 index.html 中。 如果有人找到另一种方法来做到这一点,我仍然对此非常感兴趣。

关于javascript - Angular 2.0.0 with angular-cli 1.0.0-beta.15 : using typescript, 如何像以前的版本一样集成外部库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39640280/

相关文章:

javascript - Bootstrap 工具提示不适用于 Font Awesome 图标

javascript - 使用 for 循环加载 Jssor Slider

javascript - 将 md-switch 转换为 md-select

javascript - document.getElementsByClassName 不起作用

javascript - AJAX json 返回未定义

jquery - Owl Carousel 2,两排 8 件

angularjs - 我们可以编写一个可用于所有模块但仅实例化一次的自定义 AngularJS 服务吗

javascript - 将范围变量传递给 ng-click 中的函数

javascript - Angular 服务不作为exp工作

javascript - 如何在 Dynamics CRM 中使用 openForm 设置多选字段值?