각도 CLI 외부 라이브러리를 포함하는 방법

Question

내 프로젝트에 내 외부 라이브러리를 포함하려고하고 있는데 here의 단계를 수행했습니다.

나는 index.html에 CDN을 포함 할 수 있음을 알고 있습니다. 하지만 타이프 스크립트로 어떻게 할 수 있는지 알고 싶습니다.

내 moment 라이브러리를 위키에 포함해도 아무런 문제가 없지만 내 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 및 부트 스트랩에 대한 입력을 설치해야 할 수 있습니다. 다른 옵션은 사용하려는 component/typescript 파일에서 any로 선언합니다.

는 jQuery를 실행을 포함합니다 :

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

하고 각-CLI-build.js에서, 공급 업체 NPMS가 polyfills 추가 외에 :

npm install jquery 

하고 시스템 config.ts에서

too

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입니다.)

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

하면 다음과 유사한 뭔가해야 할 수도 있습니다 LIB 가져올 수 있도록 : 물론 해킹 위에

declare var firebase: any; 

declare module 'firebase' { 
    export = firebase; 
} 

을하지만 중간에 필요할 수 있으므로 typings이되지 않을 수 있습니다 쉽게 구할 수있다. 위의 예제에서 firebase에 대한 타이핑은 SDK 2.x 용 이었기 때문에 3 용으로 사용할 수 없었습니다. 위의 해킹이 필요했습니다.

참고 : 다른 사람이 ver에 대한 입력을했음을 알았습니다. 3. 당신이 더 나은 경험을 위해 타이핑을 항상 시도해야한다는 요지가 있지만 때로는 상기가 필요할 수도 있습니다.