Angular 2
[email protected]β10으로 제 3 자 플러그인 설치하기

비고

 'lodash': {
   format: 'cjs',
   defaultExtension: 'js',
   main: 'index.js'
 }

 'moment': {
   main: 'moment.js'
 }

angular-cli 프로젝트에 jquery 라이브러리 추가하기

1. npm을 통해 jquery를 설치하십시오.

 npm install jquery --save 

라이브러리에 대한 입력을 설치하십시오.

라이브러리에 입력을 추가하려면 다음을 수행하십시오.

typings install jquery --global --save

2. angular-cli-build.js 파일에 jquery를 vendorNpmFiles 배열에 추가합니다.

   이것은 빌드 시스템이 파일을 선택하기 위해 필요합니다. 설정 후 angular-cli-build.js는 다음과 같아야합니다.

node_modules 탐색하고 공급 업체 폴더에 추가 할 파일 및 폴더를 찾습니다.

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      // ...
      'jquery/dist/*.js'


    ]
  });
};

3. jquery를 찾을 위치를 알 수 있도록 SystemJS 매핑을 구성하십시오.

   SystemJS 구성은 system-config.ts에 있으며 사용자 정의 구성이 완료되면 관련 섹션은 다음과 같아야합니다.

/** Map relative paths to URLs. */
const map: any = {
  'jquery': 'vendor/jquery'
};

/** User packages configuration. */
const packages: any = {
            
// no need to add anything here for jquery

};

4. src / index.html이 행 추가

<script src="vendor/jquery/dist/jquery.min.js" type="text/javascript"></script>

다른 옵션은 다음과 같습니다.

<script src="vendor/jquery/dist/jquery.js" type="text/javascript"></script>

또는

<script src="/vendor/jquery/dist/jquery.slim.js" type="text/javascript"></script>

과

<script src="/vendor/jquery/dist/jquery.slim.min.js" type="text/javascript"></script>

5. 프로젝트 소스 파일에서 jquery 라이브러리 가져 오기 및 사용 :

   소스 .ts 파일에서 jquery 라이브러리를 다음과 같이 가져옵니다.

declare var $:any;

@Component({
})
export class YourComponent {
  ngOnInit() {
    $.("button").click(function(){
       // now you can DO, what ever you want 
     });
     console.log();
  }
}

단계를 올바르게 따라했다면 프로젝트에서 jquery 라이브러리가 작동해야합니다. 즐겨!

입력이없는 타사 라이브러리를 추가하십시오.

공지 사항, 이것은 1.0.0-beta.10 버전까지 각도 -cli에만 해당됩니다!

일부 라이브러리 또는 플러그인에는 타이핑이 없을 수 있습니다. 이 매개 변수가 없으면 TypeScript에서 형식을 검사 할 수 없으므로 컴파일 오류가 발생합니다. 이 라이브러리는 계속 사용할 수 있지만 가져온 모듈과 다르게 사용됩니다.

1. 페이지에 라이브러리에 대한 스크립트 참조 포함 ( index.html )

   <script src="//cdn.somewhe.re/lib.min.js" type="text/javascript"></script>
   <script src="/local/path/to/lib.min.js" type="text/javascript"></script>
   

   • 이 스크립트는 글로벌 (예 : THREE , mapbox , $ 등)을 추가하거나 글로벌

2. 이것들이 필요한 구성 요소에서 lib를 사용하는 전역 이름과 일치하는 변수를 초기화하려면 declare 를 사용합니다. 이를 통해 TypeScript가 이미 초기화되었음을 알 수 있습니다. ¹

   declare var <globalname>: any;
   

   일부 libs는 응용 프로그램에서 액세스 할 수 있도록 확장해야 할 window 연결합니다.

   interface WindowIntercom extends Window { Intercom: any; }
   declare var window: WindowIntercom;
   

3. 필요에 따라 구성 요소에서 lib를 사용하십시오.

   @Component { ... }
   export class AppComponent implements AfterViewInit {
       ...
       ngAfterViewInit() {
           var geometry = new THREE.BoxGeometry( 1, 1, 1 );
           window.Intercom('boot', { ... }
       }
   }
   

   • 참고 : 일부 libs는 DOM과 상호 작용할 수 있으며 적절한 구성 요소 수명주기 방법에서 사용해야합니다.