Angular 7 Hello World App – Instructions

Angular Hello World App

In this post, you would learn about how to quickly get started with Angular 7 hello world app. Here are the steps to build the Angular App. Actually, the steps could be used to build an Angular app with any version of Angular such as Angular 6 or Angular 5.

Angular Hello World App


  • Install NodeJS: Install the NodeJS. Angular requires Node.js version 8.x or 10.x. If you already have Node installed, check the version using the command, node -v and update the NodeJS to latest version appropriately using instructions provided on this page, How to update NodeJS and NPM to next versions. In case you do not have NodeJs installed, go to NodeJS website and download the appropriate NodeJS version.
  • Install NPM: Make sure you have NPM (Node Package Manager) installed as well. NPM is generally distributed with Node.js. This means that when Node.js is downloaded and installed, one automatically gets npm installed on the computer. Check by executing the command such as npm -v.
  • Install/Update Angular-CLI: Angular CLI is a command line tool which could be used to do tasks such as project creation, application module/components creation, and deployment tasks such as build, test, and deployment. Here is the command to install Angular CLI:
    npm install -g @angular/cli

    In case, you have earlier versions such as Angular 6.* installed on your system, execute the following command to migrate to Angular 7 version.

    ng update @angular/cli @angular/core
  • Create Hello World Project using Angular-CLI: Create a hello world project using the following Angular-CLI command. Here the name of the hello world app is given as “smart-resumes”.
    ng new smart-resumes
  • Test the App: Test your Hello world app by executing the following command:
    cd smart-resumes
    ng serve --open

    The above would make the app accessible at the port, 4200. In case, the port is already in use, one could use the following command:

    ng serve --open --port 4300

    Go to a browser window and access the app at the URL such as http://localhost:4300.

  • Make Changes and Test the App: Go to the folder smart-resumes/src/app and open the file, app.component.ts and change the title from “smart-resumes” to “SmartResumes App”. Check the browser window displaying the app. You would find that the title has got changed to Welcome to SmartResumes App.

Table of Contents


In this post, you learned about steps which could be taken to create your first Hello World App using Angular 7. The important point to note is that one would need to have NodeJS and NPM (Node Package Manager) installed/updated to start working with Angular Apps. It is the Angular-CLI which makes it easy to create an Angular project and create boilerplate code for modules, components etc.

Ajitesh Kumar
Follow me

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. For latest updates and blogs, follow us on Twitter. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking. Check out my other blog,
Posted in AngularJS, Javascript, Web. Tagged with , , .

Leave a Reply

Your email address will not be published. Required fields are marked *