Автоматизируем разработку на Angular с помощью Angular CLI

Полгода назад я начал рассказывать о веб-фреймворке Angular 2, который Google выпустил в сентябре 2016. В марте 2017 Angular 2 будет переименован в просто Angular и изменится методика нумерации новых релизов. Так, например, мартовская версия выйдет под номером 4.0.0, сентябрьская — 5.0.0 и т.д. Однако все новые версии будут базироваться на Angular 2, так что нет оснований для беспокойства.

Изначально многих JavaScript разработчиков пугала сложность и обилие конфигурационных файлов и тулзов требуемых для того, чтобы начать и задеплоить даже простое приложение. Нужно было изучить язык TypeScript (можно и без него, если скорость разработки вас не волнует), разобраться с настройками компилятора TypeScript, понять, как работать с модулями EcmaScript 6, выбрать загрузчик модулей (SystemJS или Webpack), сконфигурировать тесты, npm, веб-сервер. Добавьить скрипты и тулзы для оптимизации и деплоймента готового приложения, и появляется желание послать это все подальше и вернуться к простенькому, но миленькому jQuery.

Однако в Google тоже не дураки сидят, и был придуман Angular CLI, специальный тул, запускаемый из командной строки, который автоматизирует все стадии создания приложения, начиная с авто-генерации стартового проекта и конфигурационных файлов для деплоймента (дев и прод) и тестирования. Под капотом Angular CLI использует мощный упаковщик модулей Webpack, который популярен среди JavaScript разработчиков.

Если год назад я использовал загрузчик модулей SystemJS с последующей ручной конфигурацией билдов с помощью Webpack, то теперь SystemJS я использую в основном для демонстраций отдельных фич Angular во время презентаций и демок. Angular CLI стал моим основным тулзом, ибо кому охота вручную выпиливать все эти конфигурации и думать, как минимизировать размер приложения. В этой статье я покажу вам, как создать, упаковать и задеплоить простой проект с помощью Angular CLI.

Для начала, установите NodeJS. И для Angular, и для Angular CLI нужно много дополнительных библиотек (packages), которые находятся в репозитории NPM по адресу www.npmjs.com (для джавистов скажу, что это аналог Maven Central). NodeJS идет с менеджером пакетов npm, который умеет устанавливать необходимые пакеты (зависимости вашего проекта) либо индивидуально, либо согласно конфигурационного файла package.json (для джавистов — аналог pom.xml).

После установки NodeJS вы сможете начать пользоваться npm с командной строки, чтобы установить и сам Angular CLI, и все необходимые зависимости для вашего проекта. Команда установки Angular CLI глобально для всех проектов выглядит так (-g значит установить глобально):

npm install @angular/cli -g 

Angular CLI — это огромная горилла, и его установка займет пару минут, но после установки вы сможете пользоваться командой ng, чтобы генерировать различные ангуляровкие артифакты: новый проект, компоненты, сервисы и т.д. Кроме того, вы сможете делать билды и запускать проект с помощью веб-сервера webpack-dev-server, который будет установлен в вашем проекте.

Давайте создадим новый проект myproject с помощью следующей команды:

ng new myproject

Эта команда создаст новую директорию с готовым проектом и установит там все необходимые пакеты — тысячи файлов — в директории node_modules. Тысячи файлов звучит пугающе для программистов на JavaScript, но те же джависты привыкли к таким количествам во время разработки. В зависимости от скорости вашего интернета процесс генерации этого проекта может занять от двух до пяти минут, но этот процесс повторять не придется.

Время установки зависимостей можно существенно сократить, заменив npm более быстрым менеджером пакетом Yarn. Я написал, как это сделать в этом блоге.

Зайдите в директорию только что сгенерированного проекта, и вы увидите вот такую структуру:

Figure 1. Структура проекта

Чтобы собрать дев-версию этого проекта выполните следующую команду:

ng serve

Теперь откройте броузер по адресу http://localhost:4200, и вы увидите вот такую страничку, которая рендерится компонентом верхнего уровня app.component.ts:

Figure 2. Запускаем приложение

У Angular CLI есть много других команд, о которых можно прочесть в документации. А сейчас я просто покажу вам пару способов сборки приложения.

Команда ng serve запустила сервер webpack-dev-server, который стартовал Webpack, который в свою очередь взял все файлы из нашего проекта и собрал их в пакет в оперативной памяти. Размер это приложения не был оптимизирован, потому что мы работаем в режиме разработки. Откройте вкладку Network в Dev Tools вашего броузера, и вы увидите, что размер этого крошечного приложения около трех мегабайт. Давайте уменьшим этот размер, заказав оптимизированную сборку для продакшн:

ng serve –prod

Освежите страничку localhost:4200. Наше приложение похудело до 130KB. Когда вы строите приложение с ключом -prod, Angular CLI выполняет Ahead-Of-Time (AoT) компиляцию и не пакует сам компилятор вместе с приложением. Без AoT компилятор грузится в броузер и на месте компилирует Aнгуляровские примочки в чистый JavaScript.

Если честно, AoT уменьшает размер только небольших приложений. Но пре-компиляция все равно очень полезна, т.к. скорость рендеринга существенно возрастает из-за ненужности компиляции в броузере.

Команда ng serve упаковывает (creates bundles) приложение в оперативной памяти и автоматически перестраивает пакет, как только разработчик вносит изменения в коd приложения. Это хорошо, но для продакшн сборки и деплоймента нужны реальные файлы. Для этого есть другая команда: ng build. Эта команда создает директорию dist и записывает туда собранные файлы (и их gzip-версии) готовые для деплоймента. Туда также идут стили, картинки, шрифты и другие ресурсы необходимые для вашего приложения. Выполните вот такую команду:

ng build –prod

Сборка готова. Теперь скопируйте содержимое директории dist туда, где находится ваш веб-сервер Apache, NGINX, Tomcat или любой другой. Процесс сборки и деплоймента можнo и нужно автоматизировать с помощью таких тулзов, как npm scripts, Gulp, Grunt и т.п.

В этой статье я показал пример генерации и сборки очень простого Angular приложения с помощью Angular CLI. Если вы планируете программировать с Angular, сначала познакомьтесь с языком TypeScript, который поддерживает классы, интерфейсы, аннотации, генерики, а главное, типы данных. Если вы уже знаете JavaScript — это хорошо. А если нет, учите сразу TypeScript. Friends don’t teach friends JavaScript. They teach TypeScript.

В интернете есть много ресурсов для изучения Angular. Вышло несколько книг, включая и нашу «Angular 2 Development with TypeScript». В конце февраля я и мой соавтор Антон будем проводить онлайн тренинг по выходным, а в мае я планирую приехать в Киев и провести трехдневный тренинг вживую.

Я записал видео, которое показывает, как сгенерировать и задеплоить проект с помощью Angular CLI:

Все про українське ІТ в телеграмі — підписуйтеся на канал DOU

👍ПодобаєтьсяСподобалось1
До обраногоВ обраному1
LinkedIn

Схожі статті




36 коментарів

Підписатись на коментаріВідписатись від коментарів Коментарі можуть залишати тільки користувачі з підтвердженими акаунтами.

В июле/августе я буду проводить очередной онлайн воркшоп по Ангуляру (на английском). Детали здесь: bit.ly/2s1f9ad

может слишком чайниковский вопрос, а как со всем этим добром переехать с http на https? И клиент, и сервер. Google не помог

Ангуляровские приложения работают с https также, как и любые другие. Надо получить SSL—certificate и установить его на сервере. Почитайте о том, как работает SSL—certificate. www.youtube.com/watch?v=SJJmoDZ3il8

Я знаю, как работает SSL. Я про то, что ангулар 1.5 я перевёл без проблем, а где в Ангулар 4 это прописать — не нашёл. Чтобы уже при разработке видеть https://localhost:4200 вместо http

В своем проекте выполните команду
ng help serve

ng serve имеет опции —ssl, —ssl-key и —ssl-cert

www.usefuldev.com/...​ng-angular-cli-with-https

Добрый день, Яков! В предыдущей статье об ангулар 2, Вы дали прогноз, что он будет одним из топов 2017 года и окажет огромное влияние на js-коммьюнити. Считаете ли Вы так по-прежнему? Или возможно как-то скорректировали бы свой прогноз? Спасибо.

Судя по количеству запросов на тренинги в Штатах, я был прав. В Киеве буду проводить тренинг в мае: www.eventbrite.com/…​-2017-tickets-32845325252

В мае проведу 3-х дневный Angular воркшоп в Киеве: www.eventbrite.com/...-2017-tickets-32845325252

Можно ссылку на первоисточник, что при сборки с ключом -prod запускается именно AOT компиляция, а не JIT?

You can check one of the ChangeLog files at the CLI github repo. You can also compare the generated bundles with or without —aot=false.

А что вы скажете по поводу отсутствия возможности сконфигурировать Webpack? Я посмотрел, такой возможности нет и добавлять ее разработчики принципиально не собираются, в связи с чем многие не рекомендуют использовать Angular-cli для продакшена.

И, насколько я понимаю, как раз в больших проектах начнутся проблемы из-за отсутсвия конфигурируемости. Есть какие-то мысли на этот счет?

Для большинства проектов Angular CLI подойдет. Но, наверняка будут проекты, где будет желательна ручная оптимизация. Если команда разработчиков столкнется с такой необходимостью, надо будет refactor the project и делать конфигурацию Webpack вручную.
В 10й главе нашей книжки мы описали как сделать проект с Webpack, но без Angular CLI.
Примеры кода здесь: github.com/...ipt/tree/master/chapter10

В полседней бете 32.3 появилась новая команда ng eject, которая достает webpack config в рут проекта и позволяет его редактировать.

а где конфигурация веб-пака????
где web.pack.config.js ????
в чём вообще сложность сложить проект ангуляра 2 руками с нуля и в visual studio code установить екстеншн который шаблон декоратора содержит как снипет?
как менять конфигурацию angular-cli.json?
чем эта статья отличается от стандартного описания функциональности angular-cli с гитхаба и 100500 видео и остальных постов написаных пол года назад?

1. Конфигурация Webpack автоматически сгенерирована и находится в одной из папок под node_modules. Разработчик ее не трогает и не меняет.
2. Для проекта типа Hello World несложно.
3. angular-cli.json находится в корне проекта и разработчик его редактирует, как любой текстовый файл.
4. Последний вопрос — чистый тролинг. Погуглите 100500 постов написанных полгода назад и сделайте так, как там написано. Good luck with this.

разработчики Spring Boot тихо плачут в сторонке ))) Надо же, прямо революция...

Проблема в тому, що abgular-cli в бета-версії (а по міркам Java — так це взагалі скоріше альфа). Періодично вилазять різні глюки навіть в процесі міграції з версії на версію, а а закладки Issues по angular і angular-cli на github переходять у список найчастіше відвідуваних.

Spring Boot по глючности тоже не отстает, предпоследнюю версию 1.4.4 они пилили так старательно, что встроенный Tomcat-сервер сразу же отключался. Самое забавное, что на 1.4.3 все работало. Но в целом Spring Boot — это уже достаточно проработанный проект, который позволяет чуть ли не за 15 минут слепить готовый сайт, если уже есть заготовки.

разобраться с настройками компилятора TypeScript, понять, как работать с модулями EcmaScript 6, выбрать загрузчик модулей (SystemJS или Webpack), сконфигурировать тесты, npm, веб-сервер.
вот она, та самая причина, из-за которой все остальные так ненавидят фронтенд.


появляется желание послать это все подальше и вернуться к простенькому, но миленькому jQuery.
еще бы, скопипастил
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
и, о чудо, оно работает


Для начала, установите NodeJS
это, конечно, прекрасно, но что, если мне нахрен не нужен NodeJS, если я пишу на c#, php, c++, asm, перемычками сайты программирую?


Figure 2. Запускаем приложение
вот именно за это я и люблю гайды по Angular 2.
в getting started примере мы устанавливаем кучу всякой херни, запускаем кучу странных комманд, чтоб получить ТУПО СТРОКУ ТЕКСТА. это успех.


В интернете есть много ресурсов для изучения Angular. Вышло несколько книг, включая и нашу «Angular 2 Development with TypeScript».
но до сих пор нет вменяемых гайдов на js.
This page is not yet available in JavaScript. We recommend reading it in TypeScript.

Корни вашей агрессивности в том, что вы (как и многие back-end программисты) считаете, что серьезныю разработку можно вести только на серверной стороне, а JavaScript только для создания простых страниц. А на фронт-енде сегодня делаются очень серьезные приложения, которые требуют соответсвующего тулинга.

нууууу не совсем, я нисколько не спорю, что на фронтенде делаются сложные приложения и довольно значимая их часть не только не уступает, но даже превосходит серверные.

но мне в целом не нравится сложившаяся во фронтенде ситуация, когда вендор считает, что лучше знает, как мне будет удобнее.
я не хочу устанавливать node.js на рабочую машину, не хочу писать на TypeScript или устанавливать JSX compiler и менеджеры пакетов для js, для которых опять же нужен node.js. и другие менеджеры пакетов. и сборщики. и angular-cli. и еще что-то, что обязательно требует Python библиотеки.

когда я хочу попробовать технологию, я хочу просто запустить это и пощупать.
но почему-то Angular упорно считает, что я должен знать TypeScript, а ReactJS — что я должен использовать jsx, на котором они предлагают helloworld, но ни слова не говорят на странице с ним.

почему-то никому из них не приходит в голову, что некоторым людям хочется писать для js на js и не хочется использовать 100600 вещей, которые усложнят им жизнь.

Я вас слышу. Если вы можете себе позволить работать на том языке, который вы хотите, работаете в одиночку и сроки сдачи проекта вас не особо волнуют, то такой подход понятен. Можно просто программировать на Javascript и не пользоваться ни фреймворками, ни библиотеками. Вы наверное и сортировку сами пишете. Может даже и string left padding можете написать сами :)

Но большинство проектов делаются командами разработчиков с очень разным уровнем подготовки. Люди приходят в команду и уходят из нее. Вот и нужна некая платформа или фреймворк, который облегчит преемственность и снизит требования к подготовке среднего программиста. Удачи!

Я вас слышу.
неа.
я ничего не имею против библиотек и не пишу сортировки.
я не ругаю библиотеки и фреймворки, я ругаю их разработчиков и сложившийся подход.
разобраться с настройками компилятора TypeScript, понять, как работать с модулями EcmaScript 6, выбрать загрузчик модулей (SystemJS или Webpack), сконфигурировать тесты, npm, веб-сервер.
вот она, та самая причина, из-за которой все остальные так ненавидят фронтенд.

Никто не заставляет Ваc или кого либо ещё разбираться в этом что бы вывести строку текста.
Более того, Вы правда думаете что все эти манипуляции сделаны только ради одной строки ?

вы цитируете один кусок моего текста, но комментируете другой.
а ведь я даже тег переноса строки ставил между пунктами.

моя претензия насчет одной строки текста в том, что это убого. могли бы показать какую-либо интересную возможность. angularjs.org — показывает что-то интересное на первой же странице, angular.io показывает строку текста.
фреймворк для построения динамических приложений должен показывать что-то динамическое. ну хотя бы трансляцию текста из поля ввода в блок по keyup.

Вот здесь я описал несколько причин, по которым Angular/TypeScript — это хорошо:
yakovfain.com/...-angular-2-and-typescript

спасибо.
в целом интересно и неплохо агитирует, но я пока на стадии гнева и чтоб принять ts мне нужно еще пройти торг и депрессию :)

Яков, подскажите, пожалуйста, сталкивались ли Вы с тем, как при деплое сохранить обращение к некоторым API через прокси? У меня, при запуске на локальном компьетере через npm start, следующая конфигурация: «start»: «ng serve —proxy-config proxy.config.json» и соответствующий ей файл proxy.config.json. Все отрабатывает хорошо. А вот как перенести проект на github pages, чтобы сохранить прокси-запросы информации пока не нашел. Спасибо.

Я думаю, в этом случае нужно конфигурировать CORS на API серверах,
например, Access-Control-Allow-Origin: *
Вместо * можно указывать конкретный IP, где задеплоен клиент.

Как раз в этом и проблема, что не имею доступа к серверу, чтобы настроить Access-Control-Allow-Origin (wunderground.com). На локале проблему CORS-запросов решил через прокси, а теперь хочу задеплоить на github pages этот проект, но не знаю как перенести туда это решение с прокси. В итоге получается, что на github pages все работает кроме этого запроса, который шел на локалке через прокси.

In this case, you need to use another server (installed in your company) that you can use as a proxy. This server should have Access-Control-Allow-Origin: * and redirect requests with a certain URL fragment to wunderground.com.

Яков, подскажите, пожалуйста, встречали ли вы хороший гайд или инструкции как начать использовать Angular CLI на существующем большом проекте?

Не встречал. Но если у вас уже есть проект, сделанный на Angular 2, то значит у вас есть готовые модули, компоненты, и сервисы. Я бы сгенерировал новый проект с Angular CLI и аккуратно скопировал-бы туда все имеющиеся артифакты. Конфигурация дополнительных JS библиотек и CSS делается в одном месте — в файле angular-cli.json. Бандлы для lazy-loaded модулей будут сгенерированы автоматически.

Вспомнил. Я переделывал небольшой книжный проект (аукцион) с ручной конфигурации Webpack на Angular CLI. Может пригодится.

Было: github.com/.../master/chapter10/auction

Стало: github.com/...ree/master/extras/auction

Підписатись на коментарі