Generating a Project with ng new

The ng new command creates a complete Angular workspace with a pre-configured build pipeline, testing setup, and development server.

Basic Usage

ng new my-app

This launches an interactive prompt asking:

1. Would you like to add Angular routing? — Yes for multi-page apps
2. Which stylesheet format would you like to use? — CSS, SCSS, Sass, or Less
3. Do you want to enable Server-Side Rendering (SSR)? — No for most SPAs

Non-Interactive Creation

ng new my-app --routing --style=scss --ssr=false

Generated Structure

my-app/
├── angular.json          # Build configuration and targets
├── package.json          # Dependencies and scripts
├── tsconfig.json         # TypeScript compiler options
├── tsconfig.app.json     # App-specific TS config
├── tsconfig.spec.json    # Test-specific TS config
├── .editorconfig         # Editor formatting rules
├── .gitignore
├── src/
│   ├── index.html        # Entry HTML
│   ├── main.ts           # Bootstrap file
│   ├── styles.css        # Global styles
│   └── app/
│       ├── app.component.ts
│       ├── app.component.html
│       ├── app.component.css
│       └── app.config.ts  # Standalone config (no NgModule)
└── node_modules/

Standalone vs NgModule

Modern Angular (v14+) defaults to standalone components — no AppModule required. The bootstrap happens in main.ts:

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

For legacy NgModule projects, use the --no-standalone flag.

The angular.json file is the heart of your build system. It defines how the CLI compiles, serves, and tests your application.

Key Sections

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/my-app",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": ["zone.js"],
            "tsConfig": "tsconfig.app.json",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["src/styles.css"],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true
            }
          }
        }
      }
    }
  }
}

What Each Option Does

Build Configurations

• production — optimized, minified, with budgets
• development — source maps, no optimization, faster builds

Switch between them:

ng build --configuration production
ng serve --configuration development