Как вы видите живой пример из Angular2 Quick Start, вы обнаружите, что главная страница Angular2, то есть index.html, использует SystemJS для запуска приложения Angular2.

index.html

<script src="systemjs.config.js"></script><script>
  System.import('app').catch(function(err){ console.error(err); });
</script>

System.import('app') запускает приложение, которое влияет на <my-app>Loading...</my-app>

Итак, для запуска приложения используется systemjs. Тогда что такое systemjs?

системные

Как упоминалось в README, systemjs — это универсальный загрузчик динамических модулей, он загружает в браузер следующее:

  • модули es6
  • AMD
  • CommonJS
  • глобальные скрипты,
  • и многое другое

Как пользователь angular2, которому любопытно, как это работает в браузере, мы сосредоточимся на модулях ES6.

он построен на основе загрузчика модулей ES6. Итак, приступим к ES6.

ES6

Оператор import используется для импорта функций, объектов или примитивов, которые были экспортированы из внешнего модуля, другого скрипта и т. д.

https://developer.mozilla.org/en/docs/web/javascript/reference/statements/import

import { member } from "module-name";
import { member1 , member2 } from "module-name";

В приведенном выше предложении было сказано that have been exported. В ES6 вы можете экспортировать функции, объекты или примитивы из файла. Синтаксис выглядит следующим образом как задокументировано

export { name1, name2, .., nameN };
export let name1, name2,.., nameN; // also var

Резюме

Возвращаясь к systemjs, функция system.import загружает javascript. и основное использование в браузере похоже на это.

<script src="systemjs.config.js"></script><script>
  System.import('app').catch(function(err){ console.error(err); });
</script>

Итак, мы видим две вещи, одна config, а другая System.import('app') 1. config
2. Пакет приложения, который импортируется System.import, запускает ваше приложение

Отсюда столько вопросов.

В: где находится приложение и как его исправить?
О: оно определено в system.config.js с использованием map и packages

config.map['app'] = 'app'; // tells you where you find app package,
      config.packages['app'] = { main: 'main.ts',  defaultExtension: 'ts' }; // tells you what file to execute

Q. Где находится main.ts и что он делает?
A. Он расположен в app/main.ts, потому что config.map['app'] сказал вам найти app пакетов в каталоге app.
и он загружает приложение angular, которое это ваше приложение.
bootstarp читает AppComponent и находит html-тег my-app в документе, а затем отображает ваши приложения между этими двумя тегами; <my-app> и </my-app>

import { bootstrap }    from '@angular/platform-browser-dynamic';
      import { AppComponent } from './app.component';
      bootstrap(AppComponent);

Аллен Ким