In the next article we are going to take a look at the Angular CLI. In case you still don't know Angular is an open source front-end application development framework, popular and highly extensible. It can be used to build mobile and web applications using TypeScript, JavaScript, and other common languages. Angular is a blanket term for all versions of Angular that come after AngularJS.
This development framework is well suited for building applications from scratch, ranging from small to large scale. 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. It is used to create, manage, build and test applications created with Angular.
In the following lines we are going to see how we can install Angular command line tool on our Ubuntu 19.04 system. We will also see a basic example of this tool.
Installing Node.js on Ubuntu
To install Angular CLI it will be necessary that we have a current version of Node.js and NPM installed on our system. To do so, we just have to open a terminal (Ctrl + Alt + T) and write in it:
sudo curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt install -y nodejs
Also, to compile and install native NPM plugins, we may need to install developer tools on our system. To do so, in the same terminal we will do the following:
sudo apt install -y build-essential
Angular CLI installation on Ubuntu 19.04
After the installation of Node.js and NPM as we have just seen, we will be able to install Angular CLI using npm package manager as follows. In this case, the option -g it means that we are going to install the tool throughout the system, to be used by all users of it.
sudo npm install -g @angular/cli
After the installation, we can start Angular CLI using ng executable which should now be installed on our system. Execute the following command in the terminal (Ctrl + Alt + T) to verify the version of Angular CLI installed:
ng --version
Creating a project using Angular CLI
Now let's see how we can create, build and serve a new basic Angular project. First, we are going to go to the webroot directory from our server. Then we are going to create a new Angular application as follows:
cd /var/www/html/ sudo ng new ubunlog-app
We will have to decide if we want to share anonymous data to the Angular team. We continue to go to the directory of the application that we just created. We are going to start serving the app as it's shown in the following:
cd ubunlog-app ng serve
The previous command will put us on the screen a link that will tell us how we can see our application in operation.
Before we can access it from a web browser, in case of having a firewall service running, we must open port 4200 in configuring this, as shown below:
sudo ufw allow 4200/tcp sudo ufw reload
After this, we can open our favorite web browser and navigate using the URL provided by the terminal to see the new application run, as shown in the following screenshot.
http://localhost:4200/
We can also use this other URL to access our application:
http://IP_SERVIDOR:4200
It should be mentioned that if we use the command "of serve”To build an application and serve it locally as we just saw, the server automatically rebuilds the application and reloads the web pages when we change any of the source files.
If we want to get more information about the ng tool, we can run the following command in the terminal (Ctrl + Alt + T):
ng help
In this article, we have seen how to perform a simple installation of Angular CLI on our Ubuntu system, in addition to building, compiling and serving a basic application on a development server.
These are just the most basic first steps that can be taken with the Angular CLI. For see more information about Angular CLI, we can consult the official website of the project.