Angular CLI: установка и конфигурация

Установка Angular CLI

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

Шаг 1: Установка Node.js и npm

Перед тем как приступить к установке Angular CLI, необходимо убедиться, что на системе установлены Node.js и npm (Node Package Manager), так как Angular CLI зависит от этих инструментов для работы.

  1. Перейдите на официальный сайт Node.js (https://nodejs.org).
  2. Скачайте и установите последнюю стабильную версию Node.js.
  3. После установки убедитесь, что Node.js и npm корректно установлены, выполнив в командной строке следующие команды:
node -v
npm -v

Если версии Node.js и npm отображаются корректно, можно переходить к следующему шагу.

Шаг 2: Установка Angular CLI

Для установки Angular CLI используется менеджер пакетов npm. В командной строке выполните следующую команду:

npm install -g @angular/cli

Опция -g указывает, что Angular CLI будет установлен глобально, что позволяет запускать его из любой директории. После выполнения команды система скачает и установит последнюю версию Angular CLI.

Для проверки успешности установки можно выполнить команду:

ng version

Команда выведет информацию о текущей версии Angular CLI, а также версии Node.js и других зависимостей, которые установлены.

Создание нового проекта Angular

После установки Angular CLI можно приступить к созданию нового проекта. Для этого необходимо выполнить команду:

ng new my-angular-app

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

Во время создания проекта Angular CLI предложит несколько вопросов, касающихся конфигурации проекта:

  • Do you want to add Angular routing? — нужен ли вам роутинг (если ваш проект будет использовать несколько страниц).
  • Which stylesheet format would you like to use? — выбор формата для стилей: CSS, SCSS, Sass и т.д.

После того как все настройки будут выбраны, Angular CLI автоматически установит все зависимости и создаст базовую структуру проекта.

Структура проекта

При создании нового проекта Angular CLI генерирует несколько ключевых директорий и файлов:

  • e2e — папка с файлами для тестирования через Protractor (end-to-end).
  • node_modules — папка с зависимостями проекта.
  • src/app — основная папка с исходным кодом приложения.
  • src/assets — папка для хранения статичных ресурсов, таких как изображения.
  • angular.json — основной конфигурационный файл Angular.
  • package.json — файл с описанием зависимостей и скриптов.
  • tsconfig.json — файл конфигурации TypeScript.
  • tslint.json — конфигурация линтера для TypeScript.

Запуск проекта

Для того чтобы начать разработку и увидеть результат, можно запустить локальный сервер с помощью команды:

cd my-angular-app
ng serve

Эта команда компилирует проект и запускает сервер, доступный по адресу http://localhost:4200. При внесении изменений в исходный код браузер автоматически обновится, благодаря функции “горячей перезагрузки” (hot-reloading).

Конфигурация Angular CLI

Файл angular.json является центральным местом для конфигурации проекта. В нем содержится информация о структуре проекта, настройках для сборки и деплоя. Рассмотрим несколько основных параметров:

  • projects — раздел, где указаны все проекты, входящие в текущую рабочую среду.
  • architect.build — настройки сборки, такие как выходная директория, оптимизация и минимизация кода.
  • architect.serve — настройки для локального сервера, включая порт и пути к статическим файлам.
  • architect.test — настройки для выполнения unit-тестов через Karma.

Пример конфигурации для сборки:

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "outputPath": "dist/my-angular-app",
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.app.json",
    "assets": [
      "src/assets",
      "src/favicon.ico"
    ],
    "styles": [
      "src/styles.css"
    ],
    "scripts": []
  }
}

Этот раздел конфигурации указывает, куда будет размещен собранный проект, какие файлы должны быть включены в сборку и какие стили или скрипты нужно подключить.

Обновление и управление зависимостями

Angular CLI упрощает процесс управления зависимостями и их обновления. Для того чтобы обновить Angular CLI до последней версии, нужно выполнить команду:

ng update @angular/cli

Если необходимо обновить весь проект Angular до последней версии, используется команда:

ng update @angular/core

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

Конфигурация линтинга и форматирования кода

Angular CLI предоставляет возможность интеграции с инструментами линтинга и форматирования, такими как TSLint и Prettier. Эти инструменты помогают поддерживать код в чистоте и порядке, автоматически исправляя потенциальные ошибки стиля.

Файл конфигурации TSLint tslint.json включает в себя правила для линтинга TypeScript-кода. Если необходимо изменить или добавить новые правила, можно отредактировать данный файл.

Пример конфигурации TSLint:

{
  "extends": ["tslint:recommended"],
  "rules": {
    "no-console": [true, "log"],
    "quotemark": [true, "single"]
  }
}

Этот файл включает базовые рекомендации и собственные правила для проекта.

Выводы

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

Оглавление