{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreigp5gjaw3m5wxixnd35tu2ypecmrksr3yrp7765l32kudvqov73pq",
    "uri": "at://did:plc:25rdn5elo5izoxrmtis34zuk/app.bsky.feed.post/3mpf6a7kho732"
  },
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreifioarrgvr7prramx5mrknaxk7jch4qncditi77dcx64nei3smquu"
    },
    "mimeType": "image/webp",
    "size": 23696
  },
  "path": "/alkademy/angular-crud-tutorial-2026-edition-part-1-setup-with-spring-boot-372h",
  "publishedAt": "2026-06-28T23:09:40.000Z",
  "site": "https://dev.to",
  "tags": [
    "angular",
    "springboot",
    "tutorial",
    "crud",
    "munonye.com",
    "product-app-spring-api on GitHub",
    "Part 2 on munonye.com",
    "Part 3",
    "Part 4",
    "Part 5",
    "Part 6",
    "munonye.com/angular-crud-spring-boot-rest-api-complete-guide/",
    "GitHub",
    "LinkedIn",
    "About",
    "YouTube",
    "@angular",
    "@Component",
    "@Injectable"
  ],
  "textContent": "> **Canonical URL:** This article is republished from the original on munonye.com. Read the full six-part series and updated Angular 19 code there.\n\n##  Introduction\n\nIn this tutorial you'll set up a **Friends CRUD application** with:\n\n  * **FriendsAPI** — Spring Boot REST backend (port 9001)\n  * **FriendsUI** — Angular frontend (port 9002)\n\n\n\nThis is Part 1 of 6. The complete roadmap is on munonye.com.\n\n**Prerequisites:** Node.js 18+, Angular CLI, Java 17+, basic TypeScript and REST fundamentals.\n\n**Estimated time:** ~45 minutes.\n\n##  Angular 19 Setup (Updated 2026)\n\nModern Angular uses **standalone components** and functional providers — no `AppModule` required.\n\n###  Create the project\n\n\n    npm install -g @angular/cli@latest\n    ng new friends-ui --routing --style=scss --ssr=false\n    cd friends-ui\n    ng serve --port 9002\n\n\n###  Bootstrap with HttpClient\n\n\n    // main.ts\n    import { bootstrapApplication } from '@angular/platform-browser';\n    import { provideRouter } from '@angular/router';\n    import { provideHttpClient } from '@angular/common/http';\n    import { AppComponent } from './app/app.component';\n    import { routes } from './app/app.routes';\n\n    bootstrapApplication(AppComponent, {\n      providers: [provideRouter(routes), provideHttpClient()]\n    });\n\n\n###  Standalone root component\n\n\n    import { Component } from '@angular/core';\n    import { RouterOutlet } from '@angular/router';\n\n    @Component({\n      selector: 'app-root',\n      standalone: true,\n      imports: [RouterOutlet],\n      template: `<router-outlet></router-outlet>`\n    })\n    export class AppComponent {}\n\n\n###  Environment config\n\n\n    // src/environments/environment.ts\n    export const environment = {\n      production: false,\n      apiUrl: 'http://localhost:9001/api/friends'\n    };\n\n\n###  Injectable service\n\n\n    import { Injectable, inject } from '@angular/core';\n    import { HttpClient } from '@angular/common/http';\n    import { environment } from '../environments/environment';\n\n    @Injectable({ providedIn: 'root' })\n    export class FriendService {\n      private http = inject(HttpClient);\n      private base = environment.apiUrl;\n\n      getAll() {\n        return this.http.get<Friend[]>(this.base);\n      }\n    }\n\n\n##  Spring Boot REST API\n\nCreate a Spring Boot project with **Web** , **JPA** , and **H2** dependencies. Add:\n\n  * `FriendController.java`\n  * `Friend.java` (entity)\n  * `FriendService.java`\n  * `FriendRepository.java`\n  * `data.sql` for seed data\n\n\n\nReference implementation: product-app-spring-api on GitHub\n\n\n\n    server.port=9001\n    spring.datasource.url=jdbc:h2:mem:friendsdb\n    spring.jpa.hibernate.ddl-auto=update\n\n\n##  What's next\n\nPart | Topic | Link\n---|---|---\n2 | GET — list records | Part 2 on munonye.com\n3 | POST — create | Part 3\n4 | Details view | Part 4\n5 | PUT — edit | Part 5\n6 | DELETE | Part 6\n\n**Complete guide (all parts):** munonye.com/angular-crud-spring-boot-rest-api-complete-guide/\n\n##  About the author\n\n**Kindson Munonye** — software engineer and technical author.\n\nGitHub · LinkedIn · About · YouTube",
  "title": "Angular CRUD Tutorial (2026 Edition) — Part 1: Setup with Spring Boot"
}