├── README.md
└── src
└── first
└── README.md
/README.md:
--------------------------------------------------------------------------------
1 | [
](https://angular.io/guide/quickstart)
2 |
3 | # Angular QuickStart [](https://t.me/angular_ru)
4 |
5 | - Официальная документация: [`https://angular.io/guide/quickstart`](https://angular.io/guide/quickstart)
6 |
7 | ### Youtube
8 |
9 | - Видеоуроки от `CodeDojo` по [Angular](https://www.youtube.com/playlist?list=PLqHlAwsJRxANhhHlAlazVrbX69UMJ9Bcu)
10 | - Видеоуроки от `LoftBlog` по [Angular](https://www.youtube.com/playlist?list=PLY4rE9dstrJzlDoCDCKmgD-xv8VwECOtc)
11 | - Видеоуроки от `ITVDN` по [Angular CLI](https://www.youtube.com/playlist?list=PLvItDmb0sZw9yk2HjJgEJfYr4VTr43W19) и [Angular](https://www.youtube.com/playlist?list=PLvItDmb0sZw9VKIWMc2Koq4EMo317tcrL)
12 | - Видеоуроки от `Компьютерная школа Hillel` по [Angular](https://www.youtube.com/watch?v=XVzed9zlVfw)
13 | - Видеоуроки от `WebForMySelf`по [Angular](https://www.youtube.com/playlist?list=PLD-piGJ3Dtl2WotoOks4_bWOv5wvrtOG_)
14 | - Видеоуроки от `SKILLS HEAD` по [Angular](https://www.youtube.com/watch?v=N2nOGXhZdM8)
15 | - Видеоуроки от `Easy Web` по [Angular](https://www.youtube.com/channel/UCX52gr5pCkqvGejGHOdJByg)
16 | - Подкаст [`Пятиминутка Angular`](https://www.youtube.com/channel/UCQGzS3MitYnnjTRn2vanOmg/videos) от Алексея Охрименко
17 | - Видеозаписи митапов с [`AngularMoscow`](https://www.youtube.com/channel/UCpDTAtunmHBcI6CsJoUV7ww/videos)
18 | - Видеозаписи митапов с [`AngularKyiv`](https://www.youtube.com/channel/UCUpLCAi4YTOSUU5kyNGHlfw)
19 | - Детальный обзор angular и рецепты его использования от [learn.javascript.ru](https://learn.javascript.ru/screencast/angular)
20 |
21 | ### Angular-RU: полезные ресурсы сообщества
22 |
23 | - [Список ресурсов по Angular (на русском)](https://github.com/Angular-RU/angular-awesome-list)
24 | - [Вопросы на собеседовании по Angular](https://github.com/Angular-RU/angular-interview-questions)
25 | - [Разработки сообщества (стартеры, пакеты, etc)](https://github.com/Angular-RU/angular-ru-devs)
26 | - [Митапы в России](https://github.com/Angular-RU/angular-russia-meetups)
27 |
28 | ### Angular-RU meetups:
29 |
30 | - [Митапы в России (видео, предложение доклада, регистрация)](https://github.com/Angular-RU/angular-russia-meetups)
31 |
32 | ### Содержание
33 |
34 | - **[Быстрый старт](src/first#s1)**
35 | - [Зачем нам TypeScript?](src/first#s1-1)
36 | - [Шаг 1. Настройка окружения](src/first#s1-2)
37 | - [Шаг 2. Создание нового проекта](src/first#s1-3)
38 | - [Шаг 3: Запуск веб-приложения в режиме разработки](src/first#s1-4)
39 | - [Шаг 4: Редактирование своего первого Angular компонента](src/first#s1-5)
40 | - [Что дальше?](src/first#s1-6)
41 | - [Каталог проекта](src/first#s1-7)
42 | - [Angular CLI vs. Manual Setup](src/first#s1-8)
43 |
44 |
--------------------------------------------------------------------------------
/src/first/README.md:
--------------------------------------------------------------------------------
1 | Первые шаги
2 |
3 | Хорошие инструменты для разработки делают вашу работу более комфортной, даже если вам нравится делать все вручную. [Angular CLI](https://github.com/angular/angular-cli) — это интерфейс командной строки, который позволяет вам быстро создавать проекты, добавлять файлы и выполнять множество определенных задач, такие как тестирование, сборка и развертывание.
4 |
5 | Основная цель этого раздела — создать и запустить простое Angular-приложение на TypeScript с использованием Angular CLI и в дальнейшем придерживаться официального [Style Guide](https://angular.io/guide/styleguide) руководства, которые специфицирует и стандартизирует проекты на Angular. В конце концов, вы будете иметь базовое понимание того, как разрабатывать приложения с помощью CLI. Однако, сначала определимся, зачем нам TypeScript?
6 |
7 | Зачем нам TypeScript?
8 |
9 | 
10 |
11 | TypeScript — это JavaScript (ES6/ES7/ES8/...) + информация о типах. То есть если вы знаете ES6+, то вы автоматически знаете TypeScript (добавится только информация о типах и некоторые нюансы, но в целом они строго следуют стандарту). TypeScript - это не Dart, который является другим языком. Это надстройка над JavaScript, которая позволяет в рамках очень больших проектов (таких, как сам Angular, который сам по себе очень большой проект) улучшить управление сложностью, получить статический анализ, мы имеем возможность пользоваться аннотациями, типизацией, наследованием, интерфейсами, а самое главное - модулями. В крупных проектах эта информация действительно позволяет избавиться от огромного набора ошибок. В интернете существует достаточно большое количество примеров и руководств по написанию приложений на TypeScript, но в нашем случае мы подготовили вам [базовый starter kit](https://github.com/Angular-RU/webpack-typescript-starter), который работает под управлением системы сборки Webpack.
12 |
13 | Шаг 1. Настройка окружения
14 |
15 | Перед тем, как начать разрабатывать, вам необходимо настроить себе окружение. Установите [Node.js и npm](https://nodejs.org/en/download/) (если вы еще не установили их) себе на компьютер. Убедитесь, что вы используете Node.js версии не ниже 6.9.x и npm не ниже 3.x.x (для этого достаточно выполнить в терминале node -v и npm -v).
16 |
17 | Затем установите Angular CLI глобально.
18 |
19 | ```bash
20 | npm install -g @angular/cli
21 | ```
22 |
23 | Как правило, этот шаг проделывается один раз, и в будущем его выполнение уже не потребуется.
24 |
25 | Шаг 2. Создание нового проекта
26 |
27 | Создайте новое приложение (разворачивание каркаса), выполнив следующие команды:
28 |
29 | ```bash
30 | ng new my-app
31 | ```
32 | На этом шаге проявите терпение. Angular будет подтягивать все необходимые зависимости для вашего приложения, и большая часть времени будет потрачена на установку пакетов npm.
33 |
34 | Шаг 3: Запуск веб-приложения в режиме разработки
35 |
36 | Перейдите в каталог проекта и запустите веб-сервер.
37 |
38 | ```bash
39 | cd my-app
40 | ng serve --open
41 | ```
42 |
43 | Команда ng serve запускает веб-сервер, а также прослушивает каталог c исходниками вашего приложения и при изменениях в этих исходных файлах пересобирает проект «на лету». Стоит отметить, что в таком режиме проект не сохраняется на диске, он записывается непосредственно в оперативную память.
44 |
45 | Использование ключа --open (или просто -o) означает, что после сборки проекта, автоматически откроется ваш браузер (по умолчанию выбранный в операционной системе).
46 |
47 | В открытой вкладке http://localhost:4200/ по умолчанию вы уведите стандартный макет Angular приложения.
48 |
49 | 
50 |
51 | Шаг 4: Редактирование своего первого Angular компонента
52 |
53 | По умолчанию Angular CLI создает для вас базовый компонент. Этот базовый компонент является корневым, он связан с селектором app-root. Вы можете найти его по следующему пути в каталоге ./src/app/app.component.ts.
54 |
55 | В этом файле вы увидите следующее:
56 |
57 | ```ts
58 | ...
59 |
60 | @Component({
61 | selector: 'app-root',
62 | templateUrl: './app.component.html',
63 | styleUrls: ['./app.component.css']
64 | })
65 | export class AppComponent {
66 | title = 'app';
67 | }
68 | ```
69 |
70 | [@Component](https://angular.io/api/core/Component) — это один из базовых декораторов в Angular. Декораторы — это альтернатива для аннотаций (пример из Java), предложенная Yehuda Katz в стандарт ECMAScript 2016. Декораторы позволяют не только аннотировать метаданными объекты, но и модифицировать классы, методы и свойства. Также декорирование - это приём программирования, который позволяет
71 | взять существующую функцию и изменить/расширить ее поведение. Во многих случаях код с использованием декораторов будет чище, красивее и эффективнее.
72 |
73 | 
74 |
75 | Декоратор получает функцию (в нашем случае, класс AppComponent) и возвращает обертку, которая делает что-то своё «вокруг» (magic) вызова основной функции. Что конкретно делает декоратор [@Component](https://angular.io/api/core/Component) вы можете [посмотреть тут](https://stackoverflow.com/questions/40983890/what-does-component-decorator-exactly-do).
76 |
77 | Итак, самое очевидное, что вы можете сделать сейчас для своего компонента, это поменять его title, к примеру:
78 |
79 | ```ts
80 | ...
81 | export class AppComponent {
82 | title = 'My First Angular App';
83 | }
84 | ```
85 |
86 | Как только вы внесете изменения в файле и сохраните их, браузер автоматически перезагрузит изменения (hot reloading). Конечно же, вы можете легко вносить изменения в стили вашего компонента.
87 |
88 | Откройте файл .src/app/app.component.css и задайте компоненту некоторые стили:
89 |
90 | ```css
91 | h1 {
92 | color: #369;
93 | font-family: Arial, Helvetica, sans-serif;
94 | font-size: 250%;
95 | }
96 | ```
97 |
98 | 
99 |
100 | Правда, тут стоит сразу отметить следующий момент: если вы попытаетесь сделать так:
101 |
102 | ```css
103 | body {
104 | background: red;
105 | }
106 |
107 | app-root {
108 | background: blue;
109 | }
110 | ```
111 |
112 | то ничего не изменится, фон страницы не будет красным, а фон самого компонента не будет синим. И если мы посмотрим в код страницы, то увидим следующее:
113 |
114 | 
115 |
116 | Дело в том, что Angular по умолчанию инкапсулирует CSS (кроссбраузерно эмулирует Shadow DOM), чтобы стили одного компонента не сломали или переопределили стили другого. Поэтому ни в коем случае не используйте имя селектора компонента или внешние имена селекторов для задания его стилей. Атрибуты для инкапсуляции CSS кода генерируются только для дочерних элементов этого компонента.
117 |
118 | Некоторые утверждают, что если на странице используется огромное количество компонентов, Angular проделывает лишнюю работу и нагружает наш процессор, что сказывается на скорости, к тому же, если вы используете какую-нибудь css-методологию (BEM, SMACSS), то вероятнее всего вы напишете хорошую верстку и css код, не требующий для этого инкапсуляции со стороны Angular. Для этого вы можете просто указать дополнительный параметр в декораторе:
119 |
120 | ```ts
121 | @Component({
122 | ...
123 | encapsulation: ViewEncapsulation.None
124 | ...
125 | })
126 | ```
127 |
128 | Более подробно вы можете [прочитать тут](https://angular.io/guide/component-styles#view-encapsulation).
129 |
130 | Что дальше?
131 |
132 | Шаги, описанные выше - это все, что необходимо для простого «Hello, World». Дальше вы можете попытаться изучить туториал [«Tour of Heroes»](https://angular.io/tutorial) и создать небольшое приложение, которое поможет в будущем разрабатывать более сложные приложения с помощью Angular, но я бы порекомендовал посмотреть [видеокурс на Udemy](https://www.udemy.com/learn-angular-from-scratch/) (неважно, что он на английском, вы сможете разобраться в силу того, что там все доступно показывается). Для ознакомления с командами angular-cli, вы можете перейти на [данный русскоязычный ресурс](https://dev.nvx.me/angular-cli-ref/). Сейчас же можно ознакомиться с каталогом проекта.
133 |
134 | Каталог проекта
135 |
136 | Angular CLI является удобным инструментом для разработки и развертывания enterprise-решений. Для начала самый первый файл, который вам необходимо изучить это README.md.
137 | Он содержит информацию о базовых командах, которые вы должны знать при использовании Angular CLI. Всякий раз, когда вам потребуется узнать больше, чем есть в README и посмотреть какие-нибудь примеры использования Angular CLI, вам достаточно будет зайти на официальный репозиторий и открыть раздел [Wiki](https://github.com/angular/angular-cli/wiki).
138 |
139 | Некоторые из сгенерированных файлов могут быть вам незнакомы, поэтому поговорим о них подробнее.
140 |
141 | #### Директория src
142 |
143 | Сами исходники вашего разрабатываемого приложения, как правило, располагаются в директории src. Тут вы будете хранить Angular компоненты, шаблоны, стили, изображения и все остальное, что будет необходимо вашему приложению. Любые файлы вне этой папки предназначены для поддержки создания, сборки и развертывания вашего приложения.
144 |
145 | ```bash
146 | .
147 | |-- app
148 | | |-- app.component.css
149 | | |-- app.component.html
150 | | |-- app.component.spec.ts
151 | | |-- app.component.ts
152 | | `-- app.module.ts
153 | |-- assets
154 | |-- environments
155 | | |-- environment.prod.ts
156 | | `-- environment.ts
157 | |-- favicon.ico
158 | |-- index.html
159 | |-- main.ts
160 | |-- polyfills.ts
161 | |-- styles.css
162 | |-- test.ts
163 | |-- tsconfig.app.json
164 | |-- tsconfig.spec.json
165 | `-- typings.d.ts
166 | ```
167 |
168 | **app/app.component.{ts,html,css,spec.ts}** - специфицирует AppComponent компонент html-шаблоном, стилями и юнит-тестами. Это корневой компонент, для которого по мере развития приложения появится [дерево вложенных компонентов](https://alligator.io/angular/architecture-angular-app/).
169 |
170 | **app/app.module.ts** - специфицирует AppModule. Корневой модуль, который сообщает Angular, как будет собрано приложение. Сейчас в нем объявлен только AppComponent. Впоследствии вы будете объявлять в нем другие компоненты.
171 |
172 | assets/* - директория, в которой вы размещаете изображения и все остальное, которую необходимо скопировать в конечную директорию сборки, когда вы создадите непосредственно само приложение.
173 |
174 | environments/* - эта директория содержит файлы целей сборки (dev или prod режимы), каждый из которых экспортирует простые env-переменные конфигурации, необходимые для использования в вашем приложении. Когда вы разрабатываете приложение, файлы собираются «на лету». Вы можете использовать разный набор API при разработке (dev), отличный от продакшина (prod), у которого вы можете подключать всякие метрики или auth-токены. Вы даже можете использовать разные сервисы или заглушки при разных целях сборки.
175 |
176 | **favicon.ico** - вы можете добавить свою собственную иконку, которая будет отображаться на вкладке в браузере.
177 |
178 | **index.html** - основная HTML-страница, которая отображается, когда кто-то посещает ваш сайт. В большинстве случаев вам никогда не понадобится его редактировать. Angular CLI автоматически добавляет все сгенерированные js и css-файлы при создании вашего приложения, поэтому вам не нужно добавлять какие-либо теги (script, link) вручную.
179 |
180 | **main.ts** - точка входа вашего приложения. Сейчас, по умолчанию, ваше приложение компилируется в поставке с JIT-компилятором. Данный файл загружает корневой модуль приложения (AppModule) и запускает его в браузере. Вы также можете использовать AOT-компилятор, заранее скомпилировав свое приложение, исключив JIT-компилятор из сборки, для этого вы должны использовать флаг —aot для команд Angular CLI ng build и ng serve.
181 |
182 | **polyfills.ts** - различные браузеры имеют различные уровни поддержки тех или иных веб-стандартов. Полифиллы помогают нормализовать эти различия. Однако не забывайте проверять текущую [поддержку браузерами](https://angular.io/guide/browser-support).
183 |
184 | **styles.css** - здесь хранятся глобальные стили. Большую часть времени вы будете работать с локальными стилями своих компонентов, но стили, которые влияют на все ваше приложение, должны находиться в этом месте.
185 |
186 | **test.ts** - это точка входа всех ваших юнит-тестов. Этот файл имеет настраиваемую конфигурацию, но, как правило, вы будете редко его править.
187 |
188 | **tsconfig.{app|spec}.json** - конфигурация компилятора TypeScript описывается в файле tsconfig.app.json, для юнит-тестов же используется конфигурация tsconfig.spec.json.
189 |
190 | #### Корневая директория проекта
191 |
192 | src/ является только одним из элементов корневой директории проекта. Другие файлы помогают собирать, тестировать, поддерживать, документировать и развертывать приложение.
193 |
194 | ```bash
195 | .
196 | |-- README.md
197 | |-- e2e
198 | |-- karma.conf.js
199 | |-- node_modules
200 | |-- package-lock.json
201 | |-- package.json
202 | |-- protractor.conf.js
203 | |-- src
204 | |-- tsconfig.json
205 | `-- tslint.json
206 | ```
207 |
208 | **e2e/** - внутри директории e2e/ располагаются e2e (end-to-end) тесты. Они не должны находиться внутри директории src/, поскольку эти тесты представляют собой отдельное приложение, которое тестирует ваше основное приложение. Внутри располагаются конфигурационные файлы, например, tsconfig.e2e.json.
209 |
210 | **node_modules/** - Node.js создает данную директорию, в которой хранит все сторонние модули, перечисленные в package.json.
211 |
212 | **.angular-cli.json** - конфигурационный файл Angular CLI. В этом файле вы можете установить несколько значений по умолчанию, а также настроить, какие файлы будут включены при сборке проекта.
213 |
214 | **.editorconfig** - Простая настройка для вашего редактора, специфицирующая одинаковую базовую конфигурацию для форматирования текста кода. Большинство редакторов поддерживают файл .editorconfig. Дополнительную информацию смотрите на странице [http://editorconfig.org](http://editorconfig.org).
215 |
216 | **.gitignore** - это файл необходим для системы контроля версий, он нужен, чтобы исключить автосгенерированные файлы, которые не нужно хранить в Git-репозитории.
217 |
218 | **karma.conf.js** - конфигурационный файл для запуска юнит-тестов с использованием Karma, запуск тестов можно выполнить командой ng test.
219 |
220 | **package.json** - конфигурационный файл npm, в нем перечисляются сторонние модули (пакеты) разработчиков, которые использует ваш проект. Здесь вы также можете прописать и свои собственные скрипты.
221 |
222 | **README.md** - основная документация для вашего проекта, предварительно заполненная информацией Angular CLI.
223 |
224 | **tsconfig.json** - конфигурация компилятора TypeScript для вашей IDE.
225 |
226 | **tslint.json** - конфигурация для статического анализатора TSLint, используется при запуске ng lint. Для чего нужен анализатор вы можете [посмотрев на пример](http://codelyzer.com/).
227 |
228 | #### Developer Experience
229 |
230 | 
231 |
232 | Angular CLI vs. Manual Setup
233 |
234 | Существует множество способов, которые вы можете опробовать для создания нового проекта на Angular. Но на самом деле существует два основных подхода, первый из них - это использование Angular CLI, а второе — ручная настройка Webpack.
235 |
236 | #### Angular CLI
237 |
238 | Самый простой и быстрый способ создания нового проекта на Angular. Не прибегая к ручной настройке, вы можете в течение нескольких минут развернуть проект и начать разрабатывать без проблем даже большие приложения.
239 |
240 | Плюсы:
241 | - Быстрая и простая в установке, идеально подходит для начинающих
242 | - Является надстройкой над Webpack
243 | - Включает в себя инструменты тестирования Protractor e2e, Karma, Jasmine
244 | - Не нужно самостоятельно следить за зависимостями
245 | - Централизованный конфигурационный файл
246 | - Быстрые и простые CLI-команды для запуска приложения, создания новых компонентов и многое другое
247 |
248 | Минусы:
249 | - Менее расширенная конфигурация (невозможно изменить встроенную конфигурацию Webpack)
250 | - Жесткая структура конфигурационных файлов (несколько tsconfig файлов, которые сложнее перемещать из директории в директорию)
251 | - Слабая поддержка или полное отсутствие плагинов (невозможно, к примеру, добавить Pug-шаблонизатор)
252 |
253 | Все плюсы и минусы действительно сводятся к следующему: c Angular CLI намного легче управлять проектом, но также он делает проект менее гибким. Это отлично подходит для начинающих или простых проектов, но, скорее всего, в будущем вам потребуется ручной подход настройки вашего проекта.
254 |
255 | #### Webpack
256 |
257 | В этом случае ручная настройка с использованием Webpack фактически является противоположностью плюсам и минусам Angular CLI. Однако одним из лучших альтернатив Angular CLI, с точки зрения гибкости настройки, является проект AngularClass [Angular Webpack Starter](https://github.com/AngularClass/angular-starter). Однако за счет легкого конфигурирования webpack вы можете настроить простое окружения для своего проекта, оставив [только необходимое](https://github.com/Angular-RU/webpack-angular-starter).
258 |
259 | Плюсы:
260 | - Расширенная настройка Webpack
261 | - Возможность использования любых HTML-шаблонизаторов
262 | - Чистый конфигурационный файл и структура каталогов
263 | - Большая гибкость (конфигурационные файлы являются javascript файлами, для которых можно писать свою логику)
264 |
265 | Минусы:
266 | - Трудность настройки эффективного e2e-тестирования
267 | - Возможность расширенной конфигурации увеличивает вероятность конфигурационных ошибок
268 | - Проблемы с зависимостями и их upgrade-обновлениями
269 |
270 | #### SystemJS
271 |
272 | SystemJS позиционирует себя как универсальный динамический загрузчик модулей — модулей ES6, AMD, CommonJS и глобальных браузерных или Node.js пакетов. Поскольку вы используете модули в TypeScript, так же, как в ES6, вам нужен загрузчик модулей (в Webpack за это отвечают loaders). В случае с SystemJS вы пишете конфигурационный systemjs.config.js, который позволяет вам настроить способ сопоставления имен модулей с их соответствующими файлами в каталоге node_modules или где-либо еще.
273 |
274 | Этот конфигурационный файл необходим для того случая, когда на клиенте вы используете именно SystemJS, при помощи него вы импортируете основной модуль вашего приложения:
275 |
276 |
277 | ```html
278 |
281 | ```
282 |
283 | Причем забегая вперед, для TypeScript конфигурации вы указывали определенный параметр [типа модуля](https://auth0.com/blog/javascript-module-systems-showdown/):
284 |
285 | ```json
286 | {
287 | "compilerOptions": {
288 | "target": "es5",
289 | "module": "commonjs", // <------
290 | ...
291 | ```
292 |
293 | Таким образом, после компиляции из TypeScript в ваших JavaScript файлах вы увидели бы внутри особые функции require(). Если бы указали "module": "es6", вы увидели бы в скомпилированных файлах ключевые слова import, export. Однако, вы все еще не можете использовать этот синтаксис, поскольку полной поддержки браузерами еще нет. Если бы указали тип "module": "amd", вы увидели бы другой синтаксис, который использовал функции define(). Стоит отметить, что в обучающем туториале на официальном сайте «Tour of Heroes» до сих пор в примерах участвует SystemJS, однако, после выхода Angular 5, разработчики вскоре поправят документацию и заменят на примеры с Angular CLI.
294 |
295 | SystemJS как одна из модульных систем сборки, предназначалась для того, чтобы эмулировать поддержку ES6 модулей, а как только браузеры начнут их поддерживать, можно было бы от него легко избавиться, однако, в целом эта затея провалилась из-за минусов SystemJS.
296 |
297 | Webpack это достаточно гибкая система сборки. Он не только обрабатывает какие-либо типы модулей (ES6, AMD, CommonJS), но и позволяет выполнить прилегающие задачи, обеспечивая выполнение сжатия, минификации каких-либо файлов, работу с картинками, css-препроцессорами и многое другое. Он также предоставляет веб-сервер для разработки в режиме инкрементальной сборки. Когда вы используете Webpack, SystemJS становится избыточным. Webpack готовит для вас как минимум один файл с возможным именем bundle.js. Этот файл может содержит все необходимые HTML, CSS, JS составляющие ваших веб-компонентов. Поскольку все файлы объединены в один файл, то нет жесткой необходимости в ленивом загрузчике, такой как у SystemJS. Главный потенциал SystemJS был в ленивой загрузке ваших файлов. Приложение должно было загружаться быстрее, потому что вы не загружаете один большой бандл, но на практике это оказалось не очень выгодным решением.
298 |
299 | Но даже сейчас Webpack позволяет использовать вынесение кода из общего бандла (code splitting) и подгружать их при помощи ленивой загрузки по требованию, а также представляет улучшенный Tree Shaking для ваших модулей. Поэтому начиная с версии 1.2, Angular CLI использует внутри себя реализацию Webpack.
300 |
301 | На самом деле, уже практически невозможно найти какой-либо работающий Starter Kit, использующий SystemJS, многие либо переписали на Webpack, либо забросили. Но даже если вы и найдете его, он будет скорее всего с версией Angular 2. Поэтому настоятельно рекомендую изучать первые два способа сборки ваших приложений на Angular.
302 |
303 | #### Rollup
304 |
305 | Здесь мы не будем много говорить на эту тему. Хотя есть [примеры](https://gist.github.com/Rich-Harris/79a02519fb00837e8d5a4b24355881c0) (хоть и в сравнении с Webpack второй версии), какой код генерирует Webpack, а какой генерирует Rollup на выходе, и тут последний куда лучше. При этом стоит снова отметить, что Webpack - это не просто сборщик модулей, а куда больше. Поэтому Webpack, как правило, лучше подходит для разработки приложений, а Rollup, как правило, лучше подходит для разработки библиотек.
306 |
--------------------------------------------------------------------------------