DevGang
Авторизоваться

Как установить Angular CLI в Ubuntu 20.04 

Angular - самый популярный фреймворк, используемый для создания мобильных и веб-приложений. Angular - это фреймворк для веб-приложений с открытым исходным кодом, разработанный Google большим сообществом людей. На сегодняшний день Angular 10 является последней версией, доступной для установки. Это руководство поможет вам установить модуль Angular CLI в вашей системе Ubuntu 20.04 Linux.

Шаг 1 - Установка Node.js

NVM - это инструмент командной строки для установки и управления node.js в системе Linux. Итак, сначала нам нужно установить nvm в нашу систему. Войдите в систему с пользователем, для которого вам нужно установить Node.js, затем выполните команду ниже, чтобы установить nvm:

curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash

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

source ~/.bashrc
nvm install node

Приведенная выше команда отобразит версию Node и npm, установленную в вашей системе.

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

После установки node.js и npm в вашей системе используйте следующие команды для установки инструмента Angular cli в вашей системе.

npm install -g @angular/cli

Последняя версия Angular CLI будет установлена ​​в вашей системе Ubuntu Linux. Вам может потребоваться более старая версия Angular на вашем компьютере. Чтобы установить определенную версию Angular, выполните следующую команду с номером версии.

npm install -g @angular/cli@8        #Angular 8
npm install -g @angular/cli@9        #Angular 9
npm install -g @angular/cli@10       #Angular 10

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

ng --version

     _ _ ____ _ ___
    / \ _ __ __ _ _ _ | | __ _ _ __ / ___ | | | _ _ |
   / △ \ | '_ \ / _` | | | | | / _` | '__ | | | | | | |
  / ___ \ | | | | (_ | | | _ | | | (_ | | | | | ___ | | ___ | |
 / _ / \ _ \ _ | | _ | \ __, | \ __, _ | _ | \ __, _ | _ | \ ____ | _____ | ___ |
                | ___ /


Угловой CLI: 10.1.1
Узел: 14.10.1
ОС: Linux x64

Угловой:
...
Рабочее пространство Ivy:

Версия пакета
-------------------------------------------------- ----
@ angular-devkit / архитектор 0.1001.1
@ angular-devkit / ядро ​​10.1.1
@ angular-devkit / схемы 10.1.1
@ schematics / angular 10.1.1
@ schematics / update 0.1001.1
rxjs 6.6.2

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

Выполните следующие шаги, чтобы создать новое приложение Angular в вашей системе.

Шаг 3 - Создание нового приложения Angular

Вы можете использовать команду ng для создания нового приложения angular. Создайте приложение с именем hello-world с помощью инструмента командной строки Angular. Выполните следующую команду в терминале:

ng new hello-world

Выход:

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE hello-world/README.md (1028 bytes)
CREATE hello-world/.editorconfig (274 bytes)
CREATE hello-world/.gitignore (631 bytes)
CREATE hello-world/angular.json (3606 bytes)
CREATE hello-world/package.json (1254 bytes)
CREATE hello-world/tsconfig.json (458 bytes)
CREATE hello-world/tslint.json (3185 bytes)
CREATE hello-world/.browserslistrc (853 bytes)
CREATE hello-world/karma.conf.js (1023 bytes)
CREATE hello-world/tsconfig.app.json (287 bytes)
CREATE hello-world/tsconfig.spec.json (333 bytes)
CREATE hello-world/src/favicon.ico (948 bytes)
CREATE hello-world/src/index.html (296 bytes)
CREATE hello-world/src/main.ts (372 bytes)
CREATE hello-world/src/polyfills.ts (2835 bytes)
CREATE hello-world/src/styles.css (80 bytes)
CREATE hello-world/src/test.ts (753 bytes)
CREATE hello-world/src/assets/.gitkeep (0 bytes)
CREATE hello-world/src/environments/environment.prod.ts (51 bytes)
CREATE hello-world/src/environments/environment.ts (662 bytes)
CREATE hello-world/src/app/app-routing.module.ts (245 bytes)
CREATE hello-world/src/app/app.module.ts (393 bytes)
CREATE hello-world/src/app/app.component.css (0 bytes)
CREATE hello-world/src/app/app.component.html (25757 bytes)
CREATE hello-world/src/app/app.component.spec.ts (1072 bytes)
CREATE hello-world/src/app/app.component.ts (215 bytes)
CREATE hello-world/e2e/protractor.conf.js (869 bytes)
CREATE hello-world/e2e/tsconfig.json (294 bytes)
CREATE hello-world/e2e/src/app.e2e-spec.ts (644 bytes)
CREATE hello-world/e2e/src/app.po.ts (301 bytes)
✔ Packages installed successfully.
    Successfully initialized git.

Это создаст каталог с именем hello-world в вашем текущем каталоге и создаст все необходимые файлы для приложения angular.

Шаг 4 - Обслуживание приложения Angular

Ваше базовое приложение Angular готово к работе. Переключитесь в каталог hello-world, а затем запустите приложение angular с помощью команды ng serve.

cd hello-world
ng serve

По умолчанию приложение angular запускается на порту 4200. Вы можете получить доступ к своей системе через порт 4200, чтобы открыть приложение angular, например:

  1. http://localhost:4200

Вы можете изменить хост и порт для запуска приложения Angular, указав аргументы командной строки –host и –port.

ng serve --host 0.0.0.0 --port 8080

IP-адрес 0.0.0.0 прослушивается на всех интерфейсах и общедоступен.

Вывод

В этом руководстве вы научились устанавливать утилиту командной строки angular как пакет Node. Это руководство также помогло вам создать новое приложение angular. 

Источник:

#Angular #NodeJS #Ubuntu
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

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

Попробовать

Оплатив хостинг 25$ в подарок вы получите 100$ на счет

Получить