typescript – Angular2如何解析导入？

> TypeScript文件被转换为JavaScript文件.配置TypeScript编译器时,您将配置如何在tsconfig.json文件中转换导入.此配置告诉使用SystemJS：

{
  "compilerOptions": {
    "target": "ES5","module": "system","moduleResolution": "node","sourceMap": true,"emitDecoratorMetadata": true,"experimentalDecorators": true,"removeComments": false,"noImplicitAny": false
  },"exclude": [
    "node_modules"
  ]
}

>这样,转换后的TypeScript文件将如下所示：

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 {
    (...)
  }
});

您可以看到导入是System.register函数的参数的一部分.这是SystemJS为您提供其他模块所需元素的方式.相应的列表基于您在TypeScript代码中使用的导入…要获得上面的列表,我使用了以下代码：

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';

> System.register函数接受多个参数.在前一种情况下,模块的名称不仅定义导入.这是因为我们在HTML文件中使用了SystemJS的以下配置.这告诉模块的名称对应于文件本身：

<script>
  System.config({
    packages: {        
      app: {
        format: 'register',defaultExtension: 'js'
      }
    }
  });
  System.import('app/boot')
       .then(null,console.error.bind(console));
</script>

>关于Angular2,node_modules / angular2 / bundles中包含的JS文件(例如http.dev.js)在文件中包含多个模块.在这种情况下,使用System.register函数将模块注册到SystemJS中,但附加参数：

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/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;
  (...)
});

总而言之,这是基于像SystemJS这样负责模块解析的模块系统.

SnareChops在这个问题上发表了一个很好的答案：

> Angular2 & TypeScript importing of node_modules