각도 4, Webpack 2, 동적으로 스크립트로드

Question

프로젝트에서 Webpack 2로 Angular 4를 사용 중입니다.

ngOnInit 중에 일부 스크립트를로드하려고 시도 중 일부 문제가 발생했습니다.

문제 1)

나는이 내 ngOnInit 내에서 다음 코드 : 나는이 작업을 수행 할 때

System.import(`../../node_modules/jquery/dist/jquery.js`); 
System.import(`../../node_modules/jquery-validation/dist/jquery.validate.js`); 
System.import(`../../node_modules/jquery-validation/dist/additional-methods.js`); 
System.import(`assets/js/regular-expressions.js`); 

는 모든 자산로드 표시하지만 난의 오류 얻을 :

를

Uncaught (in promise): ReferenceError: $ is not defined

$를 jQuery 파일에 정의해야합니다. regular-expressions.js 파일이 jQuery가로드되었는지 인식하지 못하는 이유는 무엇입니까?

문제 2)

는 궁극적으로, 나는) 동적으로로드 그들은 모든 페이지에 필요하지 않은로 (스크립트를로드해야합니다. 행동에 차이가 왜 이해하고 있지 않다

let script = 'assets/js/' + scripts[i].replace(/^\/|\/$/g, ''); 
/* The following two lines output the same exact text to the console */ 
console.log('assets/js/regular-expressions.js'); 
console.log('' + script + ''); 

/* The following hard-coded line works (as in the script is loaded, raising the $ issue mentioned above */ 
System.import('assets/js/regular-expressions.js'); 

/* The following line with a variable throws an error of "Cannot find module 'assets/js/regular-expressions.js'." */ 
System.import('' + script + ''); 

:

나는 다음과 같은 코드가 있습니다. 특히 System.import에 전달되는 값이 완전히 동일하면.

Answer 1

나는 이것이 웹팩의 꽤 큰 제한이라고 생각해 냈습니다. 나는 tree-shaking 등의 아이디어를 얻었지만 WebPack은 개발자가 런타임에 스크립트를 로딩 할 수있는 OPTION을 허용해야한다. 이 jQuery를에 응용 프로그램 전체 의존도를 필요로하기 때문에 https://stackoverflow.com/a/37844389/3389346

이 가장 큰되지 않습니다 :

는 지금은이 방법을 사용하여 끝났다. WebPack 사람들이 개발자에게 스크립트를 일회로드 할 수있는 옵션을 허용하기로 결정했다면 다시 돌아가서 수정 해 보겠습니다.