Workflow & CLI

Angular CLI

Your best friend in everyday Angular development. Why create files manually when the CLI can generate the boilerplate code for you?

The Angular CLI (Command Line Interface) is more than just a "start" button. It's a code generator. It not only creates files but also links them automatically, respects your folder structure, and follows best practices.

Here is my personal collection of commands that I use daily – including the "secret weapons" like Dry-Run.

1. Visualization

Click on the buttons and see what Angular does in the background. Notice how it creates four files for a component but only two for a service.

Try a command:

bash — 80x24

user@aden-ui:~/project$ █

2. Scaffolding (Code generation)

I never write ng generate component. I always use the shortcuts. It saves time and avoids typos.

Terminal

# The shorthand "g" stands for "generate"

# Component (c)
ng g c components/my-button

# Service (s)
ng g s services/auth

# Directive (d)
ng g d directives/click-outside

# Guard (g)
ng g g guards/auth

💡 Why use it?

Automatically creates the folder.
Generates .ts, .html, .scss & .spec.ts.
Uses the correct selector prefix (e.g., app-).

3. The most important flags

These are the options that make the difference.

Terminal

# --dry-run (-d): The lifesaver!
# Only shows what would happen, but does not create any files.
ng g c complex-component --dry-run

# --skip-tests: Do not create a .spec.ts file
ng g s api --skip-tests

# --inline-style (-s) & --inline-template (-t):
# No extra .html or .scss file (everything in the .ts file)
ng g c simple-badge -s -t

💡

Dry Run is worth its weight in gold: Before creating a complex module structure, I always run the command with -d first. This way, I can check if the paths are correct without creating unnecessary files in the project.

4. Build & Serve

The basics to bring the app to life.

Terminal

# Start the server
ng serve

# Start the server and open the browser (-o)
ng serve -o

# Create a production build
ng build