Angular - 3-3 creating an application

Now that the plan is on paper, it is time to create the actual Angular project in Visual Studio Code. We start by creating a parent folder — for instance project-angular on the Desktop — that will host every project of the course. The exact location does not matter; you can create the folder from the file explorer or directly from a terminal with mkdir project-angular.

From the integrated terminal we move into the folder with cd Desktop/project-angular and run the Angular CLI to scaffold a new app. ng new (or its shorthand ng n) expects a name — we will use ng-cuisine to stay close to the recipe theme. We also add the --strict flag, which enables stricter type checking and a more maintainable workspace. Strict mode catches several categories of bugs early, so it is a habit worth taking from the start.

cd Desktop/project-angular
ng new ng-cuisine --strict

The CLI asks two questions: do we want routing? For now we answer n — we will add it manually later. Which stylesheet format? We pick CSS, the simplest choice for this course. Angular then installs every npm dependency, generates the folder structure and writes the configuration files for us. The first run takes a couple of minutes; subsequent commands will be much faster.

When the installation is over, ls reveals the freshly created ng-cuisine folder. We enter it with cd ng-cuisine and open it in VS Code either through File → Open folder… or, faster, by typing code . straight in the terminal. The current window is replaced by a new VS Code window pointing at the project root, ready for the configuration step covered in the next lesson.

Summary

This lesson walks you through creating a new Angular application from scratch using the Angular CLI. You'll learn how to set up a project folder structure, use the ng new command with the --strict flag for stricter type checking and better maintainability, configure your initial project settings (routing and stylesheet format), and open your newly created project in Visual Studio Code for development.

Key points

  • Create a dedicated 'project-angular' folder to organize multiple Angular projects in one location
  • Use the Angular CLI command 'ng new [project-name] --strict' to generate a new application with strict type checking enabled
  • The --strict flag improves code maintainability, enables stricter type verification, and helps catch bugs earlier in development
  • Configure your project by declining routing setup initially and selecting CSS as the stylesheet format
  • Navigate to your project directory and open it in VS Code using the 'code .' terminal command
  • The Angular CLI automatically installs all required dependencies and generates the complete project structure

FAQ

What does the --strict option do when creating an Angular application?

The --strict option enables stricter type checking, improves code maintainability, and helps detect potential bugs early in your development process. It's recommended for most new projects to follow best practices.

How do I open my newly created Angular project in Visual Studio Code?

Navigate to your project directory using 'cd [project-name]' in the terminal, then type 'code .' to open Visual Studio Code with your project folder automatically loaded.

Is routing required when first creating an Angular application?

No, routing is optional. When the CLI prompts you during project creation, you can select 'n' (no) if you don't need routing immediately. You can add routing to your project later as needed.