Canonical URL: munonye.com에서 재게시되었습니다. 전체 코드는 GitHub에서 확인할 수 있습니다.

이 Angular OpenAI 채팅 튜토리얼은 M7-A의 Spring AI 백엔드와 통신하는 Angular 19 기반의 채팅 UI를 구축합니다. AI Developer Tutorials 허브의 일부입니다.

사전 요구 사항: 8080 포트에서 실행 중인 M7-A 백엔드, Node 18 이상, Angular CLI 19.

소요 시간: 약 50분.

1단계 — Angular 앱 생성

ng new chat-ui --routing --style=scss --ssr=false
cd chat-ui
ng serve --port 4200

main.ts에서 HttpClient를 설정합니다:

import { bootstrapApplication } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';
import { AppComponent } from './app/app.component';
...

2단계 — 채팅 서비스 (Chat service)

// chat.service.ts
import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
...

3단계 — 채팅 컴포넌트 (Chat component, standalone)

import { Component, inject, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ChatService, ChatMessage } from './chat.service';
...

AppComponent의 imports에 ChatComponent를 연결합니다.

4단계 — 반응형 폼 (Reactive forms) 허브에 연결

프로덕션 환경의 폼 유효성 검사 패턴을 위해, Angular 반응형 폼 유효성 검사 가이드를 참조하세요.

다음 단계

• Spring Boot를 활용한 RAG (M8-A)
• Angular signals 심층 분석 (M10-B)

모든 코드가 포함된 전체 튜토리얼을 munonye.com에서 읽어보세요 →

전체 튜토리얼: Angular 19에서 스트리밍 채팅 UI 구축하기 (2026)**

Kindson Munonye — GitHub · LinkedIn · 소개