Angular 18 Setup in Windows 10
- Introduction
- Angular 18 and its importance in modern web development.
- Overview of what will be covered in the video.
- Prerequisites
- software/tools required:
- Node.js (version >= 16)
- npm (comes with Node.js)
- A code editor like VS Code
- how to check Node.js and npm installation:
node -v
npm -v
Link to download Node.js: https://nodejs.org/
- Install Angular CLI
- Angular CLI (Command Line Interface) and its purpose.
- installation command:
npm install -g @angular/cli
- Verify the Angular CLI version:
ng version
- Create a New Angular Project
ng new my-angular-app
options during project creation (e.g., routing, CSS/SCSS/SASS).
- Navigate to the project folder:
cd my-angular-app
- Run the Angular Application
- Explain how to start the Angular development server:
ng serve
- default port (http://localhost:4200).
- Customize and Explore
- key files and their roles (e.g., app.module.ts, app.component.ts).
- quick change in app.component.html and see live reload in the browser.
| Option | Shortcut | Description | Example |
| –directory | -d | Creates the app in a specified folder. | ng new my-app -d my-folder |
| –routing | -r | Adds a routing module for navigation support. | ng new my-app –routing |
| –style=<format> | -s | Sets the stylesheet format (css, scss, sass, less, styl). | ng new my-app –style=scss |
| –skip-install | -si | Skips installing dependencies during setup. | ng new my-app –skip-install |
| –skip-tests | -st | Skips generating test files. | ng new my-app –skip-tests |
| –inline-style | -is | Adds component styles inline instead of a separate file. | ng new my-app –inline-style |
| –inline-template | -it | Adds component HTML inline instead of a separate file. | ng new my-app –inline-template |
| –strict | Enables strict type-checking for better code quality. | ng new my-app –strict | |
| –minimal | Creates a minimal project with essential files only. | ng new my-app –minimal | |
| –legacy-peer-deps | Allows older dependencies with version conflicts. | ng new my-app –legacy-peer-deps | |
| –package-manager=<tool> | Specifies the package manager (npm, yarn, pnpm). | ng new my-app –package-manager=yarn | |
| –prefix=<prefix> | Sets a custom prefix for components (e.g., <my-root>). | ng new my-app –prefix=my | |
| –view-encapsulation | Sets style encapsulation (None, Emulated, ShadowDom). | ng new my-app –view-encapsulation=None | |
| –enable-ivy | Enables Ivy rendering engine (default in Angular 18). | ng new my-app –enable-ivy | |
| –standalone | Creates a project with standalone components instead of modules. | ng new my-app –standalone | |
| –ssr | Enables server-side rendering (SSR) with Angular Universal. | ng new my-app –ssr | |
| –interactive=false | Disables prompts for inputs during creation. | ng new my-app –interactive=false | |
| –skip-git | Skips initializing a Git repository. | ng new my-app –skip-git |