Thursday, 17 April 2025

Angular 19 | Chapter 1 | Building Your First Angular Application

 

  1. Download and Install latest Node JS version. ( I used v23.11.0 )
     
  2. Run command in cmd
      node -v

 

  1. Run command in cmd
      npm -v

 

  1. Install Angular globally on DEVBOX by running ccommand in cmd

npm install -g @angular/cli

 

 

  1. Run command in cmd to get Angular version installed
      ng version

 

  1. Create a new folder for your 1st angular add example: E:\AngularApps
    change directory to
      cd E:\AngularApps
     
  2. Create 1st angular app by this command:

ng new MyFirstAngApp
 

Selected CSS

Selected NO for SSR & SSG

 

  1. Change directory to your autogenerated Angular code
      cd E:\AngularApps\MyFirstAngApp
     
  2. Run command
      ng serve
    your app gets hosted at http://localhost.4200

Note: You can also host the same web application on free web hosting sites.

Here is my link to my 1st angular application that can be easily hosted on your laptop or desktop machine and run locally in your web browser.

To try building the sample application on your local machine, after extracting the .zip file.
open command prompt. Navigate to the folder you extracted. and run following command.

npm install 

This will download all the packages that are saved in "package.json",  it will reinstall all of the dependencies in the same .zip extracted folder. After that just run "npm serve" to run the application.

Interesting task to tryout: once you have locally built the angular application, check the Netlify website.
Netlify provides you option to host angular application for free. With 300 build minutes.
That would easily be sufficient for 1 full year . To understand how to host your own angular web application for free check my next blog post.





By on

3 comments:

  1. Gabe Co Hadwin21 September 2026 at 09:39

    This chapter provides a clear step-by-step walkthrough for creating a first Angular application, starting with Node.js and npm installation and continuing through Angular CLI setup. The sequence from checking the installed versions with node -v and npm -v to creating an application with ng new makes the setup process easy to follow for someone beginning with Angular.

    The explanation of using Angular CLI commands such as ng version, ng new MyFirstAngApp, and ng serve gives beginners a practical workflow for getting an application running locally. Following these steps while learning through an Angular Course in Chennai can make the relationship between the development environment and Angular CLI easier to understand.

    ReplyDelete
  2. Gabe Co Hadwin21 September 2026 at 09:39

    The section about the generated application's package.json is also useful because running npm install after extracting the project reinstalls the dependencies required by the application. This provides a practical connection between Angular development and the TypeScript ecosystem covered in a TypeScript Course in Chennai.

    ReplyDelete
  3. Gabe Co Hadwin21 September 2026 at 09:39

    The article also introduces the idea of deploying the locally developed application to a hosting platform such as Netlify. This gives the tutorial a useful progression from installing Angular and running the application locally to considering how the same application can be made accessible through web hosting.

    The sample project and deployment exercise provide a practical next step after completing the initial Angular setup. Moving from ng serve on a local machine toward hosting an application can also give learners a useful starting point for developing larger Angular Projects.

    ReplyDelete

Subscribe to: Post Comments (Atom)