Как установить Angular CLI на Linux
Angular является открытым исходным кодом, популярных и высоко расширяемая структура фронтенд-разработка приложений, используемых для создания мобильных и веб — приложений с использованием TypeScript / JavaScript и другие распространенные языки.
Angular хорошо подходит для создания небольших и крупных приложений с нуля. Одним из ключевых компонентов Angular платформы для помощи разработки приложений являются Angular CLI утилиты — это простой и легкий в использовании инструмент командной строки для создания, управления, создания и тестирование Angular приложений.
В этой статье мы расскажем , как установить Angular инструмент командной строки на систему Linux и узнать некоторые основные параметры этого инструмента.
Установка Node.js в Linux
Для того, чтобы установить Angular CLI , вам необходимо установить последнюю версию Node.js .
Установка Node.js на Ubuntu
$ sudo curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash — [for Node.js version 12]$ sudo curl -sL https://deb.nodesource.com/setup_11.x | sudo -E bash — [for Node.js version 11]$ sudo curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash — [for Node.js version 10]$ sudo apt install -y nodejs
Установка Node.js на Debian
# curl -sL https://deb.nodesource.com/setup_12.x | bash — [for Node.js version 12]# curl -sL https://deb.nodesource.com/setup_11.x | bash — [for Node.js version 11]# curl -sL https://deb.nodesource.com/setup_10.x | bash — [for Node.js version 10]# apt install -y nodejs
Установка Node.js на CentOS / RHEL и Fedora
# curl -sL https://rpm.nodesource.com/setup_12.x | bash — [for Node.js version 12]# curl -sL https://rpm.nodesource.com/setup_11.x | bash — [for Node.js version 11]# curl -sL https://rpm.nodesource.com/setup_10.x | bash — [for Node.js version 10]# yum -y install nodejs
# dnf -y install nodejs [ RHEL 8 . Fedora 22+ versions]
Кроме того , чтобы скомпилировать и установить собственные дополнения от NPM вам , возможно , потребуется установить средства разработки в вашей системе следующим образом
$ sudo apt install -y build-essential [Для Debian/Ubuntu]# yum install gcc-c++ make [Для CentOS/RHEL]# dnf install gcc-c++ make [Для RHEL 8/Fedora 22+]
Установка Angular CLI в Linux
После того как вы Node.js и NPM установлены мы можем установить Angular CLI с помощью менеджера пакетов NPM следующим образом ( -g флаг означает установить общесистемный инструмент, который могут использовать все пользователи системы ).
# npm install -g @angular/cli
ИЛИ
$ sudo npm install -g @angular/cli
Создание проекта с помощью Angular CLI в Linux
В этом разделе мы покажем , как создавать, строить и обслуживать новый, основной Angular проект. Во- первых, перейти в WebRoot директорию вашего сервера, а затем инициализировать новый Angular приложение следующим образом (следуйте инструкциям):
# cd /var/www/html/
# ng new tecmint-app #as root
OR
$ sudo ng new tecmint-app #non-root user
Затем, перейдите в каталог приложений, который только что был создан и служит приложение, как показано на рисунке.
# cd tecmint-app
# ls #list project files
# ng serve
Перед тем , как получить доступ к новому приложению из браузера, если у Вас работают службу брандмауэра, необходимо открыть порт 4200 в конфигурации брандмауэра , как показано на рисунке.
———- На CentOS/RHEL/Fedora ———-
# firewall-cmd —permanent —zone=public —add-port=4200/tcp
# firewall-cmd —reload
———- В Ubuntu/Debian ———-
$ sudo ufw allow 4200/tcp
$ sudo ufw reload
Теперь вы можете открыть веб-браузер и перейдите используя следующий адрес:
How to Install Angular CLI on Linux
Angular is an open-source, popular and highly-extensible front-end application development framework, used for building mobile and web applications using TypeScript/JavaScript and other common languages. Angular is an umbrella term for all Angular versions that come after AngularJS (or Angular version 1.0) including Angular 2, and Angular 4.
Angular is well suited for building small to large scale applications from scratch. One of the key components of the Angular platform to aid application development is the Angular CLI utility – it is a simple and easy-to-use command-line tool used to create, manage, build and test Angular applications.
In this article, we will explain how to install Angular command-line tool on a Linux system and learn some basic examples of this tool.
Installing Node.js in Linux
To install Angular CLI, you need to have the latest version of Node.js and NPM installed on your Linux system.
Install Node.js on Ubuntu
Install Node.js on Debian
Install Node.js on CentOS/RHEL & Fedora
Also, to compile and install native add-ons from NPM you may need to install development tools on your system as follows.
Installing Angular CLI in Linux
Once you have Node.js and NPM installed, as shown above, you can install Angular CLI using the npm package manager as follows (the -g flag means to install the tool system-wide to be used by all system users).
Install Angular CLI in Linux
You can launch the Angular CLI using the ng executable which should now be installed on your system. Run the following command to check the version of Angular CLI installed.
Check Version of ng
Creating an Angular Project Using Angular CLI
In this section, we will show how to create, build, and serve a new, basic Angular project. First, move into the webroot directory of your server, then initialize a new Angular application as follows (remember to follow the prompts):
Create New Angular App
Next, move into the application directory which has just been created and serve application as shown.
Before you can access your new app from a web browser, if you have a firewall service running, you need to open port 4200 in the firewall configuration as shown.
Now you can open a web browser and navigate using the the following address to see the new app run as shown in the following screenshot.
Access Your New Angular App
Note: If you use the command ng serve to build an application and serve it locally, as shown above, the server automatically rebuilds the app and reloads the web page(s) when you change any of the source files.
For more information concerning the ng tool, run the following command.
The Angular CLI Homepage: https://angular.io/cli
In this article, we have shown how to install Angular CLI on different Linux distributions. We also covered how to build, compile and server a basic Angular application on a development server. For any queries or thoughts, you want to share with us, use the feedback form below.
If You Appreciate What We Do Here On TecMint, You Should Consider:
TecMint is the fastest growing and most trusted community site for any kind of Linux Articles, Guides and Books on the web. Millions of people visit TecMint! to search or browse the thousands of published articles available FREELY to all.
If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.
We are thankful for your never ending support.
Installing Angular 2 and Other Dependencies
December 12, 2016 Tyler Davis 2 Comments
Let’s be honest. Setting up a “modern” front end application in 2016 can be painful. Luckily the Angular 2 team has provided a command line tool, angular-cli , to help ease the pain. Although it is still in beta, angular-cli is a great way to set up an Angular 2 project and avoid manually copying and pasting configuration files just to get your project to build. The steps to installing Angular 2 are simple:
- Install NPM. You can follow the steps here .
- Install angular-cli using NPM. npm install -g angular-cli . Linux users will want to run this command with sudo .
- Create a new Angular 2 project. ng new PROJECT_NAME . (This will probably take a few minutes.)
With those simple steps, you have a new Angular 2 project. If you go into the root directory of the project you just created and enter the command ng serve , angular-cli will compile your project and start serving it. In the output, you’ll see the address your application is getting served at.
For me, it is serving at http://localhost:4200 . Going to that address shows me my working Angular 2 app!
However, that’s not very interesting. You have something amazing that you want to build. So you need to start looking around the source code and notice the more than 40,000 files that have been created! Luckily most of those files are in the node_modules directory which you won’t need to worry about. The file structure that you do care about will look something like the following:
That still seems like a lot to digest right away. The good news is that you can jump into src/app/ and start editing the app directly. In that directory you will see a module file, app.module.ts . You can read more about modules here . You’ll also see four files that make up your first component, app.component.css , app.component.html , app.component.spec.ts , and app.component.ts . These four files define your component’s css styles, html template, tests, and typescript logic respectively. When you add a class to your css,
and subsequently add that class to your html template,
you’ll notice that your app is now blue!
As you are creating your application, check out some of our other blog posts on getting started with Angular 2. If you’re interested in learning about the other things that were installed, here are a few links for further reading.
angular-cli.json – A configuration file for the angular command line interface.
karma.conf.js – A configuration script for the Karma testing framework. You can use Karma to run your *.spec.ts files on multiple browsers.
package.json – Your project information that NPM uses. This can be used to add new libraries that you can use in your project.
protractor.conf.js – A configuration file for the Protractor end-to-end testing framework. End-to-end testing allows you to test your app by mimicking a user interacting with it. You’ll use this with your tests found in the e2e directory.
README.md – A place to describe your project.
tslint.json – A configuration file for tslint.
src – favicon.ico – The icon that will show in the browser tab.
src – index.html – The html file that the browser will load. In this file you’ll see the `app-root` tag, which is where your bootstrapped Angular 2 application will load.
src – main.ts – The file that bootstraps your Angular 2 application.
src – polyfills.ts – This loads some code that Angular 2 needs to run on all browsers.
src – styles.css – You can use this for global styles.
src – test.ts – A test file for running Karma tests.
src – tsconfig.json – A configuration file for the typescript compiler.
src – typings.d.ts – A configuration file for Typings . Typings is a useful tool for adding javascript libraries to your typescript project.
src – app – Your actual Angular 2 application source!
src – assets – A place for you to put assets such as photos.
src – environments – Environments configuration files used by angular-cli.
Related Articles
How to handle folder uploads in Angular 2+
Removing Roadblocks in the Move to Angular 4
5 Angular directives you can use in your project
Angular 2 Best Practices: Change Detector Performance
Angular 2 and Observables: Data Sharing in a Multi-View Application
2 Comments
Thanks a lot for the useful article. Cheers
this is out of date.
`npm install -g @angular/cli`