To create a TypeScript web application using Angular and Firebase Realtime Database, follow these steps:

1. Install Node.js and npm
Download and install the latest version of Node.js from https://nodejs.org/. This will also install npm (Node Package Manager).

2. Install Angular CLI
Open your terminal or command prompt and run the following command to install Angular CLI globally:
```
npm install -g @angular/cli
```

3. Create a new Angular project
Create a new Angular project by running the following command in your terminal:
```
ng new angular-firebase-chat
```
Navigate to the newly created folder:
```
cd angular-firebase-chat
```

4. Install Firebase and AngularFire libraries
Run the following commands to install Firebase and AngularFire libraries for Angular:
```
npm install firebase @angular/fire --save
```

5. Set up Firebase
Go to https://firebase.google.com/ and sign in with your Google account. Click on "Get started" and create a new project. After creating the project, click on "Add Firebase to your web app" and copy the configuration object.

6. Add Firebase configuration to environment files
In your Angular project, open `src/environments/environment.ts` and `src/environments/environment.prod.ts`. Add your Firebase configuration object to both files like this:
```typescript
export const environment = {
  production: false,
  firebaseConfig: {
    apiKey: 'your-api-key',
    authDomain: 'your-auth-domain',
    databaseURL: 'your-database-url',
    projectId: 'your-project-id',
    storageBucket: 'your-storage-bucket',
    messagingSenderId: 'your-messaging-sender-id',
    appId: 'your-app-id'
  }
};
```

7. Initialize Firebase in AppModule
Open `src/app/app.module.ts` and import the necessary modules:
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { environment } from '../environments/environment';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule,
    AngularFireDatabaseModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

8. Create a ChatService
Generate a new service called `ChatService` by running the following command:
```
ng generate service chat
```
Open `src/app/chat.service.ts` and implement the methods for authentication, sending messages, and receiving messages:

```typescript
import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFireDatabase } from '@angular/fire/database';
import firebase from 'firebase/app';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ChatService {
  constructor(private afAuth: AngularFireAuth, private db: AngularFireDatabase) {}

  // Sign in with Google
  signInWithGoogle(): Promise<firebase.auth.UserCredential> {
    return this.afAuth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
  }

  // Sign out
  signOut(): Promise<void> {
    return this.afAuth.signOut();
  }

  // Get current user
  getCurrentUser(): Observable<firebase.User | null> {
    return this.afAuth.authState;
  }

  // Send message
  sendMessage(content: string): Promise<void> {
    const userId = this.afAuth.currentUser?.uid || '';
    const userName = this.afAuth.currentUser?.displayName || 'Anonymous';
    const message = { userId, userName, content, timestamp: firebase.database.ServerValue.TIMESTAMP };
    return this.db.list('/messages').push(message);
  }

  // Get messages
  getMessages(limit: number): Observable<any[]> {
    return this.db.list('/messages', ref => ref.orderByChild('timestamp').limitToLast(limit)).valueChanges();
  }
}
```

9. Create a ChatComponent
Generate a new component called `ChatComponent` by running the following command:
```
ng generate component chat
```
Open `src/app/chat/chat.component.ts` and implement the methods for signing in, signing out, sending messages, and receiving messages:

```typescript
import { Component, OnInit } from '@angular/core';
import { ChatService } from '../chat.service';

@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.css']
})
export class ChatComponent implements OnInit {
  user: any;
  messages: any[] = [];
  messageContent = '';

  constructor(private chatService: ChatService) {}

  ngOnInit(): void {
    this.chatService.getCurrentUser().subscribe(user => {
      this.user = user;
    });

    this.chatService.getMessages(10).subscribe(messages => {
      this.messages = messages;
    });
  }

  signInWithGoogle(): void {
    this.chatService.signInWithGoogle();
  }

  signOut(): void {
    this.chatService.signOut();
  }

  sendMessage(): void {
    if (this.messageContent.trim() !== '') {
      this.chatService.sendMessage(this.messageContent);
      this.messageContent = '';
    }
  }
}
```

10. Update the ChatComponent template
Open `src/app/chat/chat.component.html` and add the following code to display the chat interface:

```html
<div *ngIf="!user">
  <button (click)="signInWithGoogle()">Sign in with Google</button>
</div>

<div *ngIf="user">
  <h2>Welcome, {{ user.displayName }}</h2>
  <button (click)="signOut()">Sign out</button>

  <ul>
    <li *ngFor="let message of messages">
      <strong>{{ message.userName }}:</strong> {{ message.content }}
    </li>
  </ul>

  <input [(ngModel)]="messageContent" placeholder="Type your message here...">
  <button (click)="sendMessage()">Send</button>
</div>
```

11. Update AppComponent template
Open `src/app/app.component.html` and replace its content with the following code to display the ChatComponent:

```html
<app-chat></app-chat>
```

12. Run the application
Run the following command in your terminal to start the development server:
```
ng serve
```
Now you can open your browser and navigate to http://localhost:4200/ to see your chat application.

This is a basic implementation of a chat application using Angular and Firebase Realtime Database. You can further enhance it by implementing pagination for loading older messages and proper escaping of special characters in message content.
Angular 및 Firebase 실시간 데이터베이스를 사용하여 TypeScript 웹 애플리케이션을 만들려면 다음 단계를 따르세요.

1. Node.js 및 npm 설치
https://nodejs.org/ 에서 최신 버전의 Node.js를 다운로드하여 설치합니다. 이렇게 하면 npm(노드 패키지 관리자)도 설치됩니다.

2. Angular CLI 설치
터미널 또는 명령 프롬프트를 열고 다음 명령을 실행하여 Angular CLI를 전역적으로 설치합니다:
```
npm install -g @angular/cli
```

3. 터미널에서 다음 명령을 실행하여 새 Angular 프로젝트 생성
새 Angular 프로젝트를 생성합니다:
```
ng new angular-firebase-chat
```
새로 만든 폴더로 이동합니다:
```
cd angular-firebase-chat
```

4. Firebase 및 AngularFire 라이브러리 설치
다음 명령을 실행하여 Angular용 Firebase 및 AngularFire 라이브러리를 설치합니다:
```
npm install firebase @angular/fire --save
```

5. Firebase 설정
 https://firebase.google.com/ 으로 이동하여 Google 계정으로 로그인합니다. "시작하기"를 클릭하고 새 프로젝트를 생성합니다. 프로젝트를 생성한 후 "웹 앱에 Firebase 추가"를 클릭하고 구성 개체를 복사합니다.

6. 환경 파일에 Firebase 구성 추가
Angular 프로젝트에서 `src/environments/environment.ts` 및 `src/environments/environment.prod.ts`를 엽니다. 다음과 같이 두 파일에 Firebase 구성 객체를 추가합니다:
```typescript
export const environment = {
  production: false,
  firebaseConfig: {
    apiKey: 'your-api-key',
    authDomain: 'your-auth-domain',
    databaseURL: 'your-database-url',
    projectId: 'your-project-id',
    storageBucket: 'your-storage-bucket',
    messagingSenderId: 'your-messaging-sender-id',
    appId: 'your-app-id'
  }
};
```

7. AppModule
에서 `src/app/app.module.ts`를 열고 필요한 모듈을 가져와서 Firebase를 초기화합니다:
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { environment } from '../environments/environment';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule,
    AngularFireDatabaseModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

8. 다음 명령을 실행하여 'ChatService'라는 새 서비스를 생성합니다:
```
ng generate service chat
```
`src/app/chat.service.ts`를 열고 인증, 메시지 보내기, 메시지 받기 메소드를 구현합니다:

```typescript
import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFireDatabase } from '@angular/fire/database';
import firebase from 'firebase/app';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ChatService {
  constructor(private afAuth: AngularFireAuth, private db: AngularFireDatabase) {}

  // Sign in with Google
  signInWithGoogle(): Promise<firebase.auth.UserCredential> {
    return this.afAuth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
  }

  // Sign out
  signOut(): Promise<void> {
    return this.afAuth.signOut();
  }

  // Get current user
  getCurrentUser(): Observable<firebase.User | null> {
    return this.afAuth.authState;
  }

  // Send message
  sendMessage(content: string): Promise<void> {
    const userId = this.afAuth.currentUser?.uid || '';
    const userName = this.afAuth.currentUser?.displayName || 'Anonymous';
    const message = { userId, userName, content, timestamp: firebase.database.ServerValue.TIMESTAMP };
    return this.db.list('/messages').push(message);
  }

  // Get messages
  getMessages(limit: number): Observable<any[]> {
    return this.db.list('/messages', ref => ref.orderByChild('timestamp').limitToLast(limit)).valueChanges();
  }
}
```

9. 다음 명령을 실행하여 `ChatComponent`라는 새 컴포넌트를 생성합니다:
```
ng generate component chat
```
`src/app/chat/chat.component.ts`를 열고 로그인, 로그아웃, 메시지 보내기, 메시지 받기 메소드를 구현합니다:

```typescript
import { Component, OnInit } from '@angular/core';
import { ChatService } from '../chat.service';

@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.css']
})
export class ChatComponent implements OnInit {
  user: any;
  messages: any[] = [];
  messageContent = '';

  constructor(private chatService: ChatService) {}

  ngOnInit(): void {
    this.chatService.getCurrentUser().subscribe(user => {
      this.user = user;
    });

    this.chatService.getMessages(10).subscribe(messages => {
      this.messages = messages;
    });
  }

  signInWithGoogle(): void {
    this.chatService.signInWithGoogle();
  }

  signOut(): void {
    this.chatService.signOut();
  }

  sendMessage(): void {
    if (this.messageContent.trim() !== '') {
      this.chatService.sendMessage(this.messageContent);
      this.messageContent = '';
    }
  }
}
```

10. ChatComponent 템플릿을 업데이트
`src/app/chat/chat.component.html`을 열고 다음 코드를 추가하여 채팅 인터페이스를 표시합니다:

```html
<div *ngIf="!user">
  <button (click)="signInWithGoogle()">Sign in with Google</button>
</div>

<div *ngIf="user">
  <h2>Welcome, {{ user.displayName }}</h2>
  <button (click)="signOut()">Sign out</button>

  <ul>
    <li *ngFor="let message of messages">
      <strong>{{ message.userName }}:</strong> {{ message.content }}
    </li>
  </ul>

  <input [(ngModel)]="messageContent" placeholder="Type your message here...">
  <button (click)="sendMessage()">Send</button>
</div>
```

11. 앱 컴포넌트 템플릿을 업데이트
`src/app/app.component.html`을 열고 해당 내용을 다음 코드로 대체하여 ChatComponent를 표시합니다:

```html
<app-chat></app-chat>
```

12. 애플리케이션 실행
터미널에서 다음 명령을 실행하여 개발 서버를 시작합니다:
```
ng serve
```
이제 브라우저를 열고 http://localhost:4200/ 로 이동하여 채팅 애플리케이션을 볼 수 있습니다.

이것은 Angular 및 Firebase 실시간 데이터베이스를 사용하는 채팅 애플리케이션의 기본 구현입니다. 이전 메시지를 로드하기 위한 페이지 매김과 메시지 콘텐츠의 특수 문자를 적절히 이스케이프 처리하는 기능을 구현하여 기능을 더욱 향상시킬 수 있습니다.