将模块导入Angular2应用程序

Question

我一直在摆弄文件夹结构，似乎无法将模块导入我的Angular2应用程序

这是我正在使用的模块

以下是我尝试在组件中添加模块的方法。

如果有人可以，请指导我如何使用我的模块和YTSearch功能。

应用程序组件.ts

import { Component } from '@angular/core';
import * as YTSearch from 'youtube-api-search';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  API_KEY = "secret"
  constructor(){
    this.state = {
      videos: []
    };
  }
  videoSearch(term){
    YTSearch({
      key: API_KEY,
      term: term
    }, (videos) => {
      this.setState({
        videos: videos,
        selectedVideo: videos[0]
      });
    });
  };
}

系统配置

const map: any = {
  'youtube-api-search': 'vendor/youtube-api-search/index.js'
};

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/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'youtube-api-search/index.js'
    ]
  });
};

Answer 1

我认为您需要在系统配置中将库的npm路径映射到块。即

System.config({
    map: any = {
       'youtube-api-search': 'node_modules/youtube-api-search'
    },
    // .... other props i.e. packages
})

我希望它能起作用。