systemjs.config.js in angular2 - angular, systemjs

Sono nuovo di angular2 e voglio conoscere l'uso di tutti gli oggetti presenti all'interno del file systemjs.config.js.

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: "dist",
main: "main.js",

// 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",
"primeng":                   "npm:primeng"
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: { main: "main.js", defaultExtension: "js" },
api: { defaultExtension: "js" },
rxjs: {defaultExtension: "js"},
"node_modules/primeng": {
format: "cjs",
defaultExtension: "js"
}
}

});

Ad esempio il codice incollato sopra ha oggetti simili percorsi che può essere usato per specificare un alias, allo stesso modo voglio sapere l'uso di carta geografica e tutti gli oggetti interni della mappa, così via.

risposte:

Bene, prima di tutto si indica dove si trova il pacchetto npm, di solito alla radice, quindi:

paths: {
// paths serve as alias
"npm:": "node_modules/"
}

poi dai alias (nomi di scelta rapida) ai pacchetti che userete, in questo caso angolare e alcune librerie di terze parti come rxjs, ...

map: {
// our app is within the app folder
app: "dist",
main: "main.js",

// 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",
"primeng":                   "npm:primeng"
}

Quindi, invece di digitare l'intero percorso quando tuimportare una libreria (ad esempio "npm: @ angular / core / bundles / core.umd.js"), dovrai solo importare l'alias che hai fornito ("@ angular / core"). Quando si importa l'alias, si è certi di importare la libreria corretta.

il "npm:" davanti ai percorsi completi delle librerie, si riferisce al percorso "npm" avviato sopra.