Установка Angular CLI: ng new, ng serve

1. Знакомство с Angular CLI

Angular CLI (Command Line Interface) — это официальный инструмент командной строки для работы с Angular. Если вы когда-нибудь пытались вручную собрать проект на Webpack, настроить TypeScript, подключить тесты и линтеры, то вы знаете, что это похоже на сборку мебели из IKEA без инструкции. Angular CLI — это та самая инструкция, только ещё и мебель за вас собирает!

CLI умеет:

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

Факт:
CLI — это стандарт де-факто для всех современных Angular-проектов. Если вы встретили проект без CLI — скорее всего, это антиквариат.

2. Установка Node.js и npm

Перед тем как установить Angular CLI, нужно убедиться, что у вас есть Node.js и npm. Angular написан на TypeScript, а TypeScript компилируется с помощью Node.js. npm — это менеджер пакетов для Node.js, через который мы и будем устанавливать CLI.

Да, я знаю, что вы уже умеете ставить Node.js, он у вас стоит 100%. Но эта лекция — это фактически полная инструкция. Вы можете поделиться ей с другом. Вернуться через 3 месяца к идее изучать Angular и т.п. Поэтому будет очень разумно, если инструкция будет полная. Без "вы это изучали в предыдущих лекциях".

Как проверить наличие Node.js и npm?

Откройте терминал (или командную строку, если вы на Windows) и введите:

node -v
npm -v

Если вы увидите версии (например, v20.10.0 и 10.2.4), значит, всё в порядке. Если команда не найдена — скачайте Node.js с официального сайта. npm идёт в комплекте, отдельно ставить не нужно.

Совет:
Старайтесь использовать LTS-версию Node.js (Long Term Support), чтобы избежать неожиданных сюрпризов с совместимостью.

3. Установка Angular CLI

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

Команда для установки

npm install -g @angular/cli

• -g означает "глобально" — CLI будет доступен из любого места на вашем компьютере.
• @angular/cli — это имя пакета.

Пояснение:
Если вы используете MacOS или Linux, возможно, понадобится добавить sudo перед командой для установки глобальных пакетов.

Проверка установки

После установки проверьте, что всё работает:

ng version

Вы должны увидеть версию Angular CLI и сопутствующих пакетов.

ng - это сокращение от Angular. Не спрашивайте меня почему. 😅

4. Создание нового проекта: команда ng new

Теперь мы готовы создать первый Angular-проект! Для этого используем команду:

ng new my-first-app

my-first-app — это имя папки и будущего проекта. Вы можете выбрать любое имя (главное — без пробелов и спецсимволов).

Что происходит при запуске ng new?

1. CLI задаёт несколько вопросов:
   • Хотите ли вы добавить Angular routing?
     Если планируете использовать навигацию между страницами — смело отвечайте Yes.
   • Какой стиль использовать для CSS?
     Обычно предлагают выбрать между CSS, SCSS, Sass, Less и Stylus. Если не знаете — выбирайте CSS.
2. CLI создаёт новую папку с именем проекта, внутри которой:
   • готовая структура директорий;
   • конфиги для TypeScript, тестов, линтинга;
   • базовые файлы приложения;
   • установленные зависимости (npm пакеты).
3. После завершения установки у вас будет рабочий проект, готовый к запуску.

Пример диалога:

? Would you like to add Angular routing? (y/N) y
? Which stylesheet format would you like to use? (Use arrow keys)
❯ CSS
  SCSS [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less [ http://lesscss.org                                             ]
  Stylus [ http://stylus-lang.com                                       ]

Совет:
Если вы не любите отвечать на вопросы, можно добавить флаги:

ng new my-first-app --routing --style=scss

(или --style=css)

5. Запуск локального сервера: команда ng serve

Самое время увидеть результат своих трудов! Перейдите в папку проекта:

cd my-first-app

Запустите сервер разработки:

ng serve

или сокращённо:

ng s

Что делает ng serve?

• Собирает приложение (компилирует TypeScript, собирает модули, подключает стили и т.д.).
• Запускает локальный сервер (по умолчанию на http://localhost:4200).
• Следит за изменениями файлов: если вы что-то меняете в коде — страница автоматически перезагружается.

Вывод в терминале:

✔ Browser application bundle generation complete.
...
✔ Compiled successfully.

Откройте браузер и перейдите на http://localhost:4200 — вы увидите приветственную страницу Angular!

6. Структура проекта, созданного CLI

Давайте бегло посмотрим, что внутри папки проекта:

my-first-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   ├── app.component.html
│   │   └── ... (ещё несколько файлов)
│   └── main.ts
├── angular.json
├── package.json
├── tsconfig.json
└── ... (ещё несколько файлов)

• src/ — основная папка с исходным кодом.
• app/ — здесь будут ваши компоненты.
• angular.json — главный конфиг Angular-проекта.
• package.json — зависимости, скрипты и метаданные.
• tsconfig.json — настройки TypeScript.

Факт:
Angular CLI сразу настраивает проект для работы с TypeScript, тестами, линтингом и сборкой. Вам не придётся вручную ковыряться в конфигах (если только не захочется поиграть в DevOps).

7. Создаём и запускаем свой первый Angular-проект

Давайте повторим шаги вместе:

1. Убедитесь, что Node.js и npm установлены.
2. Установите Angular CLI:

   npm install -g @angular/cli
   

3. Создайте новый проект:

   ng new my-angular-demo
   

   Выберите нужные опции (routing, стиль).
4. Перейдите в папку проекта:

   cd my-angular-demo
   

5. Запустите сервер:

   ng serve
   

6. Откройте http://localhost:4200 в браузере.

Поздравляю! Вы только что создали своё первое Angular-приложение. Теперь можно хвастаться друзьям, что вы не просто верстаете странички, а разрабатываете настоящие SPA (Single Page Applications).

8. Полезные команды Angular CLI

CLI — это не только ng new и ng serve. Вот ещё несколько команд, которые пригодятся уже скоро:

• ng generate component my-component или коротко ng g c my-component — создать новый компонент.
• ng build — собрать проект для продакшена.
• ng test — запустить тесты.
• ng lint — проверить код на стиль и ошибки.
• ng help — посмотреть список всех команд.

Совет:
Не бойтесь экспериментировать! CLI можно вызвать с флагом --help для любой команды, чтобы узнать о возможностях.

9. Типичные ошибки при установке и запуске Angular CLI

Ошибка №1: "ng: command not found"
Обычно это значит, что npm не добавил Angular CLI в PATH. Попробуйте перезапустить терминал или добавить npm global bin в PATH вручную. Если не помогает — переустановите CLI.

Ошибка №2: "EACCES: permission denied" на Mac/Linux
Это связано с правами доступа при глобальной установке пакетов. Используйте sudo npm install -g @angular/cli или настройте права на папку npm.

Ошибка №3: "Port 4200 is already in use"
Порт уже занят другим процессом (например, вы забыли закрыть старый сервер). Остановите предыдущий процесс или запустите сервер на другом порте:

ng serve --port 4300

Ошибка №4: "Cannot find module '@angular/cli'"
Возможно, CLI был установлен не глобально или не в ту версию Node.js (если используете nvm). Проверьте, что npm list -g @angular/cli показывает установленный пакет.

Ошибка №5: "Your global Angular CLI version is greater/less than your local version"
Иногда проект использует другую версию CLI, чем установлена глобально. Обычно это не критично, но лучше обновить глобальную и локальную версии до одинаковых (или запускать команды через npx ng ...).