Get Started With Angular
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
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 tohttp://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!!!!!!!!!!!!!!!!!!!