NgTerminal Angular Integration

An Angular 20 application focused on terminal and logging functionality using ng-terminal and @xterm/xterm libraries.

Project Context

This is a modern Angular application called "terminalScreen" that implements terminal/logging capabilities with the following stack:

Development Workflow

When working with this project, follow these steps:

1. Starting Development

Run the development server:

```bash

ng serve

```

The application will be available at `http://localhost:4200/`

2. Project Structure

**Root Component** (`src/app/app.ts`):

**Routing Configuration**:

**Log Component** (`src/app/log/log.ts`):

**Log Service** (`src/app/log/logService/log.ts`):

3. File Organization Conventions

Components follow this structure:

4. Building the Application

**Production build:**

```bash

ng build

```

**Development build with watch mode:**

```bash

ng build --watch

```

Build outputs go to `dist/` directory.

5. Testing

Run unit tests with Karma:

```bash

ng test

```

6. Code Generation

Generate new components:

```bash

ng generate component component-name

```

View all available schematics:

```bash

ng generate --help

```

Important Configuration Details

TypeScript Configuration

Build Configuration

Styling

Angular Architecture

Working with Terminal Features

When implementing or modifying terminal functionality:

1. **Import terminal dependencies**: The project uses both `ng-terminal` and `@xterm/xterm`

2. **Service layer**: Use the LogService (`src/app/log/logService/log.ts`) for terminal logic

3. **Component layer**: Implement UI in the Log component (`src/app/log/log.ts`)

4. **Styling**: Terminal styles should be in component SCSS files

Key Constraints

Common Tasks

**Add a new terminal feature:**

1. Implement logic in LogService

2. Update Log component to use the service

3. Add corresponding tests

4. Update component template and styles

**Modify routing:**

1. Update `app.routes.ts`

2. Ensure components are standalone

3. Test navigation flows

**Update dependencies:**

1. Use `npm install` for package updates

2. Verify Angular compatibility

3. Run tests after updates