Angular Js

Explain to Steps Angular Project Setup

Explain to Steps Angular Project Setup

Angular Project Setup

A front-end framework called Angular is used to build web applications. Although the browser doesn't know typescript, it uses typescript by default when constructing logics and methods for classes. Webpack is utilised to translate these typescript files into JavaScript in this situation. Additionally, running an angular project on your PC requires a lot of setup files.

All these tasks may be completed using Angular CLI with a few straightforward commands. For all of this work, Angular CLI uses webpack in the background.

Steps to Create your first application using angular CLI:
Note: Please confirm that node and npm are installed on your system. The command below may be used to check your node version and npm version:
node --version
npm --version

Step-1: Install angular cli
npm install - g @angular/cli

Install Specific Version of Angular
npm install -g @angular/cli@^8.0.0

Install Latest Version of Angular
npm install -g @angular/cli@latest

Step-2: Create new project by running following command
Choose yes for routing option and, CSS or SCSS.
ng new applicationname

Step-3: Go to your project directory
cd applicationname

Step-4A: Run server and see your application in action
ng serve -o
The -o indicates to open it automatically in the default browser.
The ng serve command builds the app, starts the development server, watches the source files, and rebuilds the app as you make changes to those files.

Step-4B: Build and Run Applicaiton
npm start
Internally, it uses ng serve command only. Open a browser and navigate to http://localhost:4200 to see the application home page
The http://localhost:4200 is the default URL of an Angular application created using Angular CLI.

To stop the automatic build process, press Ctrl + c in the terminal of VS Code

Once setup, can use following commands to create different type of files in your angular project

ng generate component component_name
ng generate service service_name
ng generate directive directive_name

Related Post

About Us

Community of IT Professionals

A Complete IT knowledgebase for any kind of Software Language, Development, Programming, Coding, Designing, Networking, Hardware and Digital Marketing.