Tutorials

Quickstart | Angular 2

Key Takeaways

  • Angular CLI creates the project, installs dependencies, generates components, and runs development commands.
  • Use the generated TypeScript configuration rather than replacing package.json or writing a separate build setup.
  • A standalone component is used by importing it into its parent component and adding its selector to the parent's template.
  • You'll finish with Hello World from Angular! visible at http://localhost:4200.

To create an Angular app, generate a project with Angular CLI, start its development server, and add a component to the root template. This Angular tutorial for beginners takes you through that workflow with TypeScript and a standalone greeting component.

Getting Started: Node.js and Angular CLI

Install Node.js and npm before continuing. Node.js is required for the CLI development workflow shown here; the browser application you'll build doesn't require a Node.js server to run after deployment.

Use Node.js 24.22.0 for the baseline above. The CLI release supports Node.js 24.15.0 or later within the 24.x release line; check Angular's version compatibility table when choosing a different Angular release.

Check your installation in a terminal:

node --version
npm --version

We'll invoke the CLI with npx, which can run a specified package without a global installation. After project creation, npx ng uses the CLI installed in the workspace. For more installation background, see our Angular CLI installation guide.

Create an Angular App with the CLI

From the directory where you keep your projects, run:

npx --yes @angular/cli@22.2.3 new my-angular-app --standalone --routing=false --ssr=false --style=css --package-manager=npm --defaults
cd my-angular-app
npx ng version

The ng new command creates the workspace, application files, package scripts, and configuration, and installs dependencies. Don't run npm init first or replace the generated package.json.

The options keep this first project focused:

  • --standalone creates an application without an NgModule.
  • --routing=false and --ssr=false leave out routing and server-side rendering.
  • --style=css selects CSS stylesheets, and --package-manager=npm selects npm for dependency installation.
  • --defaults accepts defaults for options that have them; --yes belongs to npx and suppresses its package-install confirmation.

Pinning the scaffolding command selects a specific CLI release, not an immutable dependency tree. Keep the generated package-lock.json in version control and use npm ci for subsequent clean installations from that lockfile.

Understand the Generated Workspace

A workspace is the directory containing your Angular projects and their shared tooling configuration. For this single-application workspace, the important files are:

  • package.json: dependencies and npm scripts.
  • angular.json: configuration for CLI tasks such as building, serving, and testing.
  • tsconfig.json and tsconfig.app.json: shared and application-specific TypeScript configuration.
  • src/main.ts: the application's entry point.
  • src/app/app.ts, app.html, and app.css: the root component, its template, and its stylesheet.
  • README.md: generated project documentation.

The current CLI naming convention uses app.ts rather than the older app.component.ts. This tutorial changes the root component, its template, and its test, plus the generated greeting component and its template. Leave the startup and configuration files unchanged.

Setting Up TypeScript: Keep the Generated Configuration

There's no separate TypeScript installation or configuration step for this project: Angular CLI supplies both. TypeScript checks your component code before it runs, while Angular's template checking can catch references to component properties that don't exist.

In the example below, message is a text-valued class property. TypeScript infers its type from its initializer, so you don't need to add a redundant type annotation.

Keep the generated configuration intact. TypeScript compiler options are only part of the build setup; Angular CLI's builders and settings in angular.json also control compilation and optimization. A hand-written tsconfig.json alone doesn't replace that pipeline.

Run Your Angular App Locally

Inside my-angular-app, start the development server:

npm start

The generated start script runs ng serve. Open http://localhost:4200 and confirm that the generated application loads; the particular starter-page content isn't important. Keep this terminal running while you edit—the development server watches for changes and updates the application.

Press Ctrl+C in that terminal when you want to stop the server. Use a second terminal, also inside my-angular-app, for the next command.

Create Your First Standalone Component

A component combines a TypeScript class with a template that describes its rendered HTML. Generate the greeting component:

npx ng generate component greetings

The component generator creates greetings.ts, greetings.html, greetings.css, and greetings.spec.ts under src/app/greetings/. The component is standalone, so it doesn't need an NgModule declaration.

Add the Greeting Message

Replace the complete contents of src/app/greetings/greetings.ts with:

import { Component } from '@angular/core';

@Component({
  selector: 'app-greetings',
  imports: [],
  templateUrl: './greetings.html',
  styleUrl: './greetings.css',
})
export class Greetings {
  protected readonly message = 'Hello World from Angular!';
}

Replace src/app/greetings/greetings.html with:

<h2>{{ message }}</h2>

@Component supplies Angular's component metadata. The selector identifies the element used by a parent, while templateUrl and styleUrl reference files relative to the component. The empty imports array means this template doesn't use any imported components, directives, or pipes.

The {{ message }} expression is text interpolation: Angular renders the property's value as text. Leave the generated CSS and greeting test files unchanged.

Import the Greeting into the Root Component

Replace src/app/app.ts with:

import { Component } from '@angular/core';
import { Greetings } from './greetings/greetings';

@Component({
  selector: 'app-root',
  imports: [Greetings],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
export class App {}

Then replace src/app/app.html with:

<app-greetings></app-greetings>

Both imports matter: the TypeScript import makes the class available in this file, and imports: [Greetings] makes the component available to the root template. Modern Angular components are standalone by default, which is why these decorators don't need an explicit standalone: true.

Return to http://localhost:4200. The page should now display:

Hello World from Angular!

Update the Test and Check the Build

The generated root test checks starter content that you've replaced. Update src/app/app.spec.ts to test the result you actually want:

import { TestBed } from '@angular/core/testing';
import { App } from './app';

 describe('App', () => {
  it('renders the greeting', async () => {
    TestBed.configureTestingModule({ imports: [App] });

    const fixture = TestBed.createComponent(App);
    await fixture.whenStable();

    const element: HTMLElement = fixture.nativeElement;
    expect(element.querySelector('app-greetings h2')?.textContent)
      .toBe('Hello World from Angular!');
  });
});

TestBed.createComponent() creates the component in the test environment, and whenStable() waits for the initial rendering. The generated test setup supplies the test globals used here.

Run the tests once, then create a production build:

npx ng test --watch=false
npx ng build

--watch=false disables test watch mode. In the generated workspace, ng build uses the production configuration; deployment uses the build output rather than the development server.

Common Mistakes

  • Looking for app.module.ts: this standalone project doesn't use an NgModule. Add the child component to its parent's imports instead.
  • Importing the class but not the template dependency: a TypeScript import alone doesn't make app-greetings available in the template.
  • Mixing old and new filenames: use the filenames generated in this workspace, not filenames copied from an older tutorial.
  • Port 4200 is occupied: stop the other server, or run npx ng serve --port 4300 and open http://localhost:4300.
  • Running commands outside the workspace: return to my-angular-app before generating components or starting the application.

Where to Go Next

You've created a project, connected a child component to its parent, and verified the rendered greeting. Next, try changing the message, then explore building Angular components or deploying an Angular CLI application.

For command help, run npx ng --help or npx ng generate component --help. The generated README.md is also a useful reference for your project's commands.

FAQ

How do I create a new Angular project with the CLI?

Run ng new with a project name through Angular CLI. This guide uses npx to select CLI 22.2.3, which creates the workspace, generates the application, and installs its dependencies without requiring a global CLI installation.

What Node.js version do I need for Angular?

For this Angular 22.2 setup, use Node.js 24.15.0 or later within the 24.x release line; this guide's baseline is Node.js 24.22.0 LTS. Node.js is required for the CLI workflow, and other Angular releases can have different requirements.

Are Angular components standalone by default?

Yes. Modern Angular components are standalone by default, and the CLI creates standalone applications by default. To use a standalone child component, add it to the parent's imports array and place its selector in the parent's template.

Why use TypeScript with Angular?

TypeScript checks types before your application runs and can infer types from values, reducing the need for explicit annotations. Angular CLI installs and configures TypeScript, while Angular's template checking also helps catch invalid component-property references.

How do I run an Angular app locally?

Inside the generated project directory, run npm start, which invokes ng serve. Open http://localhost:4200, leave the terminal running while you edit, and press Ctrl+C to stop the server.

Further Reading

Written by Sam Erickson

Software engineer. I write every article on StackChief myself. Author of Mastering the Tech Interview. More about me

Related reading