Question

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

这是module我使用

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

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

app.component.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]
      });
    });
  };

}

系统配置-TS

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

角-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
})

我希望它有效。

将模块导入Angular2 App

1 个答案: