angular 2 - 添加第三方库

8 回答

• 0

  仍然不支持通过命令支持第三方lib .

  暂时执行以下操作：

  • npm安装时刻

  • 将moment_js从node_modules / moment复制到src / assets / js / moment.js

  • 在index.html中包含assets / js / moment.js

  • 安装打字并将lib导入到您需要的.ts文件中

  • 运行服务并享受使用时刻:)

  这个维基页面提供了更详细的解释：

  https://github.com/angular/angular-cli/wiki/3rd-party-libs

  回复于 2024-04-26T05:15:27+08:00
• 2

  当包括第三方库时，有两个部分......你想要执行的javascript代码，以及给IDE提供所有强类型优点的定义文件 .

  显然，如果应用程序要运行，第一个必须存在 . 最简单的方法是在承载Angular 2应用程序的html页面中包含带有 <script src="thirdLib.js"> 标记的第三方库 . 这不会得到你的定义，所以你不会有IDE的好处，但应用程序将起作用 . （为了阻止IDE抱怨它没有't know about variable ' thirdLib'，将 declare var thirdLib:any 添加到你的ts文件中 . 因为它的类型是 any ，IDE不会为thirdLib提供代码完成，但它也不会抛出IDE错误 . ）

  要获得执行代码和定义，如果lib是用Typescript编写的，您可以使用 import {thirdLib} from 'thirdLibfolder/thirdLib' 从代码中添加对该ts文件的引用 . lib的ts文件本质上包含执行代码和typescript定义 .

  如果lib不是用Typescript编写的，但是一些好的灵魂为它编写了一个thirdLib.d.ts定义文件，你可以在你的ts文件中引用带有 /// <reference path="thirdLibfolder/thirdLib.d.ts" /> 的d.ts文件 . 然后仍然包括如上所述的脚本引用的实际执行javascript .

  这些文件的位置以及是否在参考中包含扩展名，特定于项目设置以及您正在使用的打包程序和构建工具 . Webpack将在 node_modules 文件夹中搜索 import {... 中引用的库，并且将接受带有 .ts 扩展名的引用 . 如果包含 .ts 扩展名，Meteor将抛出错误 .

  回复于 2024-04-26T05:15:27+08:00
• 0

  示例..首先我们需要从npm安装ChartJS .

  npm install chart.js --save
  

  现在我们已经安装了ChartJS，我们需要在angular-cli-build.js文件中告诉CLI新文件所在的文件，以便捆绑它 .

  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)',
        'chart.js/Chart.min.js',
      ]
    });
  };
  
  
  const map: any = {
    'chartjs': 'vendor/chart.js/'
  };
  
  
  const packages: any = {
    chartjs: { defaultExtension: 'js', main: 'Chart.min.js' }
  };
  

  回复于 2024-04-26T05:15:27+08:00
• 1

  仍然Angular-cli在第三方库集成方面存在一些问题 . 直到他们正确地修复它，我可以给你一个黑客 . 假设您想在代码中使用_ of lodash . 所以我会告诉你我的工作代码情景 -

  安装lodash

  npm install lodash --save
  typings install lodash --ambient --save
  

  在此之前，请确保全局安装打字

  npm install typings -g
  

  然后在你的angular-cli-build.json中，确保它保持这种方式

  module.exports = function(defaults) {
    return new Angular2App(defaults, {
      vendorNpmFiles: [
        ...
        'lodash/**/*.js'
      ]
    });
  };
  

  并在您的system-config.ts中：

  /** Map relative paths to URLs. */
   const map: any = {
     'lodash': 'vendor/lodash/lodash.js'
   };
  
   /** User packages configuration. */
   const packages: any = {
     'lodash': {
       format: 'cjs'
     }
   };
  

  在你的src / index.html中添加这一行（这是奇怪的修复）

  <script src="/vendor/lodash/lodash.js" type="text/javascript"></script>
  

  现在在您想要使用lodash的组件中，以这种方式编写

  declare var _:any;
  
  @Component({
  })
  export class YourComponent {
    ngOnInit() {
       console.log(_.chunk(['a', 'b', 'c', 'd'], 2));
    }
  }
  

  它对我有用:) . 我使用了巨大的第三方我的angular2项目中的库通过angular-cli . 希望它也会对你有所帮助

  编辑：

  如果您没有为您的第三方库获得任何npm . 在 src 文件夹下创建一个 assets 文件夹 . 然后，您可以为 js ， css 和 images 添加单独的文件夹 . 将您的第三方js放在 js 文件夹中 . 然后你必须像这样引用index.html中的js文件：

  <script src="assets/js/your_js.js"></script>
  

  现在，当您执行 ng serve 或 ng build 时，它将自动使用 assets/js 更新公用文件夹 . 希望你了解整个场景:)

  回复于 2024-04-26T05:15:27+08:00
• 37

  如果要包含的库不是打字，则有两种方法可以将它包含在角度2应用程序中：

  • 使用npm：步骤a . 使用包管理器安装库

  步骤b . 将库的路径添加到systemjs.config.js文件中的 Map 对象 .

  例：

  'jquery'：'npm：jquery / dist / jquery.js'，'d3'：'npm：d3 / build / d3.js'

  步骤c . 在app.module.ts示例中导入它：

  import'jquery'; import'd3';

  步骤d . 宣布它

  示例：声明var $：any;

  声明var d3：any;

  • 只需将其包含在index.html的script标签中并声明它即可 .

  回复于 2024-04-26T05:15:27+08:00
• 5

  答案可以在以下链接中找到：https://github.com/angular/angular-cli/issues/274#issuecomment-192490084

  回复于 2024-04-26T05:15:27+08:00
• 0

  我现在没有自己使用moment.js . 所以我不确定，但在我看来，你正在尝试使用moment.js作为打字稿模块，也许它不是打字稿模块 . 我建议另一种方法 . 不要使用moment.js作为模块导入，而是使用d.ts文件 . 要实现这一点，我使用tsd：打开一个cmd：

  • npm install tsd -g

  • 全球安装的tsd

  • cd [你的项目目录]

  • 更改为项目根目录

  • tsd init

  • 除此之外，创建一个tsd.json文件来跟踪已安装的d.ts文件

  • tsd安装时刻-save

  在此之后，我确实在以下时间之后获得了打字稿中的代码 .

  没有进一步测试......

  我现在使用typings而不是tds作为TypeScript定义的管理器 . Tds现已弃用 .

  你可能可以像这样安装moment.d.ts：typings install moment --ambient --save

  回复于 2024-04-26T05:15:27+08:00
• 2

  查看https://coryrylan.com/blog/angular-2-cli-adding-third-party-libraries，了解如何使用systemjs添加第三方库 .

  回复于 2024-04-26T05:15:27+08:00