CODEWITHSUNDEEP
angulartypescript
Victor Le
Victor Le

Reputation: 1788

Import a module into Angular2 App

I've been messing around with the folder structure and I can't seem to be able to import a module into my Angular2 App

This is the module I'm using

Below are the ways I tried to add the module inside my component.

If someone can please just guide me on how I can use my module and use YTSearch as a function.

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

Upvotes: 1

Views: 1516

Answers (1)

koech
koech

Reputation: 606

I think you need to map the npm path of your library to the block in system configurations. i.e. 

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

I hope it works.

Upvotes: 1

Related Questions