将模块导入Angular2 App

维克多

我一直在弄乱文件夹的结构,似乎无法将模块导入到我的Angular2应用中

这是我正在使用模块

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

如果有人可以,请指导我如何使用模块以及如何将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]
      });
    });
  };

}

系统配置

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

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

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

我希望它能起作用。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Angular2模块:如何从另一个模块导入服务

文件'app / hero.ts'不是控制台中的模块错误,在哪里用angular2在目录结构中存储接口文件?

如何将事件从app.component广播到angular2中的路由器出口

嵌套导入模块的angular2使用组件

Angular2从模块导入组件/服务

如何在Angular2 App中使用OverlayModule(angular2-material)

在Angular2中导入模块

Angular2无法识别导入模块中的组件

何时将服务注入Angular 2模块级别和App组件级别

当项目使用CommonJS模块时,将create-react-app导入模块作为ES6模块

在Google App脚本中使用导入的模块

如何在Angular 4.x(Angular Cli)App中导入RequireJS(AMD)模块?

Angular2 app.module

Angular2,找不到模块“ app / models / user”错误

Angular-将本地外部模块添加到App

将模块导入新的create-react-app项目时,Babel / JSX Transpiler生成时出错

如何将Firebase导入到app模块以外的模块中?

找不到与py2app的模块(有条件导入)

Angular2:模块未正确导入

跨Google App Engine中的模块导入

Angular2子模块导入问题

app.bundle.js angular2中意外的令牌导入

Angular2 将存储在变量中的数据从 app.component.ts(父组件)传送到其他组件

在 App 和每个 Module angular 2 中导入 sharedModule

未找到 Angular2/4 模块:错误:无法解析 '..\app' 中的 'three' 解析 '..\app' 中的 'three'

在 Angular2 App 的 Typescript 中从 CSS 获取颜色

Angular 2+,有什么方法可以声明一个模块中的所有组件,然后在 app.module.ts 中导入?

在flask app中导入模块的问题

未找到导入“模块‘app_settings’”