Как Angular2 разрешить импорт?

Итак, я изучаю Angular2, и использую TypeScript. Итак, я знаю, что SystemJS используется для получения import функций следующим образом:

import { bootstrap } from "angular2/platform/browser";

Это имеет смысл, но я не понимаю, где именно angular2/platform/browser. Я уверен, что это не путь, а какая-то другая вещь, которая используется для имитации путей/пространств имен. Кроме того, глядя на bootstrap здесь, это класс? Или это просто функция. И можно ли импортировать другие вещи?

Любые исключительные ответы получат щедрость от меня.

Ответ 1

На самом деле, здесь есть несколько вещей:

TypeScript файлы передаются в файлы JavaScript. При настройке вашего компилятора TypeScript вы настроите способ перевода import в файл tsconfig.json. Эта конфигурация сообщает использовать SystemJS:
```
{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}
```

Таким образом, файл transpiled 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 предоставит вам элементы, которые вам нужны из других модулей. Соответствующий список основан на import, который вы используете в коде 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 принимает несколько параметров. В предыдущем случае имя модуля не определяется только импортом. Это потому, что мы используем следующую конфигурацию SystemJS в файле HTML. Это говорит о том, что имя модуля соответствует самому файлу:
```
<script>
  System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
  System.import('app/boot')
       .then(null, console.error.bind(console));
</script>
```

Что касается Angular2, то файлы JS, содержащиеся в node_modules/angular2/bundles (например, http.dev.js), содержат несколько модулей в файлах. В этом случае модули регистрируются в SystemJS с помощью функции System.register, но с дополнительным параметром:

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, которая отвечает за разрешение модуля.

SnareChops опубликовал отличный ответ в этом вопросе:

Angular2 и TypeScript импорт node_modules