试图在我的角度2应用程序中使用此库

时间:2016-11-20 01:33:01

标签: angular systemjs

我试图找出如何将this库导入我的angular 2应用程序。

我尝试了很多东西,但似乎无法让它发挥作用。下面是我的部分systemjs.config.js

System.config({
    paths: {
        // paths serve as alias
        'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
        // our app is within the app folder
        app: 'app',
        // angular bundles
        .... // Removed to conserve space
        // other libraries
        'rxjs':                      'npm:rxjs',
        'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
        'youtube-dl':                'npm:youtube-dl'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
        app: {
            main: './main.js',
            defaultExtension: 'js'
        },
        rxjs: {
            defaultExtension: 'js'
        },
        'angular-in-memory-web-api': {
            main: './index.js',
            defaultExtension: 'js'
        },
        'youtube-dl': {
            main: './lib/youtube-dl.js',
            defaultExtension: 'js'
        }
    }

这就是我尝试将其导入我的video.service.ts

的方法
import * as youtubedl from 'youtube-dl';

我似乎总是导致此错误

  

app / service / video.service.ts(2,28):错误TS2307:找不到模块' youtube-dl'。

以下是我的package.json

{
    ...,
    ...,
    ...,
    "dependencies": {
        "@angular/common": "~2.0.1",
        "@angular/compiler": "~2.0.1",
        "@angular/core": "~2.0.1",
        "@angular/forms": "~2.0.1",
        "@angular/http": "~2.0.1",
        "@angular/platform-browser": "~2.0.1",
        "@angular/platform-browser-dynamic": "~2.0.1",
        "@angular/router": "~3.0.1",
        "@angular/upgrade": "~2.0.1",

        "angular-in-memory-web-api": "~0.1.1",
        "core-js": "^2.4.1",
        "reflect-metadata": "^0.1.8",
        "rxjs": "5.0.0-beta.12",
        "systemjs": "0.19.39",
        "zone.js": "^0.6.25",

        "bootstrap": "^4.0.0-alpha.2",
        "font-awesome": "^4.6.1",
        "youtube-dl": "1.11.1"
      },
      "devDependencies": {
          "concurrently": "^3.0.0",
          "electron": "1.4.2",
          "typescript": "^2.0.3",
          "typings":"^1.4.0"
      }
}

是否有一个npm ls并确实列出了youtube-dl@1.11.1

1 个答案:

答案 0 :(得分:0)

错误消息说您需要在app模块中导入youtube模块。当它找不到该模块时显示错误

确保在app.module.ts导入列表中的appModle中添加了youtube模块

@NgModule({
  bootstrap: [App],
  declarations: [
    App
  ],
  imports: [ // import Angular's modules
    BrowserModule,
    HttpModule,
    routing
    youtube-...  //your youtube module
  ],