将模块导入Angular2 App-Java 学习之路

我一直在搞乱文件夹结构，我似乎无法将模块导入我的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]
      });
    });
  };

}

system-config-ts

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'
    ]
  });
};

1 回答

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

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

我希望它有效 .

回复于 2024-05-02T11:31:30+08:00

将模块导入Angular2 App

1 回答

相关问题