首页 文章

如何使用Angular CLI将d3或任何模块添加到角度2？

提问于
浏览 次
0

嗨，我是角度2的新手 . 我正在尝试使用角度cli将d3库注入角度2 . 我使用npm install d3安装了d3 . 我按照链接

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

我按照步骤

`我的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)',
  '@angular2-material/**/*.+(js|css)',
  'd3/**/*.js',
  'ng2-material/**/*.+(js|css)'
]
});
};

我的index.html

System.config({
    map:{
      "d3Lib":"vendor/d3"
    },
    packages:{
      'd3Lib':{
        defaultExtension:'js',
        map:{
          './d3':'./d3.js'
        }
      }
    }
  });

我加入了我的组件 .

当我试图运行服务器时，它会抛出d3 . 找不到模块 . 如果某个机构可以提供帮助，那就太棒了

angularjs d3.js angular

4 回答

  • 3

    从未尝试使用 angular2 ，但我将 d3js 安装到我的 ionic2 项目中，如下所示：

    npm install @types/d3 --save

    然后你可以立即在你的组件中使用它：

    import * as d3 from 'd3';
    回复于
  • 1

    我的system.config

    System.config({
    map:{
      '@angular2-material':'vendor/@angular2-material'
    },
    packages:{
      '@angular2-material':{
        map:{
          './button':'./button/button.js',
          './card':'./card/card.js',
          './checkbox':'./checkbox/checkbox.js',
          './input':'./input/input.js',
          './progress-circle':'./progress-circle/progress-circle.js',
          './sidenav':'./sidenav/sidenav.js',
          './toolbar':'./toolbar/toolbar.js'
        }
      }
    }
  });

  System.config({
    map:{
      "d3Lib":"vendor/d3"
    },
    packages:{
      'd3Lib':{
        defaultExtension:'js',
        map:{
          './d3':'./d3.js'
        }
      }
    }
  });
  System.import('system-config.js').then(function () {
    System.import('main');
  }).catch(console.error.bind(console));
    回复于
  • 0

    在angular-cli中添加为我工作的第三方库的步骤

    从键入下载d3打字并将其粘贴到主文件夹和浏览器文件夹中，并在输入文件夹中 .

    在相应的index.ts文件中添加引用 .

    在system.config（我的system.config文件）中添加映射 .

    <script>
  System.config({
    map:{
      '@angular2-material' : 'vendor/@angular2-material',
      "d3" : "vendor/d3/d3.js",
      "lodash" : "vendor/lodash/lodash.js",

      "@angular/platform-browser": "vendor/@angular/platform-browser",
      '@angular/core/src/facade': 'vendor/@angular/core/src/facade',
      //'@angular/platform-browser-dynamic': 'vendor/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js',
      'angular2-modal': 'vendor/angular2-modal',
      'angular2-modal/platform-browser': 'vendor/angular2-modal/platform-browser'



    },
    packages:{
      '@angular2-material':{
        map:{
          './button':'./button/button.js',
          './card':'./card/card.js',
          './checkbox':'./checkbox/checkbox.js',
          './input':'./input/input.js',
          './progress-circle':'./progress-circle/progress-circle.js',
          './sidenav':'./sidenav/sidenav.js',
          './toolbar':'./toolbar/toolbar.js',
          './icon':'./icon/icon.js'
        }
      },
      "d3": {
        "defaultExtension": "js"
      },
      "lodash": {
        "defaultExtension": "js"
      },
       '@angular2-material/core': {
          defaultExtension: 'js',
          format: 'cjs',
          main: 'core'
        },
        '@angular2-material/checkbox': {
          defaultExtension: 'js',
          format: 'cjs',
          main: 'checkbox'
        },
        '@angular2-material/button': {
          defaultExtension: 'js',
          format: 'cjs',
          main: 'button'
        },
        '@angular2-material/icon': {
          defaultExtension: 'js',
          format: 'cjs',
          main: 'icon'
        },
        '@angular2-material/sidenav': {
          defaultExtension: 'js',
          format: 'cjs',
          main: 'sidenav'
        },
        'vendor/angular2-modal': {main: 'index.js', defaultExtension: 'js'},
        'vendor/angular2-modal/platform-browser': {main: 'index.js', defaultExtension: 'js'},
        'vendor/angular2-modal/plugins/bootstrap': {main: 'index.js', defaultExtension: 'js'},
        'vendor/angular2-modal/plugins/vex': {main: 'index.js', defaultExtension: 'js'},
        'vendor/angular2-modal/plugins/js-native': {main: 'index.js', defaultExtension: 'js'},
        '@angular/core/src/facade': {defaultExtension: 'js'}


    }
  });
  System.import('system-config.js').then(function () {
    System.import('main');
  }).catch(console.error.bind(console));
</script>

    将其导入相应的组件中

    import * as d3 from 'd3';

    遵循相同的步骤为lodash井工作 . 谢谢

    回复于
  • 0

    以下是如何使用 angular-cli 正确地将 d3 添加到项目中：

    npm install d3 --save

    angular-cli-build.js

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

    system-config.js

    map['d3'] = 'vendor/d3/build';

packages['d3'] = {
  main: 'd3',
  format: 'global' 
};

    app.component.ts

    import * as d3 from 'd3';

    在https://github.com/benshope/focus查看几个完整的工作进口

    回复于

相关问题