How to set up an Angular project in your local environment?

Page Visited: 736
Read Time:2 Minute, 42 Second

Angular is becoming popular as a front-end development platform built on the typescript. Angular JS is built on Javascript, but later Angular was built using typescript. Typescript is the superset of Javascript and has more benefits like type checking, better tooling and improved development experience. You can use Javascript to write angular code, but it is not recommended. So let us see how to set up an Angular project on your local.

How to set up an Angular project on your local.

For setting up an angular project you need Node.js Installed in your system. You can download Node.js here. After you install Node.js you have to install Angular CLI, using this command line in your Command Prompt. Open the Command prompt using Win+R and type “cmd” in the input box and click “Ok”

Angular project on your local
npm install -g @angular/cli

After that, you run the Angular Setup Code. I have just used “my project” as the project name, you can use any name you want. When you run this code, it will ask you if you like to add Angular routing, please select yes, as routing is needed to create an application. After that it will ask you the stylesheet format, I would advise you to use SCSS, but you are free to use any.

ng new my-project

After this setup, you have the angular project installed in your local system. Using this below code you can start the server to see the angular app. Just open http://localhost:4200/ to see the basic app.

cd my-project
ng serve

Now you have angular installed in your local. You can start exploring the files and folders to work on your project. Angular is an MVVM platform.

Create Component

The basic file structure of any component in angular is an HTML file, TS file and SCSS file. You can create components using this command line. I have created a new component “test”.

ng generate component test

Create routing for new component

After you install your new component, you want to access that component.

  • Go to app-routing.module.ts it is located inside src/app, there you have to import the new component you have created.
  • For defining any new routing for a component, you have to import the component into this file.
  • It is best to add it in the first line of the file

Add this code in app-routing.module.ts

import { TestComponent } from './test/test.component';

const routes: Routes = [
{ path: 'test', component: TestComponent },  
];

After that add this code to app-component.html. I have just copied the old component files and changed the title, just to show you

<a [routerLink]="['/test']">Test</a>

Check Versions

To check for the angular version & node version you can use this code.

Check the angular version using the command line and enter this command

ng version

Check the Node version, use the command line and enter this command

node -v

Conclusion

This is just a setup of the angular project on your local system. I will create a more comprehensive guide on Angular. Also, I will be creating this kind of setup code for all the possible Programming languages.

About Post Author

Girish

Hello Guys I am a website developer by profession but is always keen on learning new things. I have been investing in Mutual funds, stock market for the past few years because of which I have gained good knowledge. I started my entrepreneur journey in 2019 which lead me to learn more things as I am moving forward. I always love to share whatever I learn. Always had a craze for cars from my childhood, which inspired me to start this website.
Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %

Girish

Hello Guys I am a website developer by profession but is always keen on learning new things. I have been investing in Mutual funds, stock market for the past few years because of which I have gained good knowledge. I started my entrepreneur journey in 2019 which lead me to learn more things as I am moving forward. I always love to share whatever I learn. Always had a craze for cars from my childhood, which inspired me to start this website.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Enable Notifications OK No thanks