Creating a new Angular project - Mechanics & Internals

Overview - Creating a new Angular project

What is it?

Creating a new Angular project means setting up a fresh workspace where you can build web applications using Angular. Angular is a tool that helps you make interactive websites by organizing code into components and services. Starting a new project prepares all the files and settings you need to begin coding right away. It includes installing Angular's tools and generating the basic structure automatically.

Why it matters

Without a proper Angular project setup, building a web app would be slow and error-prone because you'd have to configure many things manually. This setup saves time and avoids mistakes by giving you a ready-to-use environment. It also ensures your app follows best practices, making it easier to grow and maintain. Imagine trying to build a house without a foundation or blueprint; creating a new Angular project is like laying that foundation.

Where it fits

Before creating an Angular project, you should know basic command line usage and have Node.js installed on your computer. After this, you will learn how to add components, services, and routing to build your app. Later, you will explore testing, deployment, and advanced Angular features like state management.

Mental Model

Core Idea

Creating a new Angular project sets up a ready-made workspace with all tools and files needed to build an Angular web app efficiently.

Think of it like...

It's like buying a new LEGO set that comes with instructions and all the pieces organized, so you can start building your model right away without searching for parts.

┌───────────────────────────────┐
│       Angular CLI Tool         │
└──────────────┬────────────────┘
               │
               ▼
┌───────────────────────────────┐
│  New Angular Project Created  │
│ ┌───────────────┐             │
│ │ src/          │  Source code│
│ │ angular.json  │  Config     │
│ │ package.json  │  Dependencies│
│ │ tsconfig.json │  TypeScript │
│ └───────────────┘             │
└───────────────────────────────┘

Build-Up - 6 Steps

1

Foundation

Install Node.js and npm

Concept: Angular requires Node.js and npm to manage packages and run commands.

Download and install Node.js from the official website. npm (Node Package Manager) comes bundled with Node.js. Verify installation by running 'node -v' and 'npm -v' in your terminal.

Result

You have Node.js and npm installed, enabling you to use Angular CLI and manage packages.

Understanding that Angular depends on Node.js and npm is crucial because these tools handle the project's dependencies and commands.

2

Foundation

Install Angular CLI globally

Concept: Angular CLI is a command-line tool that helps create and manage Angular projects easily.

Run 'npm install -g @angular/cli' in your terminal to install Angular CLI globally. This allows you to use the 'ng' command anywhere on your computer.

Result

Angular CLI is installed and ready to create and manage Angular projects.

Knowing that Angular CLI automates project setup saves you from manual configuration and speeds up development.

3

Intermediate

Create a new Angular project

🤔Before reading on: do you think 'ng new' creates just files or also installs dependencies? Commit to your answer.

Concept: The 'ng new' command generates a new Angular project folder with all necessary files and installs dependencies automatically.

Run 'ng new my-angular-app' in your terminal. You will be prompted to choose options like adding routing and stylesheet format. After confirming, Angular CLI creates the project folder and installs packages.

Result

A new folder 'my-angular-app' with Angular project files and installed dependencies is ready for development.

Understanding that 'ng new' does both file creation and dependency installation helps you avoid manual setup errors.

4

Intermediate

Explore project structure basics

🤔Before reading on: do you think 'src/app' contains your app's main code or configuration files? Commit to your answer.

Concept: The project folder has a specific structure where source code, configuration, and dependencies are organized for clarity and efficiency.

Inside the project folder, 'src/app' holds your app components, 'angular.json' configures the build, and 'package.json' lists dependencies. Understanding these helps you navigate and modify your app.

Result

You can locate and edit your app's code and settings confidently.

Knowing the folder roles prevents confusion and speeds up development and debugging.

5

Advanced

Run and serve the Angular app locally

🤔Before reading on: do you think 'ng serve' builds the app once or watches for changes continuously? Commit to your answer.

Concept: 'ng serve' compiles the app and starts a local server that reloads automatically when you change code.

Inside your project folder, run 'ng serve'. The terminal shows the local address (usually http://localhost:4200). Open this in a browser to see your app. Edit files and watch the browser update instantly.

Result

Your Angular app runs locally with live reload, enabling fast development feedback.

Understanding live reload accelerates your coding process by showing changes immediately without manual refresh.

6

Expert

Customize project creation with flags

🤔Before reading on: do you think Angular CLI flags only change appearance or also affect build and dependencies? Commit to your answer.

Concept: Angular CLI offers flags to customize project setup, affecting build options, styling, and testing configurations.

Use commands like 'ng new my-app --routing --style=scss --strict' to add routing, choose SCSS for styles, and enable strict type checking. These flags tailor the project to your needs from the start.

Result

A project configured with your preferred features and stricter code quality settings is created.

Knowing how to customize project creation saves time and enforces best practices from the beginning.

Under the Hood

When you run 'ng new', Angular CLI uses Node.js scripts to generate a folder structure with configuration files, source code templates, and package manifests. It then runs 'npm install' to download all required libraries into 'node_modules'. The CLI configures build tools like Webpack behind the scenes to prepare for compiling TypeScript and bundling assets.

Why designed this way?

Angular CLI was designed to automate repetitive setup tasks and enforce consistent project structure. Before CLI, developers manually created files and configured tools, which was error-prone and inconsistent. Automating this ensures best practices and speeds up onboarding.

┌───────────────┐
│ ng new command│
└───────┬───────┘
        │
        ▼
┌───────────────────────────────┐
│ Generate project files & folders│
│ ┌───────────────┐             │
│ │ src/          │  Source code│
│ │ angular.json  │  Config     │
│ │ package.json  │  Dependencies│
│ └───────────────┘             │
└───────────────┬───────────────┘
                │
                ▼
       Run 'npm install'
                │
                ▼
       Download dependencies
                │
                ▼
       Ready-to-use Angular app

Myth Busters - 4 Common Misconceptions

Quick: Does 'ng new' only create files or also install dependencies? Commit to your answer.

Common Belief: Many think 'ng new' just creates files and you must run 'npm install' separately.

Reality: 'ng new' automatically runs 'npm install' after creating files, so dependencies are ready immediately.

Why it matters: If you skip this, you might waste time running extra commands or get errors trying to run the app.

Quick: Is Angular CLI required to build Angular apps? Commit to yes or no.

Common Belief: Some believe Angular CLI is optional and you can build Angular apps manually without it.

Reality: While possible, Angular CLI is the standard tool that handles complex configurations and build steps automatically.

Why it matters: Not using CLI leads to complicated manual setups, more bugs, and slower development.

Quick: Does 'ng serve' produce a production-ready build? Commit to yes or no.

Common Belief: Many think 'ng serve' creates a production-ready optimized app.

Reality: 'ng serve' runs a development server with unoptimized code for fast rebuilds; production builds require 'ng build --prod'.

Why it matters: Deploying code built with 'ng serve' can cause performance and security issues.

Quick: Does choosing routing during 'ng new' add routing code automatically? Commit to yes or no.

Common Belief: Some think selecting routing adds a full navigation system automatically.

Reality: It only adds basic routing setup and files; you still write your own routes and navigation logic.

Why it matters: Expecting a complete system can cause confusion and wasted time searching for missing features.

Expert Zone

1

Angular CLI's strict mode enables advanced TypeScript checks that catch subtle bugs early but can be challenging for beginners.

2

The choice of stylesheet format (CSS, SCSS, etc.) at project creation affects tooling and build steps, influencing team workflows.

3

Angular CLI caches build artifacts to speed up repeated builds, but sometimes cache clearing is needed to fix strange errors.

When NOT to use

Creating a new Angular project with CLI is not suitable if you want to integrate Angular into an existing non-Angular app or use a custom build system. In such cases, manual setup or micro-frontend architectures might be better.

Production Patterns

In real projects, teams use 'ng new' with flags to enforce consistent styles and strictness. They often customize angular.json for environment-specific builds and integrate CI/CD pipelines that run 'ng build --prod' for deployment.

Connections

Node.js Package Management

Builds-on

Understanding npm and package.json helps you grasp how Angular manages dependencies and scripts during project creation.

Software Project Initialization

Same pattern

Creating an Angular project follows the general pattern of initializing software projects with scaffolding tools, similar to 'create-react-app' or 'django-admin startproject'.

Manufacturing Assembly Lines

Analogy to process automation

Just like assembly lines automate building products efficiently, Angular CLI automates setting up projects to reduce manual work and errors.

Common Pitfalls

#1 Trying to run Angular commands without installing Angular CLI globally.

Wrong approach:

ng new my-app

Correct approach:

npm install -g @angular/cli
ng new my-app

Root cause:

Not understanding that 'ng' commands come from Angular CLI which must be installed first.

#2 Running 'ng serve' outside the Angular project folder.

Wrong approach:

cd ~
ng serve

Correct approach:

cd my-angular-app
ng serve

Root cause:

Not realizing Angular commands must be run inside the project directory to find configuration files.

#3 Skipping prompts by using 'ng new my-app --defaults' without knowing what defaults are set.

Wrong approach:

ng new my-app --defaults

Correct approach:

ng new my-app (answer prompts manually to choose routing and style)

Root cause:

Assuming defaults fit all projects can lead to missing important setup choices like routing or styling.

Key Takeaways

Creating a new Angular project with Angular CLI sets up a ready-to-use workspace with all necessary files and dependencies.

Angular CLI automates complex setup tasks, saving time and enforcing best practices for your app structure and build process.

Understanding the project structure helps you navigate and modify your app efficiently as it grows.

Running 'ng serve' starts a local development server with live reload, speeding up your coding feedback loop.

Customizing project creation with CLI flags tailors your app to your needs and improves code quality from the start.