2016-07-19 3 views
4

새 패키지 추가 방법 SystemJS를 사용하고이 system.config.js 파일을 사용하여 npm에서 내 Angular 2 구성 요소로 방금 다운로드 한 패키지를 추가하는 방법. 코드는 초기 패키지에 의해 생성되었습니다. 이 파일의 맵 및 패키지 섹션에 모듈 링크를 넣으려고했지만 작동하지 않습니다. 제가 알고 싶은 것은 어떻게 저의 node_modules에있는 밑줄 js와 같은 라이브러리를 가져 와서이 파일에 입력 할 수 있느냐입니다. 그러면 타이프 팅 된 각도 요소로 파일을 쉽게 가져올 수 있습니다. 당신은 NPM을 사용하여 라이브러리를 설치하고 SystemJS 구성에서 구성해야SystemJs 구성 파일에 모듈을 추가하여 각도로 가져 오는 방법

<script src="node_modules/core-js/client/shim.min.js"></script> 
<script src="node_modules/zone.js/dist/zone.js"></script> 
<script src="node_modules/reflect-metadata/Reflect.js"></script> 
<script src="node_modules/systemjs/dist/system.src.js"></script> 

<script src="systemjs.config.js"></script> <----- 

<script> 
    System.import('app').catch(function(err){ console.error(err); }); 
</script> 

편집

:

var isPublic = typeof window != "undefined"; 

(function(global) { 
    var map = { 
     'app':      'client', // 'dist', 
     '@angular':     (isPublic)? '@angular' : 'node_modules/@angular', 
     '@angular/router':   (isPublic)? '@angular/router' : 'node_modules/@angular/router', 
     'angular2-in-memory-web-api': (isPublic)? 'angular2-in-memory-web-api' : 'node_modules/angular2-in-memory-web-api', 
     'rxjs':      (isPublic)? 'rxjs' : 'node_modules/rxjs', 
     'ng-semantic':    (isPublic)? 'ng-semantic' : 'node_modules/ng-semantic' 
    }; 
    // packages tells the System loader how to load when no filename and/or no extension 
    var packages = { 
     'app':      { main: 'main.js', defaultExtension: 'js' }, 
     'rxjs':      { defaultExtension: 'js' }, 
     'ng2-ace':      { defaultExtension: 'js' }, 
     'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }, 
     'ng-semantic':    { main: 'ng-semantic', defaultExtension: 'js' } 
    }; 
    var ngPackageNames = [ 
     'common', 
     'compiler', 
     'core', 
     'http', 
     'forms', 
     'platform-browser', 
     'platform-browser-dynamic', 
     'router-deprecated', 
     'upgrade', 
     'ng2-ace' 
    ]; 
    // Individual files (~300 requests):x 
    function packIndex(pkgName) { 
     packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' }; 
    } 
    // Bundled (~40 requests): 
    function packUmd(pkgName) { 
     packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' }; 
    } 

    packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' }; 


    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd; 
    // Add package entries for angular packages 
    ngPackageNames.forEach(setPackageConfig); 
    var config = { 
     map: map, 
     packages: packages 
    }; 
    System.config(config); 
})(this); 

답변

3

그냥 기본 HTML 파일 (index.html)에이 파일을 포함한다 :

System.config({ 
    (...) 
    map: { 
    underscore: 'node_modules/underscore/underscore.js' 
    } 
}); 

(Lodash 비슷하지만)이 질문을 참조 : Importing lodash into app.ts file

  • 는 밑줄 라이브러리 typings를 설치하는 것을 잊지 마십시오.

+0

systemjs.config.js가 이미 index.html 파일에 포함되어 있으므로 system.js.config 파일 – BathgateIO

+0

에 밑줄 j를 추가하는 방법을 알고 싶거나 색인에 underscore.js를 추가해야한다고 말하고 싶습니다. html 파일? – BathgateIO

+0

죄송합니다. 나는 당신의 질문을 정확하게 이해하지 못했습니다. 나는 그에 따라 내 대답을 업데이 트 ... –

관련 문제