Learn Angular - Getting Started with an Angular Project

#Introduction

All the foundations are ready: the environment is installed and the architecture concepts are clear. Now comes the most enjoyable part — creating your first Angular project.

Episode 3 is a complete hands-on guide: creating an application with ng new, dissecting the folder and key file structure, running the dev server with live reload, and setting up strict TypeScript, ESLint, and Prettier. After this episode, you'll have a real project ready for all the exercises that follow.

#Creating an Application with ng new

The main command for creating a project is ng new. On Angular version 17 and above, the generated project already uses standalone components by default.

ng new toko-online --style=scss --ssr=false
cd toko-online

Common flags:

• --style=scss to use SCSS as the style language.
• --ssr=false to disable server-side rendering early in the learning process.
• --routing to add the router right away (optional).
• --skip-tests if you don't want spec files to be generated.

This process installs dependencies via npm. Once it finishes, you go into the project folder and run all subsequent Angular commands from there.

#Folder and Key File Structure

#Key Files at the Root Level

• angular.json: workspace, build target, and project configuration.
• package.json: dependency list and scripts.
• tsconfig.json, tsconfig.app.json, tsconfig.spec.json: TypeScript configuration.
• src/main.ts: the application entry point that bootstraps the root component.

#The Structure Inside src

tree src -L 2

The output shows an app folder containing the root component app.component.ts, its template app.component.html, styles app.component.scss, and the app.config.ts file. index.html is the host page, while the public or assets folder is used for static assets.

#Root Component and Bootstrap

src/main.ts calls bootstrapApplication with the AppComponent:

Default main.ts

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

With standalone components, bootstrap only needs a single root component — no NgModule required. If you need a router or HTTP client, add providers in app.config.ts via provideRouter and provideHttpClient.

#Running the Dev Server and Live Reload

#ng serve

The dev server runs with ng serve. By default it runs on port 4200 with live reload active — every file change is reflected in the browser immediately.

ng serve --open

The --open flag opens the browser automatically. To change the port or host:

ng serve --port=4300 --host=0.0.0.0

ng serve --port=4300 is useful if port 4200 is already taken, while --host=0.0.0.0 makes the server reachable from other devices on the same network, for example to test on your phone.

#Other Important Commands

Besides ng serve, a few commands you'll keep using:

• ng build: builds the application into the dist folder for production.
• ng generate: generates components, services, pipes, and more.
• ng test: runs unit tests with Karma.
• ng lint: runs ESLint.

ng build
ng generate component produk

#TypeScript, Linting, and Formatting Configuration

#TypeScript Strict Mode

Angular enables strict mode by default. In tsconfig.json, make sure options such as strict, noImplicitAny, and strictNullChecks are set to true. This mode forces you to write explicit types and avoids runtime bugs.

#ESLint and Prettier

The Angular CLI uses ESLint for linting. If a project was created without linting, add it via the schematic:

ng add @angular-eslint/schematics
npm install -D prettier

After that, run ng lint to check code quality and npx prettier --write . to format all files. This formatting consistency matters when working in a team, because it avoids unnecessary diff conflicts.

#Wrap Up

Key takeaways:

• ng new project-name creates a standalone Angular project with the CLI.
• Key files: angular.json, package.json, tsconfig*.json, and src/main.ts.
• ng serve runs the dev server on port 4200 with live reload.
• ng build produces a production bundle in the dist folder.
• Strict TypeScript is on by default; use it to prevent bugs.
• ESLint and Prettier keep code quality and consistency for the team.

In the next episode, episode 4, we'll cover components and templates — creating components, using interpolation and the various forms of data binding, template references, and inter-component communication with @Input and @Output. All the hands-on work in your toko-online project starts here.