Angular CLI外部ライブラリを含める方法

Question

自分のプロジェクトに外部ライブラリを組み込もうとしていますが、私はhereの手順に従っています。

私はindex.htmlにCDNを含めることができます。しかし、私はタイプコピーでどのようにできるのか知りたいです。

私はmomentライブラリをwikiに含めても問題はありませんが、私にはbootstrapとjqueryを追加して問題があります。

システムconfig.ts

const map: any = { 
    'moment': 'vendor/moment/moment.js', 
    'jquery': 'vendor/jquery/dist/jquery.js', 
    'bootstrap': 'vendor/bootstrap/dist/js/bootstrap.js' 
}; 

/** User packages configuration. */ 
const packages: any = { 
    'moment':{ 
    format: 'cjs' 
    }, 
    'jquery':{ 
    format: 'cjs', 
    defaultExtension: 'js' 
    }, 
    'bootstrap':{ 
    format: 'cjs', 
    defaultExtension: '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)', 
     'moment/moment.js', 
     'jquery/dist/jquery.js', 
     'bootstrap/dist/js/bootstrap.js' 
    ], 
    sassCompiler: { 
     includePaths: [ 
     'src/app/styles' 
     ] 
    } 
    }); 
}; 

app.component.ts

import { Component } from '@angular/core'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 
import * as moment from 'moment'; 
import * as jquery from 'jquery'; 
// import * as bootstrap from 'bootstrap'; 

@Component({ 
    moduleId: module.id, 
    selector: 'app-root', 
    templateUrl: 'app.component.html', 
    styleUrls: ['app.component.css'], 
    providers: [], 
    directives: [ROUTER_DIRECTIVES] 
}) 

export class AppComponent { 
    title = moment().format().toString(); 
} 

私がjqueryとbootstrapをコメントアウトすると、アプリは正常に動作します。ここにエラーメッセージがあります。

Build error 

The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with: 
Error: Typescript found the following errors: 
    /home/vadi/dev/orbits/x-orbit/tmp/broccoli_type_script_compiler-input_base_path-p2RtqzmR.tmp/0/src/app/app.component.ts (4, 25): Cannot find module 'jquery'. 
    at BroccoliTypeScriptCompiler._doIncrementalBuild (/home/vadi/dev/orbits/x-orbit/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:120:19) 
    at BroccoliTypeScriptCompiler.build (/home/vadi/dev/orbits/x-orbit/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:43:10) 
    at /home/vadi/dev/orbits/x-orbit/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:152:21 
    at lib$rsvp$$internal$$tryCatch (/home/vadi/dev/orbits/x-orbit/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1036:16) 
    at lib$rsvp$$internal$$invokeCallback (/home/vadi/dev/orbits/x-orbit/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1048:17) 
    at lib$rsvp$$internal$$publish (/home/vadi/dev/orbits/x-orbit/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1019:11) 
    at lib$rsvp$asap$$flush (/home/vadi/dev/orbits/x-orbit/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1198:9) 
    at _combinedTickCallback (internal/process/next_tick.js:67:7) 
    at process._tickCallback (internal/process/next_tick.js:98:9) 

したがって、JSファイルだけでなく、angular-cliプロジェクトのCSSにも、どのような方法が含まれていますか？

ご迷惑をおかけして申し訳ございません。

Answer 1

インポートを使用する予定がある場合は、jQueryとブートストラップの入力を行う必要があります。もう1つのオプションは、使用しようとしているコンポーネント/ typescriptファイル内の任意のものとして宣言します。

npm install jquery 

して、システム・config.ts中：

const map: any = { 
    'jquery': 'vendor/jquery' 
}; 

とあなたの角度-CLI-build.jsで、ベンダーのNPMががpolyfillsを追加する以外にjQueryを実行するには含まれ

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)', 
     'jquery/**/*.js' 
    ], 
    polyfills:[ 
     'vendor/jquery/dist/jquery.min.js', 
     'vendor/es6-shim/es6-shim.js', 
     'vendor/reflect-metadata/Reflect.js', 
     'vendor/systemjs/dist/system.src.js', 
     'vendor/zone.js/dist/zone.js', 
    ] 

ブートストラップで同じことを繰り返してください。アプリケーションのどこでもjqueryを使用するには、importではなくanyを宣言します。

declare var $:any; 

Answer 2

上記の回答は正しいですが、以下の髪がより完全であることがあります。場合によっては、これで十分ではありません。

あなたのsystem-config.tsには、グローバルに依存関係があるメタを追加する必要があります。さもなければ、jQueryが定義されていないなどの特定の変数についての苦情を受け取ることがあります。

考えてみましょう（ここで「その他」はjQueryに依存するlibです）。あなたは次のような何かをしなければならないことがあり、このLIBをインポートできるようにするには

/** User meta config */ 
const meta: any = { 
    'jquery': { 
    format: 'global', 
    exports: 'jQuery' 
    }, 
    'other': { 
    format: 'global', 
    exports: 'other', 
    deps: ['jquery'] 
    } 
}; 

：

declare var firebase: any; 

declare module 'firebase' { 
    export = firebase; 
} 

のコースの上にはハックですが、タイピングではないかもしれないとして、中間に必要かもしれません容易に利用できる。上記の例では、firebaseのタイピングはSDK 2.xのためのものでしたので、3のために使用できませんでした。したがって、上記のハックの必要性があります。

注：：サイドポイントとして、誰かがverのタイピングを行ったことに気付きました。 3.より良い経験のためにタイピングをいつも始めるべきですが、時には上記が必要になることがあります。