Pebellslearn by building
0%
RoadmapsMatrixCoursesSandboxSign in
Introduction to Angular  ›  Capstone Project

Setting Up a New Project

Setting up a New Project 15 minThe Angular CLI creates a ready-to-run project with ng new, serves it with live reload using ng serve, and adds new pieces with ng generate.

Setting Up a New Project

Greenhouse needs a home on your computer. You could wire up TypeScript, a bundler, a test runner and a dev server by hand, but Angular ships a tool that does all of it in one command. Learn three commands and you can start any Angular project.

The rule

ng new creates, ng serve runs, ng generate adds.

Everything goes through the Angular CLI, a command-line tool installed with npm. You need Node.js first.

npm install -g @angular/cli   # once per computer
ng new greenhouse             # create the project
cd greenhouse
ng serve                      # run it at http://localhost:4200

ng new asks a few questions (such as which stylesheet format to use), creates the folder and installs packages. ng serve compiles the app, serves it locally, and rebuilds and refreshes the browser every time you save.

The files that matter first:

  • src/index.html — the single HTML page; it contains the root tag <app-root>.
  • src/main.ts — the starting point. It calls bootstrapApplication with the root component.
  • src/app/ — your components. The root one is the App class (called AppComponent in older projects).
  • src/app/app.config.ts — app-wide setup such as the router and HTTP client.
  • angular.json and package.json — build settings and dependencies.
// src/main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { App } from './app/app';

bootstrapApplication(App, appConfig);

To add pieces, let the CLI write the boilerplate:

ng generate component plant-card   # short form: ng g c plant-card
ng generate service plant           # short form: ng g s plant

The shortcut

Picture the start-up chain and you can find anything: index.html holds <app-root> → main.ts bootstraps App → App's template contains your other components. When the page is blank, walk the chain from the left.

Adding a plant card to the new projectStep 1 of 4

  1. Generate it

    ng g c plant-card creates a plant-card folder with the class, template, styles and a test file.

A classic slip is running ng serve outside the project folder. The CLI needs angular.json to know what to build, so it will complain that it is not in an Angular workspace. cd greenhouse first.

Drills

Answer fast — trust the rule.

quick drill

Which command creates a brand-new Angular project?

quick drill

After ng serve, where does the app appear by default?

quick drill

Which file hands the root component to Angular so the app starts?

quick drill

You generated plant-card and wrote <app-plant-card /> in App's template, but Angular reports it is not a known element. What is missing?

Remember

  • ng new creates, ng serve runs with live reload, ng generate adds components and services.
  • Start-up chain: index.html → main.ts → App → child components.
  • Trap: running CLI commands outside the project folder, or forgetting to import a new component.

Practice — level up

0/1 solved

Write your answer, then compare it with a rubric and a model answer.

ExplainFrom nothing to a running app

Describe, in order, the commands and files involved in creating Greenhouse, seeing it in the browser, and adding a plant-card component. Mention where the app starts running.