• Creating new projects with different templates
• Working with files and assets
• Building projects for production
• Generating code scaffolding

In this blog post, we will show you how to install Angular CLI on Ubuntu 22.04. Let’s get started!

Step 1 – Installing Node.js

Node.js is the primary requirement for running Angular applications. You can install the required Node.js using NVM command-line utility. Log in to your Ubuntu system and follow:

1. Use the following command to install NVM:

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

2. Now activate the NVM enviornemnt on your system.

   source ~/.bashrc
   

3. As of today, Angular 14 is the latest version that suport Node.js 14 LTS and 16 LTS versions. Following command will install Node.js 16 on your system.

   nvm install v16
   

4. The below command will display the version of node and npm installed on your system.

   node -v
   npm -v
   

Step 2 – Installing Angular CLI

After installing the node.js and npm on your system, use the following commands to install the Angular CLI tool on your system.

npm install @angular/cli --location=global

The latest version of Angular CLI will be installed on your Ubuntu Linux system.

npm install -g @angular/cli@10        #Angular 10
npm install -g @angular/cli@11        #Angular 11
npm install -g @angular/cli@12       #Angular 12

Using the -g above command will install the Angular CLI tool globally. So it will be accessible to all users and applications on the system. Angular CLI provides a command ng used for command-line operations. Let’s check the installed version of ng on your system.

ng version 

The angular command-line interface has been installed on your system. For the existing application, can start your work and ignore the rest article.

Follow the next steps to create a new Angular application on your system.

Step 3 – Create a New Angular Application

You can use ng command to create a new angular application. Create application named hello-world using the Angular command line tool. Execute below command in terminal:

ng new hello-world

Ouput
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE hello-world/README.md (1064 bytes)
CREATE hello-world/.editorconfig (274 bytes)
CREATE hello-world/.gitignore (548 bytes)
CREATE hello-world/angular.json (2947 bytes)
CREATE hello-world/package.json (1042 bytes)
CREATE hello-world/tsconfig.json (863 bytes)
CREATE hello-world/.browserslistrc (600 bytes)
CREATE hello-world/karma.conf.js (1428 bytes)
CREATE hello-world/tsconfig.app.json (287 bytes)
CREATE hello-world/tsconfig.spec.json (333 bytes)
CREATE hello-world/.vscode/extensions.json (130 bytes)
CREATE hello-world/.vscode/launch.json (474 bytes)
CREATE hello-world/.vscode/tasks.json (938 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 (2338 bytes)
CREATE hello-world/src/styles.css (80 bytes)
CREATE hello-world/src/test.ts (749 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 (658 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 (23364 bytes)
CREATE hello-world/src/app/app.component.spec.ts (1088 bytes)
CREATE hello-world/src/app/app.component.ts (215 bytes)
 Packages installed successfully.

This will create a directory named hello-world in your current directory, and create all required files for an angular application.

Step 4 – Serve Angular Application

Your basic Angular application is ready to serve. Switch to directory hello-world and then run your angular application using the ng serve command.

cd hello-world
ng serve

By default angular application run on port 4200. You can access your system on port 4200 to open the angular application, like:

• http://localhost:4200

You can change the host and port for running the Angular application by providing –host and –port command line arguments.

ng serve --host 0.0.0.0 --port 3001

Using the host address 0.0.0.0 allows the application to listen on all interfaces and is publicly accessible.

Conclusion

In conclusion, this article has shown you how to install the Angular CLI on Ubuntu 22.04. This tutorial also helped you to create a new angular application. Now, visit here to configure angular application behind the Apache server. If you run into any problems or have any questions, please leave a comment below and I will do my best to help you out. Thanks for reading!.

The post How to Install Angular CLI on Ubuntu 22.04 appeared first on TecAdmin.

This tutorial will help you to find the Angular version used by the application. Also, you can find what angular version is installed on my system.

Check Angular Version in Application

You can find the angular version used by the application under package.json file. To check this Go into node_modules/@angular/core/package.json file and check version field.

You will see the version like this:

  "version": "8.2.14"

Check Installed Angular CLI Version

Angular provides ng command to work with command line. To find out installed Angular version execute following command from terminal:

ng --version 

Output:

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


Angular CLI: 8.3.0
Node: 12.18.2
OS: linux x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.29
@angular-devkit/build-angular     0.803.29
@angular-devkit/build-optimizer   0.803.29
@angular-devkit/build-webpack     0.803.29
@angular-devkit/core              8.3.29
@angular-devkit/schematics        8.3.0 (cli-only)
@angular/cli                      
@ngtools/webpack                  8.3.29
@schematics/angular               8.3.0 (cli-only)
@schematics/update                0.803.0 (cli-only)
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2

The post How to Check Angular Version (Application+CLI) appeared first on TecAdmin.

Step 1 – Installing Node.js

NVM is a command line tool for installing and managing node.js on Linux system. So first we need to install nvm on our system. Login to system with user for which you need to install Node.js, then execute below command to install nvm:

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

After that, you can install any version of node on your system. You can also install multiple node versions on single system. Execute below commands to load environment and install latest node.js version:

source ~/.bashrc
nvm install node

The above command will display the version of node and npm installed on your system.

Step 2 – Installing Angular CLI

After installing the node.js and npm on your system, use the following commands to install the Angular CLI tool on your system.

npm install -g @angular/cli

The latest version of Angular CLI will be installed on your Ubuntu Linux system.

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

Using the -g above command will install the Angular CLI tool globally. So it will be accessible to all users and applications on the system. Angular CLI provides a command ng used for command-line operations. Let’s check the installed version of ng on your system.

ng --version

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


Angular CLI: 10.1.1
Node: 14.10.1
OS: linux x64

Angular:
...
Ivy Workspace:

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1001.1
@angular-devkit/core         10.1.1
@angular-devkit/schematics   10.1.1
@schematics/angular          10.1.1
@schematics/update           0.1001.1
rxjs                         6.6.2

Angular command line interface has been installed on your system. For the existing application, can start your work and ignore rest article.

Follow the next steps to create a new Angular application on your system.

Step 3 – Creating New Angular Application

You can use ng command to create a new angular application. Create application named hello-world using the Angular command line tool. Execute below command in terminal:

ng new hello-world

Output:

? 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.

This will create a directory named hello-world in your current directory, and create all require files for an angular application.

Step 4 – Serve Angular Application

Your basic Angular application is ready to serve. Switch to directory hello-world and then run your angular application using the ng serve command.

cd hello-world
ng serve

By default angular application run on port 4200. You can access your system on port 4200 to open the angular application, like:

• http://localhost:4200

You can change host and port for running the Angular application by providing –host and –port command line arguments.

ng serve --host 0.0.0.0 --port 8080

The IP address 0.0.0.0 listens on all interfaces and publicly accessible.

Conclusion

In this tutorial, you have learned to install angular command-line utility as a node package. This tutorial also helped you to create a new angular application. Now, visit here to configure angular application behind the Apache server.

The post How to Install Angular CLI on Ubuntu 20.04 appeared first on TecAdmin.

In this tutorial you will learn to install Angaular CLI on your Linux system. Then create a sample Angular application. Also run your Angular application with PM2 on a Linux system.

Prerequisites

To use this tutorial, you must have shell to your server with sudo privileged account. Login to your server and open shell to continue work.

Step 1 – Install Node.js

The systems doesn’t have Node.js installed, can use below commands to install Node.js on their system suing NVM (Node version manager).

Run below command to install NVM on your system:

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

Then install any Nodejs version recommended for your application. Below command will install Node.js 12 on your system. You can change any version number instead of 12.

nvm install 12

Once the installation completed successfully. View the installed version of Node.js and npm by running the following commands.

node -v

v12.18.2

npm -v

6.14.5

Step 2 – Install Angular CLI with PM2

Angular CLI is the command line utility to create, build and run Angular applications. It is available as Node module to install on any system have npm installed.

Run the below command to install latest Angular cli application on your system:

npm install -g @angular/cli 

Also, install pm2 application by running the following command:

npm install -g pm2 

At this stage your system is create to create and run angular application.

Step 3 – Create Angular Application

Skip this step, if you already have your Angular application. Otherwise, let’s have create a sample Angular application on your system with few simple commands.

Create and switch to directory to keep your Angular application.

sudo mkdir -p /var/www/apps && cd /var/www/apps

Then create a new application using ng new command followed by application name. Change my-angular-app with a suitable name for your application.

ng new my-angular-app

Following onscreen instruction to enable routing and select one of the stylesheet format. The below screenshot showing that I have enabled the Angular routing and select CSS for stylesheet.

Wait for the installation to complete. After that this will create a directory with the same name of your application in current directory with all files of your Angular application.

Switch to your application and start Angular application in development mode. By default ng serve start application on localhost only. I have used –host 0.0.0.0 to make application available for remote users.

cd my-angular-app
ng serve --host 0.0.0.0

Once service started, Access your application in a web browser. The default Angular listen on port 4200. In case any other application uses the same port, specify another port using –port with a port number.

Step 4 – Run Angular with PM2

In this step we will describe you to how to run Angular app with pm2 command. You can set run time behaviors of pm2 by providing the inputs on command line. Here we are discussing with quickly used options with pm2. Read one by one and use as per your requirements.

1. This will simply start Angular server to serve your application on 127.0.0.1 (localhost) and port 4200. After starting service you can access your application on from local machine only.

pm2 start "ng serve"

2. Here we are instructing ng to start application application on all system interfaces. So any user can access it from system systems. But this will still use default port 4200.

pm2 start "ng serve --host 0.0.0.0"

3. Next, you can customize your ng server command to run on specific port. For example, below command will start Angular application on port 8082.

pm2 start "ng serve --host 0.0.0.0 --port 8082"

4. Change the name of your application on pm2. Use –name parameter with pm2 command followed by your application name.

pm2 start "ng serve --host 0.0.0.0 --port 8082" --name "My Angular App"

5. Enabling watch is another great feature of pm2. While enabling pm2 keep watch about changes on specified directory. It will also restart the application after getting any changes in files. This reduces your pain of restarting application after making changes everytime.

pm2 start "ng serve --host 0.0.0.0 --port 8082" --name "My Angular App" --watch /var/www/apps/my-angular-app

Once you started your Angular application using pm2. Run the following command to view the status of your application.

pm2 status

For any issues, you can run pm2 logs command followed by the application id showing in above command. This will display application and error log on screen.

pm2 logs 0

Conclusion

In this tutorial you have learned to deploy Angular application using pm2 on any Linux system.

The post Deploy an Angular Application with PM2 appeared first on TecAdmin.

This tutorial will help you to install Angular on Fedora 35/34/33 Linux systems. Also, this will help you to create a sample Angular application.

Step 1 – Installing Node.js

First of all, you need to install node.js on your Fedora system. Use the following set of commands to add node.js PPA in your Fedora system and install required packages.

curl -sL https://rpm.nodesource.com/setup_14.x | sudo -E bash - 
sudo yum install nodejs 

Make sure you have successfully installed node.js and NPM on your system

node --version 
npm --version 

Step 2 – Install Angular on Fedora

After finishing the Node.js installation on your system. Use the following commands to install the Angular CLI module using the npm on your system.

npm install -g @angular/cli 

jThis will install the latest available Angular CLI version on your system. To install specific Angular version run command as following with version number.

npm install -g @angular/cli@6     ## Install Angular 6 
npm install -g @angular/cli@7     ## Install Angular 7 
npm install -g @angular/cli@8     ## Install Angular 8 
npm install -g @angular/cli@9     ## Install Angular 9 

Use of the -g option in the above command will install the Angular CLI globally. It will be available to all users and applications on the system.

The Angular CLI provides a command ng used for command-line operations. Once the installation is finished, Use the ng command to check the installed version.

ng --version 

Output

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


Angular CLI: 9.1.4
Node: 14.2.0
OS: linux x64

Angular:
...
Ivy Workspace:

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.901.4
@angular-devkit/core         9.1.4
@angular-devkit/schematics   9.1.4
@schematics/angular          9.1.4
@schematics/update           0.901.4
rxjs                         6.5.4

Step 3 – Create New Angular Application

Now, create a new application named hello-angular using the Angular CLI tools. Execute the commands to do this:

ng new hello-angular 

Output
...
...
added 1011 packages from 1041 contributors and audited 19005 packages in 36.281s
found 0 vulnerabilities

    Successfully initialized git.

This will create a directory named “hello-angular” in your current directory, and create the application.

Step 4 – Serve Angular Application

The default Angular application is ready to serve. Change to directory hello-angular and run your Angular application using the ng serve command.

cd hello-angular  
ng serve 

You can access your angular application on localhost port 4200, Which is the default host and port used by the Angular application.

• http://localhost:4200

It also allows to change host and port for running Angular application using –host and –port command line arguments.

ng serve --host 0.0.0.0 --port 8080 

With the use of host 0.0.0.0 listens on all interfaces. So you can access it from a private network or public network.

For the production applications, Use this tutorial to configure Apache as front-end proxy server for Angular application. So it will be accessible to end users on default port.

Conclusion

This tutorial helped you to install the Angular CLI utility on a Fedora Linux system. Additionally provides you instructions to create a sample Angular application and run it.

The post How to Install Angular on Fedora 35/34/33 appeared first on TecAdmin.

Step 1 – Prerequsities

Let’s start the installation of Node.js on your macOS system using Homebrew. So first update the Homebrew package manager index. Then you can install Node.js package in your MacOS system using the following command:

brew update  
brew install node

You have successfully installed Node.js on your system. Execute below command on the terminal to view the installed Node.js version info.

node -v

v12.4.0

Step 2 – Install Angular/CLI on macOS

After installing the Node.js and npm on your system, use the following commands to install the Angular CLI tool on your system globally.

npm install -g @angular/cli

This command will install the latest available Angular CLI version on your macOS system. If you need any other Angular version on your macOS use one of the following commands as per required version.

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

Using the -g above command will install the Angular CLI tool globally. So it will be accessible to all users and applications on the system. Angular CLI provides a command ng used for command-line operations. Let’s check the installed version of ng on your system.

ng --version

Step 3 – Create New Angular Application

Now, create a new application named hello-angular4 using the Angular CLI tools. Execute the commands to do this:

ng new hello-angular4

Output:

...
...
added 1011 packages from 1041 contributors and audited 19005 packages in 55.774s
found 0 vulnerabilities

    Successfully initialized git.

This will create a directory named hello-angular4 in your current directory, and create an application.

Step 4 – Serve Angular Application

Your basic Angular application is ready to serve. Change directory to hello-angular4 and run your Angular application using ng serve command.

cd hello-angular4
ng serve

You can access your angular application on localhost port 4200, Which is the default host and port used by Angular application.

• http://localhost:4200

You can change host and port for running Angular application by providing –host and –port command line arguments.

ng serve --host 0.0.0.0 --port 8080

The IP address 0.0.0.0 listens on all interfaces and publically accessible.

The post How to Install Angular CLI on macOS appeared first on TecAdmin.

Reference: Serve Node.js Application behind the Apache Server

Step 1 – Install Node.js

First of all, you need to install node.js on your system. Use the following commands to configure node.js PPA in your Debian system and install it.

sudo apt-get install software-properties-common
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install nodejs

Make sure you have successfully installed node.js and NPM on your system

node --version
npm --version

Step 2 – Install Angular/CLI on Debian

After finishing the Node.js installation on your system, use the following commands to install the Angular CLI tool on your system globally.

npm install -g @angular/cli

The above command will install the latest available Angular CLI version on your Debian system. To install specific Angular version run command as following with version number.

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

Using the -g above command will install the Angular CLI tool globally. So it will be accessible to all users and applications on the system. Angular CLI provides a command ng used for command-line operations. Let’s check the installed version of ng on your system.

ng --version


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


Angular CLI: 8.1.3
Node: 12.7.0
OS: linux x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.801.3
@angular-devkit/core         8.1.3
@angular-devkit/schematics   8.1.3
@schematics/angular          8.1.3
@schematics/update           0.801.3
rxjs                         6.4.0

Step 3 – Create New Angular Application

Now, create a new application named hello-angular4 using the Angular CLI tools. Execute the commands to do this:

ng new hello-angular4

Output:

...
...
added 1011 packages from 1041 contributors and audited 19005 packages in 55.774s
found 0 vulnerabilities

    Successfully initialized git.

This will create a directory named hello-angular4 in your current directory, and create an application.

Step 4 – Serve Angular Application

Your basic Angular application is ready to serve. Change directory to hello-angular4 and run your Angular application using ng serve command.

cd hello-angular4
ng serve

You can access your angular application on localhost port 4200, Which is the default host and port used by Angular application.

• http://localhost:4200

You can change host and port for running Angular application by providing –host and –port command line arguments.

ng serve --host 0.0.0.0 --port 8080

The IP address 0.0.0.0 listens on all interfaces and publically accessible.

Conclusion

You have successfully installed Angular CLI and created a sample application. The next tutorial will help you to configure the Angular application behind the Apache server to serve with a domain name.

The post How to Install Angular CLI on Debian 10/9/8 appeared first on TecAdmin.

Step 1 – Install Node.js

First of all, you need to install node.js on your system. Use the following set of commands to configure node.js yum repository in your CentOS system and install it.

curl -sL https://rpm.nodesource.com/setup_12.x | sudo -E bash -
sudo yum install nodejs

Make sure you have successfully installed node.js and NPM on your system

node --version
npm --version

Step 2 – Install Angular/CLI

After installation of node.js and npm on your system, use the following commands to install the Angular CLI tool on your system.

npm install -g @angular/cli

This will install the latest available Angular CLI version on your system. To install specific Angular version run command as following with version number.

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

Using the -g above command will install the Angular CLI tool globally. So it will be accessible to all users and applications on the system. Angular CLI provides a command ng used for command-line operations. Let’s check the installed version of ng on your system.

ng --version



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


Angular CLI: 9.0.7
Node: 12.16.1
OS: linux x64

Angular:
...
Ivy Workspace:

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.900.7
@angular-devkit/core         9.0.7
@angular-devkit/schematics   9.0.7
@schematics/angular          9.0.7
@schematics/update           0.900.7
rxjs                         6.5.3

Step 3 – Create New Angular Application

Now, create a new application named hello-angular4 using the Angular CLI tools. Execute the commands to do this:

ng new hello-angular

Output:

...
...
added 1011 packages from 1041 contributors and audited 19005 packages in 55.774s
found 0 vulnerabilities

    Successfully initialized git.

This will create a directory named hello-angular4 in your current directory, and create an application.

Step 4 – Serve Angular Application

Your basic Angular application is ready to serve. Change directory to hello-angular4 and run your Angular application using ng serve command.

cd hello-angular
ng serve

You can access your angular application on localhost port 4200, Which is the default host and port used by Angular application.

• http://localhost:4200

You can change host and port for running Angular application by providing –host and –port command line arguments.

ng serve --host 0.0.0.0 --port 8080

The IP address 0.0.0.0 listens on all interfaces and publically accessible.

The post How to Install Angular CLI on CentOS/RHEL 8/7/6 appeared first on TecAdmin.

• Creating new project.
• Setup application Environment.
• Manage application configurations.
• Building components, services and routing system.
• Starting application, testing and deploying the project.
• Installing 3rd party libraries like Bootstrap, Sass etc.

Let’s create your Angular Application:

Prerequisites

Angular required Nodejs to be installed on your system. You can following one of the following tutorials to install Angular on your system as per your operating system.

• Install Node.js on Windows
• Install Node.js on CentOS and Fedora
• Install Node.js on Ubuntu and Debian and LinuxMint

After installation, make sure the Node.js and NPM are correctly installed.

node -v

v12.4.0

npm -v

6.9.0

Install Angular CLI

Now, Install the Angular CLI utility using the NPM package manager.

npm install -g @angular/cli

The -g option with installation insures to install the Angular CLI globally on system. So, it will be accessible to all users and application on the system. Angular CLI provides a command ng used for command line operations. Let’s check the installed version of ng on your system.

ng --version


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


Angular CLI: 8.0.3
Node: 12.4.0
OS: linux x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.800.3
@angular-devkit/core         8.0.3
@angular-devkit/schematics   8.0.3
@schematics/angular          8.0.3
@schematics/update           0.800.3
rxjs                         6.4.0

Create Angular Application

Your system is ready for building an Angular Application. The following command will create the Angular application with name hello-angular.

ng new hello-angular

This will create a directory with your project name and create all files under it. It also installs all the required libraries in that directory. On successful creation, you will see the below message on the screen.

...
...
added 1011 packages from 1041 contributors and audited 19005 packages in 55.774s
found 0 vulnerabilities

    Successfully initialized git.

Run Angular Application

Your basic Angular application is ready to serve. Change to directory hello-angular and run your Angular application using ng serve command.

cd hello-angular
ng serve



You can access your angular application on localhost port 4200, Which is the default host and port used by Angular application.

  http://localhost:4200



You can change host and port for running Angular application by providing –host and –port command line arguments.

ng serve --host 0.0.0.0 --port 8080

The IP address 0.0.0.0 listens on all interfaces and publically accessible.

The post How to Create Your Angular Application with Angular CLI appeared first on TecAdmin.

]]> https://tecadmin.net/create-angular-application-with-angular-cli/feed/ 0 https://tecadmin.net/install-angular-on-ubuntu/ https://tecadmin.net/install-angular-on-ubuntu/#comments Fri, 07 Jun 2019 10:43:32 +0000 https://tecadmin.net/?p=15510 Angular is an frameworks, libraries, assets, and utilities. It keeps track of all the components and checks regularly for their updates. This tutorial will help you to install the Angular CLI tool on Ubuntu 19.10, 18.04 & 16.04 Linux operating systems. Reference: Serve Node.js Application behind the Apache Server Step 1 – Install Node.js First [...]

The post How to Install Angular CLI on Ubuntu 18.04 & 16.04 appeared first on TecAdmin.

]]> Angular is an frameworks, libraries, assets, and utilities. It keeps track of all the components and checks regularly for their updates. This tutorial will help you to install the Angular CLI tool on Ubuntu 19.10, 18.04 & 16.04 Linux operating systems.

Reference: Serve Node.js Application behind the Apache Server

Step 1 – Install Node.js

First of all, you need to install node.js on your system. If you don’t have node.js installed use the following set of commands to add node.js PPA in your Ubuntu system and install it.

sudo apt install python-software-properties
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt install nodejs

Make sure you have successfully installed node.js and NPM on your system

node --version
npm --version

Step 2 – Install Angular/CLI

After installation of node.js and npm on your system, use following commands to install Angular cli tool on your system.

npm install -g @angular/cli

The latest version of Angular CLI will be installed on your Ubuntu Linux system. You may require older Angular version on your machine. To install specific Angular version run command as following with version number.

npm install -g @angular/cli@10        #Angular 10
npm install -g @angular/cli@11        #Angular 11
npm install -g @angular/cli@12        #Angular 12

Using the -g above command will install the Angular CLI tool globally. So it will be accessible to all users and applications on the system. Angular CLI provides a command ng used for command-line operations. Let’s check the installed version of ng on your system.

ng --version


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


Angular CLI: 12.2.11
Node: 14.15.3
Package Manager: npm 6.14.9
OS: linux x64

Angular: undefined
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1202.11 (cli-only)
@angular-devkit/core         12.2.11 (cli-only)
@angular-devkit/schematics   12.2.11 (cli-only)
@schematics/angular          12.2.11 (cli-only)

Step 3 – Create a New Angular Application

Now, create a new application named hello-angular4 using the Angular CLI tools. Execute the commands to do this:

ng new hello-angular

Output:

...
...
 Packages installed successfully.
    Successfully initialized git.

This will create a directory named hello-angular in your current directory, and create an application.

Step 4 – Serve Angular Application

Your basic Angular application is ready to serve. Change directory to hello-angular4 and run your Angular application using ng serve command.

cd hello-angular
ng serve



You can access your angular application on localhost port 4200, Which is the default host and port used by Angular application.

• http://localhost:4200

You can change the host and port for running the Angular applications by providing --host and --port command line arguments.

ng serve --host 0.0.0.0 --port 8080

The IP address 0.0.0.0 listens on all interfaces and is publically accessible.

Conclusion

You have successfully installed Angular CLI and created a sample application. The next tutorial will help you to configure the Angular application behind the Apache server to serve with a domain name.

The post How to Install Angular CLI on Ubuntu 18.04 & 16.04 appeared first on TecAdmin.

]]> https://tecadmin.net/install-angular-on-ubuntu/feed/ 9