Creating a New Angular Project With the Angular CLI

Every Angular project starts from the Angular CLI's ng new command — it scaffolds a working, buildable app in one step and asks a short set of configuration questions that are easy to answer wrong without knowing what they change later.

1. Installing the CLI

npm install -g @angular/cli
ng version

2. Creating the project

ng new my-app

The CLI then prompts for:

• Stylesheet format — CSS, SCSS, Sass, or Less. This sets the default extension for every component's style file the CLI generates afterward; switching later means manually renaming files and updating angular.json, so picking the team's actual choice up front avoids that.
• Server-Side Rendering (SSR) / Static Site Generation (SSG) — adds @angular/ssr and a Node server entry point. Skip this unless the app specifically needs pre-rendered HTML for SEO or fast first paint; it adds real build and deployment complexity that's wasted on an internal tool or an app behind a login.

Modern Angular (17+) defaults to standalone components and no NgModules at all — ng new no longer asks about routing or strict mode separately the way older CLI versions did; routing is set up automatically if the app needs it, and strict TypeScript mode is on by default.

3. What gets generated

my-app/
  src/
    app/
      app.ts            # root standalone component
      app.config.ts      # application-wide providers (router, HttpClient, etc.)
      app.routes.ts       # route definitions
    main.ts               # bootstraps the app
  angular.json             # build/serve/test configuration
  package.json

4. Running it

cd my-app
ng serve

This starts a local dev server (default http://localhost:4200) with live reload — saving any source file triggers an incremental rebuild and refreshes the browser automatically, without a manual restart.

5. Generating components, services, and more

Once the project exists, ng generate (or ng g) scaffolds new pieces consistently instead of hand-creating files:

ng generate component product-list
ng generate service product
ng generate directive highlight

Each of these creates the file(s), wires up the class boilerplate, and — for a component — creates a matching spec file for unit tests, keeping generated code structurally consistent across a team rather than depending on each developer remembering the exact conventions by hand.