Angular - 1.4 First application part 2

In the previous video we installed Node.js and npm. Now it's time for the final step: install the Angular CLI and create our first project. On the official Angular CLI page, the first information shown is the install command. Let's run it in the terminal.

The command is npm install -g @angular/cli. Let's break it down: npm install tells npm to install a package; -g (global) means we want to install it globally so it's available to all projects on the machine (without -g, the package would only work in one project). The last part, @angular/cli, is the package we want. On Linux/macOS, you'll likely need to prefix with sudo for permission to write to system folders. On Windows, this is why we opened the terminal as Administrator.

Verify and create your first project

  • Verify install with ng --version (or ng v)
  • Navigate to your projects directory (e.g. cd ~/programmation/webstormProjects)
  • Create the project: ng new my-dream-app (any name except reserved names like "test")
  • Choose routing: type "No" (we won't need it for this demo)
  • Choose stylesheet format: CSS (default — SCSS/SASS available if you prefer)

Angular CLI generates many folders and files instantly — way too many to create by hand. Once generation finishes, enter the project folder (cd my-dream-app) and run ng serve. This compiles the TypeScript and CSS into JavaScript the browser can understand, then starts a local dev server. At the end of the output, the CLI gives you a URL like http://localhost:4200. Open it in your browser and you'll see the default Angular landing page with your app's name displayed. Congratulations — your first Angular app is running! In the next video, we'll explore the project structure and start modifying it.

Summary

This lesson covers the essential installation and setup steps for Angular development, including installing Angular CLI globally via npm and creating your first Angular project from scratch. Participants learn how to execute the npm install command with global flags, understand the difference between global and local package installations, resolve permission issues on Linux and macOS systems, and verify successful installation. The lesson concludes with creating a new project using the `ng new` command and understanding configuration options like routing setup for multi-page applications.

Key points

  • Angular CLI is installed globally using `npm install -g @angular/cli` to make the `ng` command available system-wide across all projects
  • Global installation on Linux/macOS requires sudo (superuser) privileges because the CLI needs write access to protected system directories
  • Permission denied errors indicate you lack administrator rights; Windows users should open Terminal as Administrator, while Linux/macOS users must prepend sudo to the command
  • Verify the installation worked by running `ng --version` to confirm the command is recognized and displays the Angular CLI version number
  • Create new Angular projects with `ng new [project-name]` which automatically scaffolds the project structure and installs all necessary npm dependencies
  • The `-g` flag in npm stands for 'global' and differs from local installation which would only make packages available within a specific project folder

FAQ

What does the `-g` flag mean in the npm install command?

The `-g` flag stands for 'global' and installs the package system-wide so it's usable by all projects and users on the machine. Without `-g`, npm would install locally, making the package available only within that specific project directory.

Why do I get a 'Permission Denied' error when installing Angular CLI on Linux or macOS?

Global installations require write access to protected system directories that regular users cannot modify. You need administrator/superuser privileges by prefixing the command with `sudo`, or opening your terminal with administrator rights.

How do I check if Angular CLI installed successfully?

Run the command `ng --version` in your terminal. If the command is recognized and displays a version number, installation succeeded. If you see 'command not found,' the installation failed or wasn't properly added to your system PATH.