Site icon LinuxTuto

How To Install AngularJS on Ubuntu 22.04

  • LinuxTuto
    • AngularJS on Ubuntu 22.04

    AngularJS is an open-source JavaScript framework developed by Google for building dynamic web applications. Compared to other options such as jQuery, Knockout, Handlebars, or PagerJs, Angular integrates a complete solution that allows us to abandon the old PHP in our developments with modern technology.

    In this tutorial you will learn to install and create AngularJS Application on a Ubuntu 22.04 OS.

    Step 1: Update Operating System

    Update your Ubuntu 22.04 operating system to make sure all existing packages are up to date:

    $ sudo apt update && sudo apt upgrade -y

    Step 2: Install Node.js

    Currently, Angular is only supported on LTS versions of Node.js

    The Node.js version included in the default Ubuntu 22.04 repositories is v12.22.9 which is an older LTS version.

    We’ll install Node.js version 16.x LTS on our Ubuntu OS.

    First, add the Node.js repository running the following command:

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

    Once added, install the Node.js with the following command:

    $ sudo apt-get install nodejs

    Verify the installed version of Node.js running the following command:

    node --version

    You should see the following output:

    v16.17.0

    Run the following command to install npm latest version globally:

    $ sudo npm install npm@latest -g

    npm is the node package manager used to install the Angular command-line interface on a system.

    Verify the npm version with the following command:

    npm --version

    You should get the following output:

    8.18.0

    Step 3: Install AngularJS on Ubuntu 22.04

    After installing node package manager, you can now use it to install AngujarJS. Run the following command to install.

    $ sudo npm install -g @angular/cli

    Check AngularJS version installed using the command below.

    $ sudo ng version

    Sample output:

    Step 4: Create AngularJS Application

    Now, you can create a AngularJS application with the following command:

    $ sudo ng new angular-demo-app

    Sample Output:

    ? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE angular-demo-app/README.md (1068 bytes)
CREATE angular-demo-app/.editorconfig (274 bytes)
CREATE angular-demo-app/.gitignore (548 bytes)
CREATE angular-demo-app/angular.json (2972 bytes)
CREATE angular-demo-app/package.json (1047 bytes)
CREATE angular-demo-app/tsconfig.json (863 bytes)
CREATE angular-demo-app/.browserslistrc (600 bytes)
CREATE angular-demo-app/karma.conf.js (1433 bytes)
CREATE angular-demo-app/tsconfig.app.json (287 bytes)
CREATE angular-demo-app/tsconfig.spec.json (333 bytes)
CREATE angular-demo-app/.vscode/extensions.json (130 bytes)
CREATE angular-demo-app/.vscode/launch.json (474 bytes)
CREATE angular-demo-app/.vscode/tasks.json (938 bytes)
CREATE angular-demo-app/src/favicon.ico (948 bytes)
CREATE angular-demo-app/src/index.html (300 bytes)
CREATE angular-demo-app/src/main.ts (372 bytes)
CREATE angular-demo-app/src/polyfills.ts (2338 bytes)
CREATE angular-demo-app/src/styles.css (80 bytes)
CREATE angular-demo-app/src/test.ts (749 bytes)
CREATE angular-demo-app/src/assets/.gitkeep (0 bytes)
CREATE angular-demo-app/src/environments/environment.prod.ts (51 bytes)
CREATE angular-demo-app/src/environments/environment.ts (658 bytes)
CREATE angular-demo-app/src/app/app-routing.module.ts (245 bytes)
CREATE angular-demo-app/src/app/app.module.ts (393 bytes)
CREATE angular-demo-app/src/app/app.component.css (0 bytes)
CREATE angular-demo-app/src/app/app.component.html (23115 bytes)
CREATE angular-demo-app/src/app/app.component.spec.ts (1103 bytes)
CREATE angular-demo-app/src/app/app.component.ts (220 bytes)
✔ Packages installed successfully.

    After installing, navigate to the installation folder.

    $ sudo cd angular-demo-app

    Once you are in the project folder you can start Angular application in development mode with the following command:

    $ sudo ng serve

    By default ng serve start application on localhost on port 4200.

    Alternatively, you can change the host and port on which the application is running using:

    $ sudo ng serve --host 0.0.0.0 --port 8000

    Here, the application is running on IP address 0.0.0.0 and port 8000.

    Open your favorite browser and enter the URL your-IP-address:8000 to access your Angular app.

    Step 5: Run Angular with PM2

    In this step we will describe you to how to run Angular app with PM2 command. PM2 is a Production Process Manager for Node.js applications.

    First, install PM2 application by running the following command:

    $ sudo npm install -g pm2

    You can simply start Angular server to serve your application on 127.0.0.1 (localhost) and port 4200 with the following command:

    $ sudo pm2 start "ng serve"

    You can specific host, port and name of your app with the following command:

    $ sudo pm2 start "ng serve --host 0.0.0.0 --port 8000" --name "Angular Demo App"

    Enabling watch is another great feature of PM2. It will restart the application after getting any changes in files. This reduces your pain of restarting application after making changes everytime.

    $ sudo pm2 start "ng serve --host 0.0.0.0 --port 8000" --name "Angular Demo App" --watch /angular-demo-app

    Once you started your Angular application using PM2 run the following command to view the status of your application.

    $ sudo pm2 status

    For any issues, you can run PM2 logs command. This will display application and error log on screen.

    $ sudo pm2 logs 0

    Conclusion

    Congratulations. You have learned how to Install AngularJS and create a sample app on Ubuntu 22.04. Also, you have learned how to deploy AngularJS application using PM2.

    In order to get more information on this topic you can visiting the official website of AngularJS.

    Exit mobile version