如何解决Angular2进口？ [英] How does Angular2 resolve imports?

问题描述

所以，我学习Angular2，而我使用的打字稿。所以，我知道SystemJS用于获取这样的导入功能：

So, I am learning Angular2, and I am using TypeScript. So, I do know that SystemJS is used to get the import functionality like this:

从angular2 /平台/浏览器的进口{}引导;

这是有道理的，但是，我不明白究竟哪里 angular2 /平台/浏览器是。我是pretty确保它不是一个路径，但用于其他一些事情来模拟路径/命名空间。另外，在看引导在这里，它是一类？或者是它只是一个功能。而且有可能是要导入其他的东西？

This makes sense, but, I don't understand where exactly angular2/platform/browser is. I am pretty sure it is not a path, but some other thing that is used to simulate paths/namespaces. Also, looking at bootstrap here, is it a class? Or is it just a function. And is it possible for other stuff to be imported?

任何特殊的答案将在收到我的奖金。

Any exceptional answers will receive a bounty from me.

推荐答案

其实，有几件事情需要明白：

In fact, there are several things to understand here:

• 打字稿文件transpiled到JavaScript文件。当配置打字稿的编译器，你将如何配置的导入将在 tsconfig.json 文件翻译。这种配置告诉编译器使用SystemJS：

• TypeScript files are transpiled into JavaScript files. When configuring your TypeScript compiler, you will configure how the import will be translate in your tsconfig.json file. This configuration tells to use SystemJS:

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

本办法transpiled打字稿文件将如下所示：

This way the transpiled TypeScript file will look like the following:

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将为您提供从其他模块需要的元素。相应的列表是基于输入您的打字稿code使用 ...要让上面的列表中，我用这个code：

You can see that the imports are part of the parameters of the System.register function. It's the way SystemJS will provide you the elements you need from other modules. Corresponding list is based on the import you use in the TypeScript code... To have the list above, I used this 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';

的 System.register 函数接受几个参数。在previous情况下，该模块的名称没有定义仅导入。这是因为我们使用SystemJS的以下配置中的HTML文件。这告诉该模块的名称与文件本身：

The System.register function accepts several parameters. In the previous case, the name of the module isn't defined only the import. It's because we use the following configuration of SystemJS in the HTML file. This tells that the name of the module corresponds to the file itself:

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

关于Angular2，包含在 node_modules / angular2 /捆绑的JS文件（例如 http.dev.js ）包含的文件几个模块。在这种情况下，模块被注册到用 System.register 功能SystemJS但有一个附加参数：

Regarding Angular2, the JS files contained in the node_modules/angular2/bundles (for example http.dev.js) contain several modules in files. In this case, there modules are registered into SystemJS using the System.register function but 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;
  (...)
});

要总结，这是基于一个模块系统，像SystemJS，负责模块分辨率上。

To summarize, this is based on a module system like SystemJS that is responsible of module resolution.

SnareChops张贴在这个问题对于一个很好的答案：

SnareChops posted a great answer regarding this in this question:

• Angular2 ＆安培; node_modules
的打字稿进口

• Angular2 & TypeScript importing of node_modules

这篇关于如何解决Angular2进口？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！