Перейти к содержанию

Angular CLI

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

npm i @angular/cli -g

Начнем с команды ng new. Она генерирует скелет вашего будущего приложения.

ng new my-app

my-app - это название вашего проекта (может быть любым). Angular CLI создаст одноименную директорию и поместит в нее исходные файлы "скелета" для вашего приложения.

По умолчанию в только что сгенерированном проекте имеется только один компонент AppComponent, который содержит приветствующий текст. Для запуска приложения используйте ng serve.

ng serve -o

Теперь приложение запущено и доступно по адресу http://localhost:4200 (по умолчанию). Параметр -o указывает, что после сборки приложение должно автоматически открыться в браузере.

Если вам необходим другой порт или у вас статический IP-адрес и вы хотите осуществлять доступ именно по нему, используйте флаги port и host.

ng serve -o --port 5000 --host x.x.x.x

Теперь вернемся к ng new и рассмотрим ее основные параметры:

  • style - задает для проекта расширение файлов CSS (sass, less, css - по умолчанию);
  • routing - если указан, создается модуль маршрутизации;
  • inline-style - если указан, все стили вписываются в компонент в строковом виде;
  • inline-template - если указан, весь HTML-код вписывается в компонент в строковом виде.

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

Другая незаменимая команда Angular CLI - ng generate. Она генерирует "скелет" любой сущности Angular.

ng generate component my-app1 --prefix --flat

или более краткая запись

ng g component my-app1 --prefix --flat

Если сущность может быть покрыта unit-тестами, для нее дополнительно создается файл *.spec.ts.

Параметр --prefix указывает префикс генерируемых сущностей (по умолчанию app). Если указать его без значения, то префикс будет опущен.

Параметр --flat указывает, что для генерируемой сущности не будет создана директория и все файлы будут помещены в то место, откуда была вызвана команда.

Причем создание осуществляется Angular CLI интеллектуально. Например, при создании компонента он автоматически определяется к модулю приложения (можно жестко указать с помощью флага --module) и прописывается в свойстве declarations.

Чтобы пропустить автоматическое добавление сущности в проект, укажите параметр --skip-import.

ng g component my-app1 --prefix --flat --skip-import

Полный список сущностей, которые могут быть созданы с помощью ng generate:

  • class;
  • enum;
  • interface;
  • component;
  • directive;
  • pipe;
  • service;
  • guard;
  • module;
  • application;
  • library;
  • universal.

Более подробно с параметрами для каждой сущности можно ознакомиться в официальной документации Angular CLI.

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

Для многих только начинающих работу с Angular будет полезным использование ng doc. Она ищет вхождения переданного значения в разделе API документации на официальном сайте Angular. Если указан флаг --search - поиск осуществляется по всему сайту.

ng doc forRoot --search

Для запуска автоматизированных тестов (unit и e2e) имеются команды ng test и ng e2e соответственно.

Не ограничивайте себя использованием только ng serve и ng generate, старайтесь автоматизировать любой ручной труд и вы сэкономите много времени.

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