От автора: в последнем релизе Angular было добавлено в CLI много новых возможностей, которые облегчают обновление и добавление новых функций в приложение. В недавнем обновлении WebStorm Angular 2018.2 была реализована интеграция с этими новыми командами CLI. Давайте рассмотрим их в действии, как и некоторые другие новые функции!
Чтобы начать, мы создадим приложение Angular с помощью Angular CLI. Вы всегда можете создать новый проект Angular через экран приветствия IDE: нажмите «Создать новый проект», затем выберите из списка слева «Angular CLI», назовите новый проект и нажмите «Создать». WebStorm использует Angular CLI, установленный глобально на вашем компьютере, или его последнюю версию через npx.
Создание в WebStorm нового проекта Angular
Добавление новых функций в приложение с помощью ng add
ng add поможет вам добавить в приложение новые функции — эта команда установит зависимости, а затем вызовет скрипт установки, который позаботится обо всем остальном.
В WebStorm 2018.2 вы можете добавить библиотеки, поддерживающие установку с помощью ng add, через новое действие «Зависимости Angular», доступное во всплывающем окне «Найти действие» (Cmd-Shift-A / Ctrl + Shift + A) или во всплывающем окне «Добавить…» Cmd-N / Alt + Insert) в представлении «Проект».
В списке вы можете выбрать, какую библиотеку вы хотите добавить. Сейчас он содержит предопределенный список библиотек, которые, как мы знаем, имеют поддержку ng add, но вы также можете сами определить имя пакета. Давайте выберем Angular Material и добавим ее в наш проект:
Добавление в WebStorm новой зависимости с помощью ng add
Если вы добавите к package.json зависимость, которая поддерживает ng add, WebStorm предложит установить ее с помощью ng add:
Установка зависимости с помощью ng add из package.json
Даже если зависимость уже установлена, все равно имеет смысл переустановить ее с помощью ng add — нажмите Alt-Enter на имени пакета и выберите «Переустановить с помощью «ng add»:
Переустановка зависимости с помощью ng add
Использование схем
С помощью действия Angular Schematic вы можете использовать схемы, специальные скрипты, которые могут генерировать код для таких вещей, как новые компоненты, директивы и службы и т. д. Это стандартные схемы, которые поставляются с самим Angular CLI, и вы можете использовать их в WebStorm уже какое-то время.
Теперь список также включает в себя также схемы, предоставляемые другими зависимостями, например Angular Material.
Давайте добавим в наше приложение панель инструментов Material: используйте «Найти действие» (Cmd-Shift-A / Ctrl + Shift + A) — «Angular Schematic» или в представлении «Проект» нажмите Cmd-N / Alt + Insert и выберите «Angular Schematic», а затем выберите из списка «MaterialDashboard». Укажите имя компонента, вы также можете передать дополнительные параметры конфигурации.
Добавление в приложение панели инструментов Material
Теперь мы можем использовать недавно созданный компонент Material dashboard в app.component.html.
Обновленные сниппеты кода
WebStorm предаствляет коллекцию сниппетов кода Angular, разработанную Джоном Папой, и эти сниппеты также были также обновлены под релиз Angular 6.
Чтобы использовать сниппет, вы можете ввести его аббревиатуру и нажать Tab, чтобы развернуть его или выбрать из предложений завершения кода. Вы можете увидеть все доступные сниппеты и добавить свои собственные сниппеты через Настройки — Редактор — Интерактивные шаблоны.
Создание нового компонента с помощью сниппета кода
Рефакторинг Rename компонентов
Еще одним недавним улучшением WebStorm для Angular стало то, что теперь рефакторинг Rename для компонента не только обновлен в части применения и импорта, но также обновлены имена всех связанных файлов: *.component.ts, *.component.html, *.component.css and *.component.spec.ts.
Переименование компонент панели инструментов с помощью рефакторинга Rename
Запуск и отладка приложения
Теперь давайте посмотрим на результаты наших изменений и запустим ng, чтобы запустить наше приложение. В IDE вы можете дважды кликнуть на имени задачи в окне npm слева, чтобы запустить ее.
Если вы хотите отладить приложение, вы можете использовать отладчик WebStorm и Chrome. Создайте и запустите новую конфигурацию отладки JavaScript в WebStorm, указав localhost:4200 в поле URL-адреса. В WebStorm, начиная с версии 2018.2, эта конфигурация доступна сразу для любых новых проектов Angular, которые вы создаете через экран приветствия IDE.
Поместите контрольные точки в код TypeScript непосредственно в редакторе, затем кликните иконку ошибки, чтобы начать отладку. После определения контрольной точки вы можете пройтись по коду, посмотреть значения переменных, использовать консоль отладки — все в среде IDE.
Отладка приложения с помощью Chrome и WebStorm
Суммируя все выше сказанное, новый WebStorm 2018.2 значительно улучшает интеграцию с Angular CLI: теперь вы можете с помощью ng add использовать вместо командной строки действия IDE для добавления новых зависимостей в приложение Angular и генерировать код с использованием Angular Schematics. В дополнение к этому теперь стало значительно проще переименовывать компоненты и отлаживать приложение в WebStorm.
Автор: Ekaterina Prigara
Источник: https://blog.angular.io/
Редакция: Команда webformyself.