제 2 자 웹 라이브러리에 제 3 자 라이브러리 포함

Question

부트 스트랩, jQuery, ng2-oauth2, Wijmo 등과 같은 제 3 자 라이브러리를 사용하여 작은 프로젝트를 만들었습니다. webpack을 사용하여 프로젝트를 번들로 제공하기로했습니다. 아무도 내 webpack 구현에 제 3 자 라이브러리를 포함시키는 방법을 알려줄 수 있습니까?

// Angular 

import '@angular/platform-browser'; 
import '@angular/platform-browser-dynamic'; 
import '@angular/core'; 
import '@angular/common'; 
import '@angular/http'; 
import '@angular/router'; 
// RxJS 
import 'rxjs'; 
// Other vendors for example jQuery, Lodash or Bootstrap 
// You can import js, ts, css, sass, ... 
import 'bootstrap/dist/css/bootstrap.min.css'; 
import 'bootstrap-social/bootstrap-social.css'; 
import 'font-awesome/css/font-awesome.min.css'; 
import 'angular2-toaster/toaster.css'; 


import 'jquery/dist/jquery.min.js'; 
import 'bootstrap/dist/js/bootstrap.min.js';` 

이 가져올 수있는 올바른 방법인가 :

나는 vendor.ts이 같은 가져온? 나는이 같은 jQuery를 사용하고

: jQuery를 동적 스크립트 내 바닥 글 섹션을 정렬하는 데 사용됩니다

import { Injectable } from '@angular/core'; 
declare var jQuery: any; 

@Injectable() 
export class FooterService { 

    //Get getFooterAlign Service 
    getFooterAlign(): any { 
     var getHeight = jQuery(window).height() - 225; 
     if (jQuery(".body-container").height() < getHeight) { 
      jQuery(".logInWrapper, .contentWrapper, .signupWrapper").css("height", jQuery(window).height() - 232); 
      jQuery(window).resize(function() { 
       jQuery(".logInWrapper, .contentWrapper").css("height", jQuery(window).height() - 225); 
      }); 
     } 
     else { 
      jQuery(".logInWrapper, .contentWrapper, .signupWrapper").css("height", jQuery(".body-container").height()); 
      jQuery(window).resize(function() { 
       jQuery(".logInWrapper, .contentWrapper").css("height", jQuery(".body-container").height()); 
      }); 
     } 
    } 

} 

는이 오류를 보여줍니다.

코드 작성시 실수로 어떤 실수를 저 지르셨습니까?

U 직접 vendor.ts 파일에서 가져올 수 있습니다 부트 스트랩 및 기타 타사 라이브러리에 대한

Answer 1

after researching i found some solution for Jquery include below code in webpack.config.js file is working fine for me: 

    module.exports = { 
     resolve: { 
      extensions: ['.ts', '.js'], 
      alias: { 
       jquery: "jquery/src/jquery" 
      } 
     } 

---------- 

    plugins: [ 
      new webpack.ProvidePlugin({ 
       jQuery: 'jquery', 
       $: 'jquery', 
       jquery: 'jquery' 
      }) 
     ] 

:

import 'bootstrap/dist/css/bootstrap.min.css'; 
import 'bootstrap-social/bootstrap-social.css'; 
import 'font-awesome/css/font-awesome.min.css'; 
import 'angular2-toaster/toaster.css'; 

import 'bootstrap/dist/js/bootstrap.min.js'; 
import 'angular2-jwt/angular2-jwt.js'; 
import '@ng-idle/core/bundles/core.umd.js'; 
import 'ng2-recaptcha'; 
import 'ng2-ckeditor'; 
import 'angular2-toaster/bundles/angular2-toaster.umd.js'; 
import 'ng2-bootstrap'; 
import 'crypto-js/crypto-js.js';