Шпаргалка Angular CLI: основные команды и флаги

Development | Amber | Комментировать запись

В этой шпаргалке вы найдете команды Angular CLI, необходимые для выполнения самых распространенных задач.

Читайте также: Запуск Angular с помощью строки Angular CLI

Проверка версии

Чтобы узнать, какую версию Angular CLI вы используете, введите:

ng --version

Обновление Angular CLI

Чтобы обновить свой пакет, введите:

npm uninstall -g @angular/cli cache clean
npm install -g @angular/cli@latest

Справка

Справочная информация доступна по этой команде:

ng help

Чтобы получить информацию о конкретной команде, введите ее название, например:
ng help generate

Новый проект

Создать новый проект можно с помощью:

ng new my-app

Эта команда поддерживает множество флагов:

• –dry-run: покажет, какие файлы будут созданы, но на самом деле ничего не сделает.
• –verbose: расширенный вывод.
• –skip-install: пропустит установку npm (полезно в оффлайн режиме или при медленном интернете).
• –skip-tests: пропустит создание файлов спецификаций.
• –skip-git: пропустит инициализацию репозитория git.
• –source-dir: задает имя исходного каталога
• –routing: добавит маршрутизацию в приложение.
• –prefix: задает префикс для селекторов компонентов.
• –style: по умолчанию используется css, но можно установить scss.
• –inline-style: использует встроенные стили компонентов вместо отдельных файлов.
• –inline-template: использует для компонентов встроенные шаблоны вместо отдельных файлов.

Вот пример команды с несколькими флагами:

ng new my-app --prefix yo --style scss --skip-tests --verbose

Команды для создания

Эта команда сгенерирует компонент:

ng g c unicorn-component

Эта команда сгенерирует сервис:

ng g s everything-service

А эта – конвейер:

ng g pipe my-pipe

Чтобы сгенерировать директиву, введите:

ng g directive my-directive

Сгенерировать перечисление:

ng g enum some-enum

Эта команда сгенерирует модуль:

ng g module fancy-module

Чтобы создать класс:

ng g cl my-class

Эта команда сгенерирует интерфейс:

ng g interface my-interface

Чтобы создать route guard, используйте:

ng g guard my-guard

Флаги –dry-run и –verbose можно использовать с любой командой из этого раздела.

Команды обслуживания

Для обслуживания проекта введите:

ng s

Чтобы запустить обслуживание проекта и автоматически открыть его в браузере:

ng s -o

Обслуживание проекта по конкретному порту можно запустить при помощи:

ng s --port 5555

Команды тестирования

Для запуска теста существует команда:

ng test

Эта команда принимает следующие флаги:

• –watch: повторное тестирование после изменения некоторых файлов.
• –code-coverage: добавит отчет о покрытии кода.
• –progress: показывает прогресс выполнения тестов.
• –browsers: указывает, какие браузеры использовать.
• –colors: включает/отключает цветной вывод.

Чтобы включить линтер, введите:

ng lint

Эта команда принимает флаги:

• –fix: исправляет ошибки, обнаруженные линтером.
• –force: выводит успешный результат, даже если линтинг нашел ошибки.

Команды сборки

Собрать приложение можно с помощью команды:

ng build

А вот несколько флагов, которые можно использовать при сборке:

• –target: задает цель сборки (например: –target production).
• –aot: использует предварительную компиляцию.
• –base-href: указывает базовую гиперссылку.
• –deploy-url: указывает URL-адрес развертывания.
• –extract-css: поместит глобальные стили в файл CSS вместо того, чтобы хранить его в JavaScript.
• –watch: будет пересобирать приложение после каждого изменения файла.

Извлечение конфигурации Webpack

Angular CLI больше не поддерживает ваш проект? Просто используйте эту команду, и у вас будет полная конфигурация Webpack, которую вы сможете откорректировать по вашему желанию:

ng eject

Заключение

Теперь вы знаете наиболее часто используемые команды и флаги Angular CLI.