如何使用 SystemJS 和这个 system.config.js 文件将我刚刚从 npm 下载的新包添加到我的 Angular 2 组件中。下面的代码是由入门包为我生成的。 我试图在该文件的映射和包部分中放置指向模块的链接,但它似乎不起作用。我想知道的是如何获取位于我的 node_modules 中的诸如 underscore js 之类的库并将其输入到该文件中,以便我可以轻松地将文件导入到我的 typescript Angular 组件中。
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
) 中即可:
<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 配置中对其进行配置:
System.config({
(...)
map: {
underscore: 'node_modules/underscore/underscore.js'
}
});
查看此问题(类似但针对 Lodash):
不要忘记为 Underscore 库安装类型。
关于javascript - 如何将模块添加到我的 SystemJs 配置文件中,以便我可以以 Angular 导入它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38465896/