When dealing with TypeScript files, they are transformed into JavaScript files through transpilation. In the tsconfig.json file, you specify how the import statements should be handled by your TypeScript compiler, particularly when utilizing SystemJS:
{
"compilerOptions": {
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}
The resulting transpiled TypeScript file resembles this structure:
System.register(['angular2/platform/browser', 'angular2/router', 'angular2/http', 'angular2/core', './app.component', './services/companies.service'], function(exports_1) {
var browser_1, router_1, http_1, core_1, router_2, app_component_1, companies_service_1;
return {
(...)
}
});
In this setup, imports are specified as parameters within the System.register function, facilitating the access to elements from different modules. The list of imports is determined by the import statements in the TypeScript code... The provided list was generated using the following code:
import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
import {provide} from 'angular2/core';
import {LocationStrategy, Location, HashLocationStrategy } from 'angular2/router';
import {AppComponent} from './app.component';
import {CompanyService} from './services/companies.service';
The System.register function accommodates multiple parameters. In the mentioned instance, only the import is specified while omitting the module name. This approach is due to the SystemJS configuration within the HTML file, where the module name aligns with the file name itself:
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
Concerning Angular2, the JS files found in node_modules/angular2/bundles (such as http.dev.js) contain various modules spread across files. These modules are integrated into SystemJS using the System.register function with an additional parameter:
System.register("angular2/http", ["angular2/core", "angular2/src/http/http", "angular2/src/http/backends/xhr_backend", "angular2/src/http/backends/jsonp_backend", "angular2/src/http/backends/browser_xhr", "angular2/src/http/backends/browser_jsonp", "angular2/src/http/base_request_options", "angular2/src/http/base_response_options", "angular2/src/http/static_request", "angular2/src/http/static_response", "angular2/src/http/interfaces", "angular2/src/http/backends/browser_xhr", "angular2/src/http/base_request_options", "angular2/src/http/base_response_options", "angular2/src/http/backends/xhr_backend", "angular2/src/http/backends/jsonp_backend", "angular2/src/http/http", "angular2/src/http/headers", "angular2/src/http/enums", "angular2/src/http/url_search_params"], true, function(require, exports, module) {
var global = System.global,
__define = global.define;
global.define = undefined;
(...)
});
In essence, this process revolves around a module system like SystemJS that handles module resolution.
For more insights on this topic, check out SnareChops' detailed explanation in this discussion: