Config Map package name prefixed with namespace + colon

Question

I see an example in Angular2 startup project's System.Config.JS, it likes below:

(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'
    },

My question is: map seems using config path's alias like 'npm', and suffixed it with colon ":", then prepend this string to the package file name, like npm:@angular/forms/bundles/forms.umd.js in the example.

However I looked up over the SystemJS's config API and RequireJS's config, but I did not find any documentation for this usage. Has anyone ever worked on this and can provide some useful link or documentation for that. Thank you in advance.

Answer 1

The relevant part of the documentation is this: https://github.com/systemjs/systemjs/blob/master/docs/config-api.md#paths

The doc says:

Paths allow creating mappings that apply after map configuration

This is what Angular2 config does. The colon ":" has no special meaning, it's just to make it more obvious that all the modules come from npm.

For example when you import module @angular/core:

1. The @angular/core is mapped to npm:@angular/core/bundles/core.umd.js thanks to the map option.

2. npm:@angular/core/bundles/core.umd.js is mapped to node_modules/@angular/core/bundles/core.umd.js where the npm: is replaced with node_modules/ thanks to the paths option.

You could use any other string than npm: it I'd work the same way.