Get Started With Angular

Mercy Jemosop
3 min readSep 8, 2021

--

Create your first angular project

Introduction

Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps.

To create our first project. Check if angular is installed in your computer by checking its version.

ng --version (or ng -v )

if you get : Command ‘ng’ not found, you need to install it in your computer.

Step 1:

Check if you have node.js and package manager installed in your machine.run node -v andnpm -v in a terminal window

node -v or nodejs --version
npm -v

To install nodejs and npm run the following commands:

- sudo apt update
- sudo apt install nodejs npm
- nodejs --version
- npm -v

If you encounter any challenge here is a link to a tutorial to Install node.js in your machine. You can find other resources of your choice to install node.js .

N.B if your nodejs version does not meet the requirements(you had already installed nodejs older version). You need to update nodejs. Here is a link to more information about nodejs update.

update nodejs using nvm

run the following command on the terminal

To install nvm using wget

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

confirm if the installation was successful.N.B you can restart/close and open the terminal before running this command. It will output nvm.

command -v nvm

download and update to the latest Node.js version by running the following

nvm install node

To get a specific version.Check the documentation for the recommended version.

nvm install 12.18.3

check all versions installed

nvm ls

select the specific node version to use

nvm alias default v12.18.3(your version you upgrade to)

Step 2:

Install the Angular CLI. Check if angular is installed in your machine.

ng -v

If it’s not installed run the command below to install angular CLI.

npm install -g @angular/cli

if you encounter this error below

The Solution I found for this error is using the commands below. You can add a better solution if any on the comment section

sudo chown -R `whoami` ~/.npmnpm install -g @angular/cli

To check if everything works well

Congratulations!!!!!!!!!!!!! if you have reached this stage.

Step 3:

Create a new workspace and initial starter app. The ng new command prompts you for information about features to include in the initial app. Accept the defaults by pressing the Enter or Return key.

The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes.

N.B You can’t give a name with underscore e.g my_app this will result in an error.

ng new my-app

Step 4:

To run the application on your browser:

  • Navigate to the workspace folder, such as my-app
cd my-app
  • The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files. The --open (or just -o) option automatically opens your browser to http://localhost:4200/ .Run the application on browser:
ng serve --open

Congratulations you have created your first application

In-case you encounter the error below. Run the following command:

npm update
ng serve --open

Create a simple Angular Application

Angular folder structure walk through

Happy coding!!!!!!!!!!!!!!!!!!!

Source angular official documentation.

Nodejs update source

--

--

Mercy Jemosop
Mercy Jemosop

Written by Mercy Jemosop

Software Developer. I am open to job referrals. connect with me on twitter @kipyegon_mercy

No responses yet