Angular Fundamentals :Creating Your First Angular Project

Creating an Angular project using the Angular CLI simplifies the setup process and helps you get started with developing web applications quickly. In this guide, I’ll walk you through how to create your first Angular project step by step, along with explanations of key options like choosing the stylesheet format and deciding on Server-Side Rendering (SSR) and Static Site Generation (SSG).

Step 1: Install the Required Tools

Before creating your project, ensure that you have the following tools installed:

1. Node.js – Download and install from nodejs.org. It includes npm, which you will use to manage dependencies.
2. Angular CLI – Install globally using the following command:

   npm install -g @angular/cli

1. Visual Studio Code (VS Code) – Download and install from code.visualstudio.com, which we’ll use as the text editor.

Step 2: Create Your First Angular Project

Once you have the necessary tools installed, open a terminal and navigate to the directory where you want to create the project. Run the following command to create a new Angular project:

ng new joes-robot-shop

In this case, we are naming the project joes-robot-shop. Make sure to choose a valid name for your project directory. The Angular CLI will then prompt you with some setup questions to customize your project.

Key Setup Questions

1. Which stylesheet format would you like to use?
   
   I selected CSS for simplicity, but you can choose from CSS, SCSS, SASS, or other options based on your preferences.

2. Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)?
   
   I answered No here. SSR and SSG are advanced features used to improve performance and SEO by generating content server-side. Since this is a beginner-level project, disabling it simplifies the setup. You can always add SSR later if you need it.

After answering these questions, the CLI will generate the project files and install the necessary dependencies.

Step 3: Open the Project in Visual Studio Code

Once the project is created, you can navigate to the project folder:

cd joes-robot-shop

Now, open this project in Visual Studio Code. You can either do this manually or run the following command from the terminal:

code .

This opens the project in VS Code. You might see a notification suggesting that you install the Angular Language Service extension. This is a helpful tool that enhances your coding experience by providing autocompletion and error detection. Click the Install button to enable this extension.

Step 4: Running the Angular Application

Now that your project is set up, it's time to run it! Use the following command in the VS Code terminal:

npm start

This command will start a local development server, and you’ll be able to access your Angular application in a browser by navigating to:

http://localhost:4200/

At this point, you should see the default Angular welcome page, which indicates that your Angular project is running successfully.

Common Issue: Security Error in PowerShell

If you're on Windows and receive an error similar to this:

npm : File C:\Program Files\nodejs\npm.ps1 cannot be loaded. The file C:\Program Files\nodejs\npm.ps1 is not digitally signed.

This error occurs due to PowerShell's execution policy. To resolve this:

1. Open PowerShell as an administrator.
2. Run the following command to allow local scripts to execute:

   Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

1. Confirm the change by typing Y and pressing Enter.

After that, try running npm start again.

Conclusion

Congratulations! You've successfully created and run your first Angular project using Angular CLI. During the setup, we chose CSS for the stylesheet format and skipped SSR/SSG for now to keep things simple. Your project is now ready to be developed, and you can start adding features like routing, components, and services.