DEV Community

Wakeup Flower
Wakeup Flower

Posted on

Complete Guide to Angular CLI for Beginners

How to use ng new

Example of usage :

ng new my-app --routing --style=scss --skip-tests --strict

Option What it does
--routing Adds Angular routing (creates app-routing.module.ts)
--prefix=custom Sets a custom prefix for components (e.g., <custom-header> instead of <app-header>)
--strict Enables strict TypeScript settings (recommended for large/serious apps)
--skip-install Skips running npm install after creating the project
--skip-tests Omits test files from generated components
--inline-style Puts styles directly in the component file (not in a separate .scss or .css)
--inline-template Puts HTML templates inline instead of in a separate file
--standalone Creates a project using standalone components (experimental, advanced)
--minimal Creates the smallest possible setup (no testing, no routing, minimal config)
--directory=your-folder Specifies a folder to create the project in
--legacy-peer-deps Useful when npm dependencies break (works like npm install --legacy-peer-deps)

Other commands


🧩 Library & Project Management

  • ng add <collection>

    Adds support for an external library to your project.

  • ng new [name] (alias: n)

    Creates a new Angular workspace.

  • ng update [packages..]

    Updates your workspace and its dependencies.

    πŸ‘‰ See: https://update.angular.dev

  • ng config [json-path] [value]

    Gets or sets configuration values in angular.json.

  • ng analytics

    Configures Angular CLI usage metrics (on/off).

  • ng cache

    Configures persistent disk caching and shows stats.


βš™οΈ Development & Build

  • ng build [project] (alias: b)

    Compiles the application or library into dist/.

  • ng serve [project] (aliases: dev, s)

    Builds and serves the app with live-reload.

  • ng run <target>

    Runs a custom builder or architect target.

  • ng deploy [project]

    Invokes the deploy builder for a project.


πŸ§ͺ Testing & Quality

  • ng test [project] (alias: t)

    Runs unit tests in the project.

  • ng e2e [project] (alias: e)

    Builds, serves, and runs end-to-end tests.

  • ng lint [project]

    Runs linting tools on the project’s code.


🌍 Internationalization

  • ng extract-i18n [project] Extracts i18n (internationalization) messages from source code.

πŸ› οΈ Code Generation

  • ng generate (alias: g) Generates or modifies files via schematics (components, modules, services, etc.).

πŸ”§ Tooling

  • ng completion

    Sets up Angular CLI autocompletion in your terminal.

  • ng version (alias: v)

    Shows the installed Angular CLI version and environment info.

Top comments (0)