如何将模块添加到我的SystemJs配置文件中，以便我可以将其导入angular [英] How to add a module to my SystemJs config file so I can import it in angular

问题描述

如何使用SystemJS和此system.config.js文件将刚从npm下载的新软件包添加到Angular 2组件中.下面的代码是由一个入门包为我生成的. 我尝试将指向模块的链接放在此文件的映射和包"部分中，但它似乎不起作用.我想知道的是如何获取位于node_modules中的下划线js之类的库并将其输入到此文件中，以便可以轻松地将文件导入我的打字稿角度组件中.

How do add new packages I just downloaded from npm to my Angular 2 components using SystemJS and using this system.config.js file. The code bellow was generated for me by a starter package. I have tried to put links to the modules in the map and packages section of this file but it doesn't seem to work. All I want to know is how can I take a library such as underscore js located in my node_modules and input it into this file so I can easily import the file in my typescript angular components.

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);

推荐答案

只需将此文件包含到您的主HTML文件(index.html)中即可:

Just include this file into your main HTML file (index.html):

<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>

修改

您需要使用npm安装该库并在SystemJS配置中对其进行配置:

You need to install the library using npm and configure it within the SystemJS configuration:

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

请参阅以下问题(与Lodash类似):

See this question (similar but for Lodash):

• 将lodash导入app.ts文件

不要忘记为Underscore库安装类型.

Don't forget to install typings for the Underscore library.

这篇关于如何将模块添加到我的SystemJs配置文件中，以便我可以将其导入angular的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！