Поиск по сайту:

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

На этой странице

  1. Предпосылки
  2. Установите Node.js
  3. Установить Ангуляр
  4. Создать проект Angular
  5. Доступ к веб-интерфейсу Angular
  6. Заключение

Angular — это платформа веб-приложений с открытым исходным кодом для создания мобильных и настольных веб-приложений. Он написан на TypeScript/JavaScript и был создан в 2009 году компанией Google. Он специально разработан для создания приложений малого и крупного масштаба с нуля. Он поставляется с утилитой Angular CLI, которая помогает вам создавать, управлять, создавать и тестировать приложения Angular.

В этом руководстве мы покажем вам, как установить Angular на Ubuntu 20.04.

Предпосылки

  • Сервер под управлением Ubuntu 20.04.
  • На сервере настроен пароль root.

Установите Node.js

Прежде чем начать, вам нужно будет установить Node.js и npm в вашей системе. По умолчанию последняя версия Node.js недоступна в стандартном репозитории Ubuntu 20.04. Поэтому вам нужно будет добавить репозиторий Node.js в вашу систему.

Сначала добавьте репозиторий Node.js с помощью следующей команды:

curl -sL https://deb.nodesource.com/setup_14.x | bash -

После добавления установите Node.js с помощью следующей команды:

apt-get install nodejs -y

После установки проверьте установленную версию Node.js с помощью следующей команды:

node --version

Вы должны увидеть следующий вывод:

v14.7.0

Затем обновите версию npm до последней версии, выполнив следующую команду:

npm install  -g

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

npm --version

Вы должны получить следующий результат:

6.14.7

Установить угловой

Вы можете установить Angular с помощью npm, как показано ниже:

npm install -g @angular/cli

После установки проверьте установленную версию Angular с помощью следующей команды:

ng version

Вы должны увидеть следующий вывод:

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

Angular CLI: 10.0.5
Node: 14.7.0
OS: linux x64

Angular: 
... 
Ivy Workspace: 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1000.5
@angular-devkit/core         10.0.5
@angular-devkit/schematics   10.0.5
@schematics/angular          10.0.5
@schematics/update           0.1000.5
rxjs                         6.5.5

Создать угловой проект

На данный момент Angular установлен в вашей системе. Пришло время создать новый проект с Angular.

Сначала измените каталог на /opt и создайте новый проект с именем myproject с помощью следующей команды:

cd /opt
ng new myproject

Затем измените каталог на myproject и отправьте проект с помощью следующей команды:

cd myproject
ng serve --host your-server-ip --port 8088

Вы должны увидеть следующий вывод:

WARNING: This is a simple server for use in testing or debugging Angular applications
locally. It hasn't been reviewed for security issues.

Binding this server to an open connection can result in compromising your application or
computer. Using a different host than the one passed to the "--host" flag might result in
websocket connection issues. You might need to use "--disableHostCheck" if that's the
case.
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/core : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/animations/browser/testing : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/common/http/testing : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015

chunk {main} main.js, main.js.map (main) 60.6 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.3 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.65 MB [initial] [rendered]
Date: 2020-08-09T14:10:36.644Z - Hash: a053188b5496361814a2 - Time: 14873ms
** Angular Live Development Server is listening on 69.87.218.220:8088, open your browser on http://69.87.218.220:8088/ **
: Compiled successfully.

Доступ к веб-интерфейсу Angular

На данный момент проект Angular развернут и прослушивает порт 8088. Вы можете получить к нему доступ, используя URL-адрес http://your-server-ip:8088. Вы должны увидеть следующий экран:

Заключение

Поздравляем! вы успешно установили Angular на Ubuntu 20.04. Теперь вы можете приступить к развертыванию своего первого проекта с Angular. Одной из замечательных функций Angular является горячая перезагрузка веб-пакета, которая развертывает изменения в режиме реального времени и экономит ваше время.