2016-08-05 115 views
1

我已經與文件夾結構亂搞,我似乎無法能夠導入模塊到我Angular2應用導入模塊插入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' 
    ] 
    }); 
}; 
+0

錯誤信息是什麼?你是否將你的'moduleResolution'標誌設置爲'classic'? – candidJ

+0

如果我這樣做,我會得到更多關於其他模塊沒有被發現的錯誤。我有moduleResolution設置爲「節點」。我的錯誤是「找不到模塊'youtube-api-search'。」 –

回答

0

我認爲您需要將庫的npm路徑映射到系統配置中的塊。 即

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

我希望它有效。