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
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
