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, остальные используются крайне редко. С полным перечнем можно ознакомиться на официальном сайте.