Angular CLI – это инструмент командной строки, созданный для ускорения разработки приложений на Angular. Он позволяет создавать проекты, управлять зависимостями, генерировать компоненты, сервисы и модули без ручного вмешательства в структуру проекта.
С помощью Angular CLI можно сразу настроить проект под конкретные задачи. Команда ng new создаёт готовую структуру с настроенным TypeScript, Angular Router, SCSS или CSS и поддержкой тестирования через Jasmine и Karma. Это экономит время на конфигурацию и исключает ошибки, которые часто возникают при ручной настройке.
CLI также предоставляет инструменты для сборки проекта и запуска локального сервера. ng serve автоматически пересобирает проект при изменении файлов, а ng build создаёт оптимизированную версию для продакшена с минификацией и tree-shaking. Эти функции помогают ускорить тестирование и подготовку приложения к публикации.
Angular CLI включает генераторы кода. Команды ng generate component и ng generate service создают файлы с готовой структурой и подключениями, соответствующими стандартам Angular. Это упрощает масштабирование проекта и поддержание единого стиля кода.
Для контроля качества кода CLI предлагает интеграцию с линтерами и тестовыми фреймворками. Команды ng lint и ng test анализируют код на ошибки и запускают юнит-тесты, что повышает надёжность приложения и снижает вероятность регрессий при добавлении новых функций.
Установка Angular CLI на локальный компьютер
Для установки Angular CLI необходим Node.js версии не ниже 18.0. Проверить установленную версию можно командой node -v в терминале. Рекомендуется использовать Node.js LTS, чтобы избежать несовместимости с последними версиями Angular.
Сам CLI устанавливается через пакетный менеджер npm командой npm install -g @angular/cli. Флаг -g обеспечивает глобальный доступ к командам Angular в любом каталоге системы.
После установки проверить корректность можно командой ng version. Она отображает текущую версию Angular CLI, версию Angular и информацию о Node.js и npm. Это позволяет убедиться, что все компоненты установлены и готовы к работе.
Для пользователей Windows может понадобиться запуск терминала от имени администратора при глобальной установке. На macOS и Linux при необходимости можно использовать sudo перед командой npm для получения прав суперпользователя.
Обновление Angular CLI до последней версии выполняется через npm install -g @angular/cli@latest. Перед обновлением рекомендуется удалить старую версию командой npm uninstall -g @angular/cli, чтобы избежать конфликтов версий.
Создание нового проекта с помощью команд ng new
Команда ng new создаёт новый проект Angular с преднастроенной структурой каталогов и файлами конфигурации. Синтаксис: ng new имя-проекта [опции]. Опции позволяют указать предпочтения для стилей, маршрутизации и тестирования.
Для выбора типа стилей используются ключи:
| Опция | Описание |
|---|---|
| —style=scss | Использование SCSS вместо CSS |
| —style=css | Обычные CSS-файлы |
| —style=sass | Sass без фигурных скобок |
| —style=less | LESS |
| —style=styl | Stylus |
Для включения маршрутизации применяется ключ —routing. Он автоматически создаёт app-routing.module.ts и подключает его в основной модуль приложения.
После выполнения команды Angular CLI создаёт папку проекта с готовыми каталогами: src/app для компонентов, src/assets для статических ресурсов, src/environments для конфигурации окружений. Также создаются файлы angular.json, package.json и tsconfig.json, необходимые для сборки и управления зависимостями.
Рекомендуется запускать команду внутри пустой директории или указывать уникальное имя проекта, чтобы избежать конфликта с существующими файлами.
Генерация компонентов, сервисов и модулей через Angular CLI
Angular CLI предоставляет команды для быстрого создания компонентов, сервисов и модулей с готовой структурой и подключениями.
Команды генерации:
- Компоненты: ng generate component имя-компонента или сокращённо ng g c имя-компонента. CLI создаёт каталог с HTML, CSS/SCSS, TypeScript и файлом тестов.
- Сервисы: ng generate service имя-сервиса или ng g s имя-сервиса. Файлы автоматически подключаются к DI через @Injectable.
- Модули: ng generate module имя-модуля или ng g m имя-модуля. Создаёт модуль с базовой структурой и возможностью ленивой загрузки через ключ —routing.
Дополнительные ключи упрощают организацию:
- —flat – размещает файлы без отдельной папки.
- —skip-tests – не создаёт файлы тестов.
- —module – автоматически добавляет компонент в выбранный модуль.
Для соблюдения структуры проекта рекомендуется создавать компоненты и сервисы внутри соответствующих каталогов, например app/components и app/services. Это упрощает масштабирование и поддержку кода.
Запуск и просмотр проекта в браузере через ng serve
Команда ng serve компилирует проект Angular и запускает локальный сервер для разработки. По умолчанию сервер доступен по адресу http://localhost:4200.
Для указания другого порта используется ключ —port, например: ng serve —port 4300. Это позволяет запускать несколько проектов одновременно без конфликтов портов.
Ключ —open автоматически открывает браузер с проектом после запуска: ng serve —open. Это сокращает количество ручных действий при проверке изменений.
CLI поддерживает live-reload: при изменении файлов в проекте сервер автоматически пересобирает приложение и обновляет страницу в браузере, что ускоряет тестирование интерфейса.
Для включения режима продакшена при локальном просмотре можно использовать ng serve —configuration production. Это запускает сборку с оптимизацией, минификацией и tree-shaking, позволяя оценить поведение приложения ближе к рабочей версии.
Сборка проекта для продакшена с помощью ng build
Команда ng build создаёт оптимизированную версию Angular-приложения для публикации на сервере. По умолчанию файлы собираются в каталог dist/имя-проекта.
Для сборки с оптимизациями используется ключ —prod или —configuration production. Это включает минификацию, tree-shaking и сжатие CSS и JavaScript, уменьшая размер бандлов и ускоряя загрузку приложения.
Чтобы изменить путь для выходных файлов, используется ключ —output-path: ng build —prod —output-path=build. Это удобно при деплое на сервер с нестандартной структурой каталогов.
Ключ —source-map позволяет генерировать карты исходного кода для отладки продакшен-сборки: ng build —prod —source-map. Карты помогают анализировать ошибки в минифицированном коде без раскрытия всей структуры проекта.
При использовании Angular CLI рекомендуется проверять размер бандлов после сборки и при необходимости включать lazy-loading для крупных модулей, чтобы уменьшить время первоначальной загрузки.
Использование Angular CLI для тестирования и линтинга кода
Angular CLI включает встроенные инструменты для проверки качества кода и автоматического тестирования. Они помогают выявлять ошибки до деплоя и поддерживать единый стиль разработки.
Для запуска юнит-тестов используется команда ng test. Она автоматически выполняет тесты, написанные с помощью Jasmine, и показывает результаты в терминале или браузере. Для непрерывного наблюдения за изменениями применяется ключ —watch.
(пока оценок нет)
Загрузка...
