Facebook Twitter Instagram
    TecAdmin
    • Home
    • FeedBack
    • Submit Article
    • About Us
    Facebook Twitter Instagram
    TecAdmin
    You are at:Home»AngularJs»How to Install Angular CLI on Ubuntu 20.04

    How to Install Angular CLI on Ubuntu 20.04

    By RahulJune 23, 20224 Mins Read

    Angular is the most popular framework used to build mobile and web applications. Angular is an open-source web application framework developed by Google an a large community of individuals. As of today, Angular 10 is the latest version available for the installation. This tutorial will help you to install Angular CLI node module on your Ubuntu 20.04 Linux system.

    Advertisement

    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.

    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/[email protected]8        #Angular 8
    npm install -g @angular/[email protected]9        #Angular 9
    npm install -g @angular/[email protected]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.

    Angular node
    Share. Facebook Twitter Pinterest LinkedIn Tumblr Email WhatsApp

    Related Posts

    How to Create React.js Application on macOS

    How to Install Bower on Ubuntu 22.04 & 20.04

    How to Install Angular CLI on Ubuntu 22.04

    How to Install Angular CLI on Ubuntu 22.04

    View 1 Comment

    1 Comment

    1. Marko on April 4, 2021 10:34 am

      Thanks for install.sh !!!

      Reply

    Leave A Reply Cancel Reply

    Advertisement
    Recent Posts
    • 20 Basic Linux Commands for the Beginners (Recommended)
    • tail Command in Linux with Examples
    • What is a Orphan Process in Unix/Linux
    • How To Display Warning Message to Unauthorized SSH Access
    • How to Set a Custom SSH Login Banner and MOTD
    Facebook Twitter Instagram Pinterest
    © 2023 Tecadmin.net. All Rights Reserved | Terms  | Privacy Policy

    Type above and press Enter to search. Press Esc to cancel.