¿Qué hace var map, paquetes, var config? Y también explican todas las propiedades de configuración para el mapa y el objeto del paquete. ¿Hay alguna documentación para la configuración disponible?
Aquí está mi archivo de configuración del sistema
/** * System configuration for Angular samples * Adjust as necessary for your application needs. */ (function (global) { System.config({ paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { // our app is within the app folder app: 'app', // angular bundles '@angular/core': 'npm:@angular/core/bundles/core.umd.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', // other libraries 'rxjs': 'npm:rxjs', 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js', 'fscopy': 'npm:fs-extra/lib/copy/index.js', 'file-system': 'npm:file-system/file-system.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { app: { main: './main.js', defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, fs: { defaultExtension: 'js' } } }); })(this);Me gustaría hacer un seguimiento de la respuesta de @Sajeetharan dando un ejemplo detallado. Así que imagina que quieres instalar un nuevo módulo, usaremos angular2-highcharts como ejemplo. Como referencia, aquí está el documento para hightcharts .
como sabe, comience ejecutando su comando npm install angular2-highcharts --save
una. Ahora verá el módulo instalado en su carpeta node_modules
Bien, ha instalado un nuevo módulo para usar, ahora debe decirle a su aplicación dónde encontrar este nuevo módulo y cómo cargarlo. Aquí es donde entra en juego systemjs.config.js .
una. Primero necesita " map " o decirle a su aplicación dónde encontrar este nuevo módulo. en este caso se ve así... 'angular2-highcharts': 'node_modules/angular2-highcharts',
'angular2-highcharts': esto significa que si hace referencia a angular2-highcharts, use la siguiente ruta de 'node_modules/angular2-highcharts' b. La siguiente es la parte del Package . esto ahora dice, está bien, ha mapeado dónde encontrar este nuevo módulo, ahora, ¿qué dentro de esta nueva carpeta de módulo le gustaría ejecutar? en este caso es `index.js' y lo definimos así...
angular2-highcharts': { main: './index.js', defaultExtension: 'js' }Ahora que ha instalado correctamente el módulo y lo ha referenciado en su systemjs.config.js, puede llamar a la importación en su componente 'app.modules' y en cualquier componente que desee.
Editar
se olvidó de explicar config . La configuración es solo una forma de definir carpetas o archivos con un valor de mano abreviado. En su configuración npm: node_modules , básicamente dice que puede abreviar node_modules con npm. esto se muestra en sus declaraciones de mapeo como... 'npm:@angular/core/bundles/core.umd.js' en lugar de escribir node_modules/@angular/core/bundles/core.umd.js
system.config.js es el que permite cargar módulos (módulos de nodo) compilados usando el compilador de TypeScript. El mapa se refiere al nombre de los módulos en el archivo JS que contiene el código JavaScript.
Si está utilizando Angular-Cli, no debería necesitar un systemjs.config. Todo se debe cuidar por angular-cli.