Create Angular Project (Standalone)

Create Angular Project Standalone — Step-by-Step CRUD Tutorial (Standalone Components)

1. Install Angular CLI

Firstly, install the Angular CLI command below


npm install -g @angular/cli@latest

After installing Angular, you can check the version of Angular through the command below


ng version

Now, you can see the version of the installed Angular like

20.x.x.

2. Create Angular Project (Standalone by Default)

Now, you can create an Angular Project using the command below


ng new user-crud --routing --style=css

Angular 20 uses:

  1. Standalone components
  2. No app.module.ts file
  3. Routing inside main.ts

3. Run the Development Server

goto the directory of the project and run the project


cd user-crud
ng serve --open

Now, Your project opens at:


http://localhost:4200

4. Angular Latest Folder Structure (Updated)


user-crud/
├─ src/
│  ├─ app/
│  │  ├─ app.component.ts        # Standalone root component
│  │  ├─ app.component.html
│  │  └─ app.routes.ts           # Routes here
│  ├─ main.ts                    # Bootstraps the app
│  ├─ styles.css                 # Global styles
│  └─ environments/              # API URLs
├─ angular.json
├─ package.json
└─ tsconfig.json

Note: In the above structure

  1. No app.module.ts used
  2. Components use standalone: true

5. Add HttpClientModule in Latest Angular

In Angular 20, imports happen inside components or in main.ts.

Note: Add HttpClientModule inside main.ts:


// src/main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideRouter } from '@angular/router';
import { routes } from './app/app.routes';
import { provideHttpClient } from '@angular/common/http';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideHttpClient()
  ]
});

Note:

  1. No need for AppModule
  2. provideHttpClient() replaces HttpClientModule

6. Replace default app.component.html

Now, You can add navigation into app.component.html


<!-- src/app/app.component.html -->
<nav class="navbar navbar-expand-lg navbar-light bg-light p-2">
  <a class="navbar-brand" href="#">User CRUD</a>
</nav>

<div class="container mt-4">
  <router-outlet></router-outlet>
</div>