The Angular CLI and Project Structure — Angular Tutorial

Almost nobody writes an Angular app's boilerplate by hand. The Angular CLI generates it, and it also drives the day-to-day workflow of running, building, and adding to a project.

Creating a project

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

ng new asks a few setup questions (routing, stylesheet format) and scaffolds a working application. ng serve starts a local dev server, by default at http://localhost:4200, and rebuilds automatically whenever you save a file.

What gets generated

A new project's src/ folder is small on purpose:

src/
  app/
    app.component.ts
    app.component.html
    app.component.css
    app.config.ts
    app.routes.ts
  index.html
  main.ts
  styles.css

main.ts — the entry point. It bootstraps the root component and starts the app.
app.config.ts — application-wide configuration: which providers (router, HTTP client, and so on) the app makes available.
app.routes.ts — the route table, covered later in this course.
app.component.* — the root component, the top of the component tree everything else renders inside.

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

bootstrapApplication(AppComponent, appConfig);

bootstrapApplication is what tells Angular "start here" — it renders AppComponent into the <app-root> tag in index.html and wires up whatever providers appConfig declares.

Generating new pieces

Rather than hand-writing every new component, ng generate (usually shortened to ng g) scaffolds one with the right boilerplate and naming conventions:

ng generate component features/user-profile
ng generate service data/user

This creates a user-profile component folder with its .ts, .html, and .css files already wired together, and a UserService class with the @Injectable decorator already in place — one less thing to type incorrectly.

Building for production

ng build

This compiles and bundles the app into static files under dist/, ready to deploy to any static host or web server. The CLI handles minification, tree-shaking unused code, and splitting the output into chunks the browser can cache and load efficiently — all without you touching a bundler config directly.

Getting comfortable with ng serve, ng generate, and ng build covers the vast majority of what you'll type into a terminal while building an Angular app.

What gets generated

A new project's src/ folder is small on purpose:

src/ app/ app.component.ts app.component.html app.component.css app.config.ts app.routes.ts index.html main.ts styles.css

main.ts — the entry point. It bootstraps the root component and starts the app.

app.config.ts — application-wide configuration: which providers (router, HTTP client, and so on) the app makes available.

app.routes.ts — the route table, covered later in this course.

app.component.* — the root component, the top of the component tree everything else renders inside.

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

bootstrapApplication(AppComponent, appConfig);

bootstrapApplication is what tells Angular "start here" — it renders AppComponent into the <app-root> tag in index.html and wires up whatever providers appConfig declares.

Generating new pieces

Rather than hand-writing every new component, ng generate (usually shortened to ng g) scaffolds one with the right boilerplate and naming conventions:

ng generate component features/user-profile
ng generate service data/user

Building for production

ng build

Getting comfortable with ng serve, ng generate, and ng build covers the vast majority of what you'll type into a terminal while building an Angular app.