ng serve и команды CLI

Во время работы вы постоянно пользуетесь несколькими командами CLI: одна запускает сервер разработки, другая создаёт заготовки файлов. Генерировать файлы командой удобнее, чем руками: CLI сразу пишет правильный каркас и тест.

Сервер разработки

ng serve

Команда собирает приложение и открывает его по адресу http://localhost:4200. Пока сервер работает, он следит за файлами: после сохранения страница в браузере обновляется сама. Остановить сервер — Ctrl+C.

Полезные флаги:

ng serve --open        # сразу открыть браузер
ng serve --port 4300   # другой порт

Ошибки TypeScript и шаблонов выводятся в терминал и поверх страницы в браузере.

Генерация файлов

Команда ng generate (коротко ng g) создаёт заготовку нужного вида. Создадим первый компонент — список дел:

ng generate component todo-list

CLI создаст папку src/app/todo-list с четырьмя файлами:

src/app/todo-list/
├── todo-list.ts
├── todo-list.html
├── todo-list.css
└── todo-list.spec.ts

Класс компонента называется TodoList, а его тег — app-todo-list. В версиях до 20 файлы назывались todo-list.component.ts, а класс — TodoListComponent.

Что ещё умеет ng generate

Имя можно задать с папкой: ng g component blog/post-list создаст компонент в src/app/blog/post-list. Флаг --skip-tests не создаёт файл теста, а --dry-run только показывает, какие файлы появились бы.

Другие команды

Справку по любой команде показывает флаг --help, например ng generate component --help.

Частая ошибка

Компонент можно создать вручную, но тогда легко ошибиться в имени селектора или забыть файл стилей, на который ссылается styleUrl. Сборка остановится с ошибкой «не удалось найти файл». Пока вы учитесь, создавайте файлы через ng generate.