Angular 10 Tutorial #4 - Install Angular CLI | Angular 10 Tutorial For Beginners
Angular 10 Full Tutorial Series - Part 4: Installing Angular CLI
Introduction to Angular CLI Installation
- The tutorial focuses on installing Angular CLI and generating the first Angular application, aimed at absolute beginners.
- The presenter, Sridhar, emphasizes the importance of coding along with the tutorial for effective learning. He has planned around 100 tutorials in this series.
Prerequisites for Installation
- Before installation, ensure you have a basic operating system (Windows, Mac, Linux, Chromebook), Node.js (JavaScript runtime), and Node Package Manager (NPM).
- A code editor is also required; options include Visual Studio Code, Sublime Text, or Vim.
Checking Node and NPM Versions
- Check your Node version using
node -vand ensure NPM is version 5.3 or above by runningnpm -v.
Installing Angular CLI
- To install Angular CLI globally (accessible from any path), use the command:
npm install -g @angular/cli.
- The term "CLI" stands for Command Line Interface which allows users to run commands in the terminal for efficient code generation.
Using Visual Studio Code Terminal
- Accessing the terminal in Visual Studio Code can be done using the shortcut: Control + Backtick (`).
Running Installation Commands
- After confirming Node and NPM versions, proceed with installing Angular CLI using
npm install -g @angular/cli.
- This command will fetch the latest version of Angular CLI; it may take a minute to complete.
Creating a New Project
- Once installed successfully (version 10.2.0 confirmed), create a new project using
ng new <project-name>, where<project-name>can be anything you prefer.
- For example, creating an online CRM tool can be done by naming it "simple-crm". You will be prompted to add routing and select CSS format during setup.
Project Generation Process
Getting Started with Angular: Application Setup
Initializing the Application
- The process of generating all necessary code and end-to-end tests is underway, with package installation expected to complete shortly.
- Future episodes will cover the folder structure in detail, explaining the purpose of each file and its impact on the application, making it easier for beginners to understand.
- Emphasis on patience while learning Angular or any modern web framework, especially for absolute beginners.
Running the Application
- Once all packages are installed successfully, the command
ng serveis used to start the application.
- Navigate into the project directory (
simple crm) before executingng serveto avoid errors during startup.
Compiling and Accessing the Application
- The first-time compilation of an Angular application may take a moment; subsequent reloads should be faster due to caching.
- After successful compilation, access the application at
localhost:4200, which is Angular's default port.
Confirmation of Successful Setup
- Upon successful compilation, a message indicates that the Angular development server is running on
localhost:4200.
- Seeing your project name displayed confirms that your first Angular application is up and running successfully.
Next Steps in Learning
- In upcoming episodes, detailed exploration of folder structures will occur alongside building a simple CRM application.