Setting up the local environment and workspace - Angular

Angular is a popular open-source web application framework developed and maintained by Google. It is primarily used for building single-page applications (SPAs) and provides a structured approach to developing complex web applications. Setting up the local environment and workspace is a crucial step before starting any Angular project.

Prerequisites:

Before you begin, ensure that you have the following software installed on your machine:

• Node.js: Angular requires Node.js and its package manager, npm (Node Package Manager), to be installed. You can download the latest version of Node.js from the official website: https://nodejs.org/
• Editor or IDE: You'll need a code editor or an Integrated Development Environment (IDE) to write and edit your Angular code. Popular choices include Visual Studio Code, WebStorm, Atom, and Sublime Text.

Features of Angular

The Angular CLI provides several features to streamline the development process, including:

• Generating boilerplate code for components, services, and other Angular constructs
• Serving the application during development with live reloading
• Building the application for production with ahead-of-time (AOT) compilation and bundling
• Running unit tests and end-to-end tests
• Adding third-party libraries and packages

Let's setup an angular app

Follow below steps to create a new Angular application using the Angular CLI:

1. Install the Angular CLI globally: Open your terminal or command prompt and run the following command to install the Angular CLI globally:

npm install -g @angular/cli

2. Create a new Angular project: Navigate to the desired location for your project and run the following command to create a new Angular project:

ng new my-app

This command will prompt you with several options. You can accept the defaults or customize them according to your preferences.

3. Navigate to the project directory: After the project is created, navigate to the project directory

cd my-app

Folder Structure:

Dependencies:

"dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/router": "^17.3.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  }

4. Run the development server: Start the development server by running the following command:

ng serve --open

This command will compile your Angular application and start a local development server. You should see an output similar to the following:

5. Build the project for production: To build your Angular project for production, run the following command

ng build --configuration=production

This command will optimize and bundle your application for production deployment. The built files will be placed in the dist/ directory.

By following these steps, you have successfully set up the local environment and workspace for your Angular project. You can now start developing and building your Angular applications.