Angular cli что это

Angular CLI¶

Angular CLI — это npm-модуль, реализующий интерфейс командной строки для создания, разработки и поддержки Angular приложений. В системе он должен быть установлен глобально.

npm i @angular/cli -g 

Начнем с команды ng new . Она генерирует скелет вашего будущего приложения.

ng new my-app 

my-app — это название вашего проекта (может быть любым). Angular CLI создаст одноименную директорию и поместит в нее исходные файлы «скелета» для вашего приложения.

По умолчанию в только что сгенерированном проекте имеется только один компонент AppComponent , который содержит приветствующий текст. Для запуска приложения используйте ng serve .

ng serve -o 

Теперь приложение запущено и доступно по адресу http://localhost:4200 (по умолчанию). Параметр -o указывает, что после сборки приложение должно автоматически открыться в браузере.

Если вам необходим другой порт или у вас статический IP-адрес и вы хотите осуществлять доступ именно по нему, используйте флаги port и host .

ng serve -o --port 5000 --host x.x.x.x 

Теперь вернемся к ng new и рассмотрим ее основные параметры:

style задает для проекта расширение файлов CSS (sass, less, css — по умолчанию); routing если указан, создается модуль маршрутизации; inline-style если указан, все стили вписываются в компонент в строковом виде; inline-template если указан, весь HTML-код вписывается в компонент в строковом виде.

С полным перечнем возможных флагов можно ознакомиться здесь.

Другая незаменимая команда Angular CLI — ng generate . Она генерирует «скелет» любой сущности Angular.

ng generate component my-app1 --prefix --flat 

или более краткая запись

ng g component my-app1 --prefix --flat 

Если сущность может быть покрыта unit-тестами, для нее дополнительно создается файл *.spec.ts .

Параметр —prefix указывает префикс генерируемых сущностей (по умолчанию app ). Если указать его без значения, то префикс будет опущен.

Параметр —flat указывает, что для генерируемой сущности не будет создана директория и все файлы будут помещены в то место, откуда была вызвана команда.

Причем создание осуществляется Angular CLI интеллектуально. Например, при создании компонента он автоматически определяется к модулю приложения (можно жестко указать с помощью флага —module ) и прописывается в свойстве declarations .

Чтобы пропустить автоматическое добавление сущности в проект, укажите параметр —skip-import .

ng g component my-app1 --prefix --flat --skip-import 

Полный список сущностей, которые могут быть созданы с помощью ng generate :

• class ;
• enum ;
• interface ;
• component ;
• directive ;
• pipe ;
• service ;
• guard ;
• module ;
• application ;
• library ;
• universal .

Более подробно с параметрами для каждой сущности можно ознакомиться в официальной документации Angular CLI.

Ключевую роль также имеет ng build . Команда используется для сборки версии приложения, которая обычно запускается на удаленном сервере.

Для многих только начинающих работу с Angular будет полезным использование ng doc . Она ищет вхождения переданного значения в разделе API документации на официальном сайте Angular. Если указан флаг —search — поиск осуществляется по всему сайту.

ng doc forRoot --search 

Для запуска автоматизированных тестов (unit и e2e) имеются команды ng test и ng e2e соответственно.

Не ограничивайте себя использованием только ng serve и ng generate , старайтесь автоматизировать любой ручной труд и вы сэкономите много времени.

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

Введение в Angular

Angular представляет фреймворк от компании Google для создания клиентских приложений. Прежде всего он нацелен на разработку SPA-решений (Single Page Application), то есть одностраничных приложений. В этом плане Angular является наследником другого фреймворка AngularJS. В то же время Angular это не новая версия AngularJS, а принципиально новый фреймворк.

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

Одной из ключевых особенностей Angular является то, что он использует в качестве языка программирования TypeScript. Поэтому перед началом работы рекомендуется ознакомиться с основами данного языка, про которые можно прочитать здесь.

Но мы не ограничены языком TypeScript. При желании можем писать приложения на Angular с помощью таких языков как Dart или JavaScript. Однако TypeScript все таки является основным языком для Angular.

Последняя версия Angular — Angular 17 вышла в ноябре 2023 года. Официальный репозиторий фреймворка на гитхабе: https://github.com/angular/angular. Там вы можете найти сами исходные файлы, а также некоторую дополнительную информацию.

Начало работы c Angular

Для работы с Angular необходимо установить сервер Node.js и пакетный менеджер npm , если они отсутствуют на рабочей машине. При этом особого какого-то знания для работы с NodeJS и npm не требуется. Для установки можно использовать программу установки node.js. Вместе с сервером она также установит и npm.

Следует учитывать, что Angular поддерживает те версии node.js, которые в текущий момент находятся в статусе «Active LTS» или «Maintenance LTS». На момент написания данной статьи это версии 18 и 20. Поэтому, если Node.js уже ранее был установлен, но имеет более старую или, наоборот новую, но еще не поддерживаемую версию, то лучше его обновить. Проверить совместимость версий node.js (а также версий typescript и библиотеки RxJS) для определенных версий Angular можно по адресу: https://angular.dev/reference/versions. Так, для последний на данный момент версии Angular 17 требования следующие:

• Версия Node.js должна быть либо 18 начиная с подверсии 18.13.0, либо 20 начиная с подверсии 20.9.0
• Версия TypeScript должна быть 4.9.3 и выше, но ниже 5.3.0 (нужная версия TypeScript устанавливается локально в проект)

То же самое касается и npm . Если версия слишком старая или, наоборот, одна из последних, то Angular может ее не поддерживать. При работе с Angular лучше полагаться на ту версию npm, которая устанавливается вместе с LTS-версией Node.js.

Установка Angular CLI

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

npm install -g @angular/cli

Данная команда установит пакет @angular/cli в качестве глобального модуля, поэтому в последующем при создании новый проектов Angular его не потребуется устанавливать заново.

Ту же команду можно использовать для обновления Angluar CLI при выходе новой версии фреймворка. Проверить версию CLI можно в командной строке/консоли с помощью команды:

ng version

Если Angluar CLI уже был установлен, то можно его обновить с помощью команды:

ng update

При работе на Windows и выполнении команд в PowerShell вместо командной строки стоит учитывать, что по умолчанию выполнение скриптов в PowerShell отключено. Чтобы разрешить выполнение скриптов PowerShell (что требуется для npm), необходимо выполнить следующую команду:

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

После установки необходимых инструментов создадим простейшее приложение. Для этого определим на жестком диске папку проекта. Путь она будет называться helloapp .

Установка пакетов. Package.json

В выше созданной папке проекта создадим новый файл package.json со следующим содержимым:

< "name": "helloapp", "version": "1.0.0", "description": "First Angular 17 Project", "author": "Eugene Popov metanit.com", "scripts": < "ng": "ng", "start": "ng serve", "build": "ng build" >, "dependencies": < "@angular/common": "~17.0.0", "@angular/compiler": "~17.0.0", "@angular/core": "~17.0.0", "@angular/forms": "~17.0.0", "@angular/platform-browser": "~17.0.0", "@angular/platform-browser-dynamic": "~17.0.0", "@angular/router": "~17.0.0", "rxjs": "~7.8.0", "zone.js": "~0.14.2" >, "devDependencies": < "@angular-devkit/build-angular": "~17.0.0", "@angular/cli": "~17.0.0", "@angular/compiler-cli": "~17.0.0", "typescript": "~5.2.2" >>

Данный файл устанавливает пакеты и зависимости, которые будут использоваться проектом. В секции dependencies в основном определяются пакеты angular, которые необходимы приложению для работы. В секции devDependencies прописаны только те пакеты, которые будут использоваться для разработки. В частности, это пакеты для работы с языком typescript (так как мы будем писать код приложения на языке TypeScript), а также пакеты, необходимые для компиляции приложения с помощью инфраструктуры Angular CLI.

В секции «scripts» описаны используемые команды. В частности, команда ng serve запускает простенький веб-сервер для тестирования приложения и само приложение. А команда ng build компилирует приложение.

Затем откроем командную строку (терминал) и перейдем в ней к папке проекта с помощью команды cd:

C:\WINDOWS\system32>cd C:\angular\helloapp

И затем выполним команду npm install , которая установит все необходимые модули:

C:\angular\helloapp>npm install added 923 packages, and audited 924 packages in 1m 115 packages are looking for funding run `npm fund` for details found 0 vulnerabilities C:\angular\helloapp>

После выполнения этой команды в папке проекта должна появиться подпапка node_modules , которая содержит все используемые зависимости и пакеты.

Определение приложения

Затем создадим в папке проекта подпапку, которую назовем src — она будет содержать все исходные файлы. И далее в папке src создадим подкаталог app .

Создание компонента Angular

Компоненты представляют основные строительные блоки приложения Angular. Каждое приложение Angular имеет как минимум один компонент. Поэтому создадим в папке src/app новый файл, который назовем app.component.ts и в котором определим следующий код компонента:

import < Component >from «@angular/core»; import from «@angular/forms»; @Component(< selector: "my-app", standalone: true, imports: [FormsModule], template: `Введите имя:

Добро пожаловать >!

` >) export class AppComponent

В начале файла определяется директива import , которая импортирует функциональность модуля angular/core , предоставляя доступ к функции декоратора @Component . И также импортируем модуль FormsModule, который понадобится для работы с полями ввода.

Далее собственно идет функция-декоратор @Component , которая ассоциирует метаданные с классом компонента AppComponent. В эту функцию передается конфигурационных объект с рядом параметров:

• параметр selector определяет селектор css для HTML-элемента, который будет представлять компонент. В данном случае это селектор «my-app». То есть на веб-странице приложения должен быть элемент «», и в этот элемент будет загружаться приложение Angular
• параметр standalone: true указывает, что компонент будет независимым, то есть для него не нужно создавать дополнительных модулей, что уменьшает и упрощает код приложения
• параметр imports импортирует в компонент другие модули. Сторонние модули могут содержать различный функционал, который мы можем использовать. Например, в нашем случае мы будем использовать поле ввода, куда пользователь будет вводить имя. И для работы с этим полем ввода импортируем в компонент модуль FormsModule.
• параметр template представляет шаблон или визуальную часть компонента — то, что мы собственно увидим в браузере. В частности, в шаблоне определено поле ввода, куда пользователь будет вводить имя. А в заголовке h1 будет выводиться введенное значение. Для связи поля ввода и заголовка применяется двусторонняя привязка поля с помощью выражений [(ngModel)]=»name» и > к некоторой модели name.

И в конце собственно экспортируется класс компонента AppComponent, в котором как раз определяется переменная name — в данном случае это пустая строка.

Запуск приложения

Теперь нам надо указать Angular, как запускать наше приложение. Для этого создадим в папке src (на уровень выше, чем расположен файл «app.component.ts») файл main.ts со следующим содержимым:

import < bootstrapApplication >from "@angular/platform-browser"; import < AppComponent >from "./app/app.component"; bootstrapApplication(AppComponent).catch(e => console.error(e));

Этот код запускает приложение в виде ранее определенного компонента AppComponent. При возникновении ошибок они выводятся на консоль.

Создание главной страницы

Далее определим в папке src главную страницу index.html приложения:

      Загрузка.   

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

Определение конфигурации

Поскольку для определения кода приложения применяется язык TypeScript, поэтому также создадим в корневой папке проекта новый файл tsconfig.json :

< "compileOnSave": false, "compilerOptions": < "baseUrl": "./", "sourceMap": true, "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, "module": "ES2022", "moduleResolution": "node", "target": "ES2022", "typeRoots": [ "node_modules/@types" ], "lib": [ "ES2022", "dom" ] >, "files": [ "src/main.ts" ], "include": [ "src/**/*.d.ts"] >

Данный файл определяет настройки для компилятора TypeScript. Опция «compilerOptions» устанавливает параметры компиляции. А опция «files» определяет компилируемые файлы. В нашем случае это файл приложения — main.ts, который подтягивает все остальные файлы приложения.

Angular.json

Для компиляции приложения мы будем использовать Angular CLI, поэтому нам надо описать поведение CLI с помощью файла angular.json. Итак, добавим в корневую папку проекта новый файл angular.json и определим в нем следующее содержимое:

 < "version": 1, "projects": < "helloapp": < "projectType": "application", "root": "", "sourceRoot": "src", "architect": < "build": < "builder": "@angular-devkit/build-angular:browser", "options": < "outputPath": "dist/helloapp", "index": "src/index.html", "main": "src/main.ts", "polyfills": ["zone.js"], "tsConfig": "tsconfig.json", "aot": true >>, "serve": < "builder": "@angular-devkit/build-angular:dev-server", "options": < "buildTarget": "helloapp:build" >> > > > >

Вкратце пройдемся по структуре файле. Вначале определяется параметр version . Он определяет версию конфигурации проекта.

Далее идет секция projects , которая определяет настройки для каждого проекта. В нашем случае у нас только один проект, который называется по названию каталога проекта — helloapp.

Проект определяет следующие опции:

• projectType : тип проекта. Значение «application» указывает, что проект будет представлять приложение, которое можно будет запускать в браузере
• root : указывает на папку файлов проекта относительно рабочей среды. Пустое значение соответствует корневой папке проекта, так как в данном случае рабочая среда и каталог проекта совпадают
• sourceRoot : определяет корневую папку файлов с исходным кодом. В нашем случае это папка src, где собственно определены все файлы приложения
• architect : задает настройки для построения проекта. В файле package.json определены команды build и serve , и для каждой из этих команд в секции architect заданы свои настройки. Для каждой команды задается параметр builder , который определяет инструмент для построения проекта. Так, для команды «build» задано значение «@angular-devkit/build-angular:browser» — данный билдер для построения использует сборщик пакетов webpack. А для команды «serve» задано значение «@angular-devkit/build-angular:dev-server» — данный билдер запускает веб-сервер и развертывает на нем скомпилированное приложение.

Параметр options задает параметры построения файлов. Для команды «build» здесь определены следующие опции:

• outputPath : путь, по которому будет публиковаться скомпилированное приложение
• index : путь к главной странице приложения
• main : путь к главному файлу приложения, где собственно запускается приложение Angular
• polyfills : путь к файлам полифилов, в качестке которого выступает «zone.js»
• tsConfig : путь к файлу конфигурации TypeScript
• aot : указывает, будет ли использоваться компиляция AOT (Ahead-Of-Time) (предварительная компиляция перед выполнением). В данном случае значение true означает, что она используется

Для команды «serve» указана только одна опцияя — buildTarget , которая содержит ссылку на конфигурацию для команды build — «helloapp:build». То есть по сути эта команда использует ту же конфигурацию, что и команда build.

Если мы используем TypeScript для работы с Angular и Angular CLI для компиляции, то эти файлы package.json, tsconfig.json и angular.json фактически будут присутствовать в каждом проекте. И их можно переносить из проекта в проект с минимальными изменениями. Например, в файле angular.json вместо названия проекта «helloapp» будет соответствующее название проекта. В файле package.json можно будет задать какие-то другие версии пакетов, если предыдущие версии устарели. Можно будет изменить название проекта, версию. Можно подправить настройки TypeScript или Angular CLI, но в целом общая организация будет той же.

В итоге у нас получится следующая структура проекта:

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

И теперь, когда все готово, мы можем запустить проект. Для этого в командной строке (терминале) перейдем к папке проекта с помощью команды cd и затем выполним команду ng serve :

C:\WINDOWS\system32>cd C:\angular\helloapp C:\angular\helloapp>ng serve --open

Консольный вывод проинформирует нас, какие файлы какого размера созданы. Кроме того, мы сможем увидеть адрес, по которому запущен тестовый веб-сервер — по умолчанию это «http://localhost:4200/». Если мы передаем команде флаг —open , как в случае выше, то Angular CLI автоматически открывае браузер с запущенным приложением. И мы можем обратиться к приложению:

Введем в текстовое поле какое-нибудь имя, и оно тут же отобразится в заголовке.

Важно отметить, что пока приложение запущено, мы можем поменять код, и Angular CLI почти моментально перекомпилирует и перезапустит приложение.

Введение в Angular CLI

В этом посте мы узнаем об Angular CLI и увидим, как использовать его для инициализации нового Angular проекта.

Что такое Angular CLI?

Angular CLI — официальный инструмент для инициализации и работы с Angular-проектами. Это избавит вас от хлопот сложных конфигураций и инструментов сборки, таких как TypeScript, Webpack и так далее.

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

Как и большинство современных инструментов веб-интерфейса, Angular CLI построен на основе Node.js.

Node.js — это серверная технология, которая позволяет запускать JavaScript на сервере и создавать веб-приложения на стороне сервера. Тем не менее, Angular — это интерфейсная технология, поэтому даже если вам нужно установить Node.js на ваш компьютер для разработки, он предназначен только для запуска CLI.

Как только вы создадите бандл своего приложения (соберете готовую сборку для публикации в продакшене), вам не понадобятся Node.js, потому что финальные пакеты — это просто статический HTML, CSS и JavaScript, которые могут обслуживаться любым сервером или CDN.

Тем не менее, если вы создаете полнофункциональное веб-приложение с Angular, вам может понадобиться Node.js для создания серверной части, если вы хотите использовать JavaScript для интерфейса и серверной части.

Ознакомьтесь со стеком MEAN — это архитектура, которая включает MongoDB, Express (веб-сервер и инфраструктуру REST API, построенную на основе Node.js) и Angular. Вы можете прочитать эту статью, если хотите начать работу с пошаговым руководством.

В этом случае Node.js используется для создания серверной части вашего приложения и может быть заменен любой серверной технологией, которую вы хотите, например, PHP, Ruby или Python. Но Angular не зависит от Node.js, за исключением его инструмента CLI и установки пакетов из npm.

NPM означает Node Package Manager. Это реестр для размещения пакетов Node. В последние годы он также использовался для публикации внешних пакетов и библиотек, таких как Angular, React, Vue.js и даже Bootstrap.

Установка Angular CLI

Во-первых, вам нужно установить Node и npm на вашем компьютере для разработки. Есть много способов сделать это:

1. использование NVM (Node Version Manager) для установки и работы с несколькими версиями Node в вашей системе
2. используя официальный менеджер пакетов вашей операционной системы
3. установка его с официального сайта.

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

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

$ node -v 

Затем выполните следующую команду для установки Angular CLI:

$ npm install @angular/cli 

На момент написания этой статьи будет установлен Angular 8.3.

Если вы хотите установить Angular 9, просто добавьте тег next следующим образом:

$ npm install @angular/cli@next 

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

Краткое руководство по Angular CLI

После установки Angular CLI вы можете запустить много команд. Начнем с проверки версии установленного CLI:

$ ng version 

Вторая команда, которую вам может потребоваться выполнить, — это команда help для получения полной справки по использованию:

$ ng help 

CLI предоставляет следующие команды:

add : Добавляет поддержку внешней библиотеки в ваш проект.

build (b) : Компилирует приложение Angular в каталог с именем dist/ по указанному пути. Должен выполняться из каталога рабочей области.

config : Извлекает или устанавливает значения Angular конфигурации.

doc (d) : Открывает официальную документацию Angular (angular.io) в браузере и выполняет поиск по заданному ключевому слову.

e2e (e) : Создает и обслуживает приложение Angular, затем запускает сквозные тесты с использованием Protractor.

generate (g) : Генерирует и / или изменяет файлы на основе схемы.

help : Список доступных команд и их краткое описание.

lint (l) : Запускает инструменты проверки кода приложения Angular в данной папке проекта.

new (n) : Создает новое рабочее пространство и начальное приложение Angular.

run : Запускает пользовательскую цель, определенную в вашем проекте.

serve (s) : Создает и обслуживает ваше приложение, перестраивая изменения файла.

test (t) : Запуск модульных тестов в проекте.

update : Обновляет ваше приложение и его зависимости. Подробнее смотрите https://update.angular.io/

version (v) : Вывод Angular версии CLI.

xi18n : Извлекает i18n из исходного кода.

Генерация проекта

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

$ ng new frontend 

Примечание: frontend — это название проекта. Конечно, вы можете выбрать любое допустимое имя для вашего проекта. Поскольку мы создадим приложение с полным стеком, я использую frontend в качестве имени для внешнего приложения.

Как упоминалось ранее, CLI спросит вас, хотите ли вы добавить Angular Routing и вы можете ответить, введя y (Да) или n (Нет), что является вариантом по умолчанию. Он также спросит вас о формате таблицы стилей, который вы хотите использовать (например, CSS). Выберите ваши варианты и нажмите, Enter чтобы продолжить.

После этого ваш проект будет создан со структурой каталогов и набором конфигураций и файлов кода. Это будет в основном в форматах TypeScript и JSON. Давайте посмотрим роль каждого файла:

• /e2e/ : содержит сквозные (имитирующие поведение пользователя) тесты сайта
• /node_modules/ : Все сторонние библиотеки установлены в эту папку с помощью npm install
• /src/ : содержит исходный код приложения. Большая часть работы будет сделана здесь
• /app/ : содержит модули и компоненты
• /assets/ : содержит статические ресурсы, такие как изображения, шрифты и стили
• /environments/ : содержит файлы конфигурации среды (production и development)
• browserslist : необходим авторефиксеру для поддержки CSS
• favicon.ico : favicon сайта
• index.html : основной HTML файл
• karma.conf.js : файл конфигурации для Karma (инструмент тестирования)
• main.ts : Основной исходный файл, откуда загрузится AppModule
• polyfills.ts : нужные полифилы
• styles.css : файл глобальной таблицы стилей для проекта
• test.ts : это файл конфигурации для karma
• tsconfig.*.json : файлы конфигурации для TypeScript
• angular.json : содержит конфигурации для CLI
• package.json : содержит основную информацию о проекте (название, описание и зависимости)
• README.md : файл который содержит описание проекта
• tsconfig.json : файл конфигурации для TypeScript
• tslint.json : файл конфигурации для TSlint (инструмент статического анализа)

Обслуживание вашего проекта

Angular CLI предоставляет полную цепочку инструментов для разработки приложений на вашем локальном компьютере. Таким образом, вам не нужно устанавливать локальный сервер для обслуживания вашего проекта — вы можете просто использовать команду ng serve из своего терминала для локального обслуживания вашего проекта.

Сначала перейдите в папку вашего проекта и выполните следующие команды:

$ cd frontend $ ng serve 

Теперь вы можете перейти по адресу http://localhost:4200/, чтобы начать играть с вашим frontend приложением. Страница автоматически обновится, если вы измените какой-либо исходный файл.

Генерация Angular артефактов

Angular CLI предоставляет команду ng generate , которая помогает разработчикам создавать базовые артефакты Angular, такие как модули, компоненты, директивы, пайпы и сервисы:

$ ng generate component my-component 

my-component это имя компонента. Angular CLI будет автоматически добавлять ссылку components , directives и pipes в файле src/app.module.ts .

Если вы хотите добавить свой компонент, директиву или пайп к другому модулю (кроме основного модуля приложения app.module.ts ), вы можете просто поставить перед именем компонента компонент с именем модуля и косой чертой:

$ ng g component my-module/my-component 

my-module это имя существующего модуля.

Вывод

В этом посте мы увидели, как установить Angular CLI на нашу машину для разработки, и мы использовали его для инициализации нового Angular-проекта с нуля.

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

Запуск Angular с помощью строки Angular CLI

Любой проект Angular включает в себя множество движущихся частей. Angular CLI (интерфейс командной строки) – это новый инструмент, который позволяет легко запускать проекты, генерировать компоненты, маршруты или сервисы, обслуживать проекты и запускать тесты.

Примечание: В этом руководстве используется Angular 2 и новее.

Установка Angular CLI

Первый шаг – установить пакет Angular CLI с помощью npm:

$ npm install -g @angular/cli

Эта команда установит Angular CLI глобально. Если npm пожалуется, попробуйте запустить эту команду с помощью sudo:

$ sudo npm install -g @angular/cli

Запуск нового проекта

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

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

├── README.md ├── angular-cli.json ├── **e2e …** ├── karma.conf.js ├── **node\_modules …** ├── package.json ├── protractor.conf.js ├── **src …** └── tslint.json

Обслуживание проекта

По умолчанию будет запущен локальный сервер. Он работает по адресу http://localhost:4200. Этот сервер будет следить за изменениями в вашем проекте и автоматически обновлять страницу. Запустите следующую команду из каталога проекта:

Команда ng generate

Используйте ng generate для создания необходимых для вашего проекта вещей: компонентов, маршрутов, каналов, сервисов и директив. К примеру, чтобы создать компонент, нужно ввести:

$ ng generate component path/component-name

Тестирование

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

Заключение

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

Читайте также:

• Управление данными Angular с помощью Meta
• Как анализировать размеры пакетов приложений Angular