academia/docs/entregables/03-configuracion/DV-003-configuracion-angular.md

DV-003: Configuración Proyecto Angular 21

Proyecto: Sistema de Registro de Estudiantes Fecha: 2026-01-07

---

1. Crear Proyecto

cd src/frontend

# Crear proyecto Angular 21
ng new student-enrollment \
  --standalone \
  --style=scss \
  --routing \
  --ssr=false

cd student-enrollment

---

2. Instalar Dependencias

# Angular Material
ng add @angular/material

# Apollo GraphQL
npm install apollo-angular @apollo/client graphql

# GraphQL Code Generator
npm install -D @graphql-codegen/cli \
  @graphql-codegen/typescript \
  @graphql-codegen/typescript-operations \
  @graphql-codegen/typescript-apollo-angular

---

3. Estructura de Carpetas

# Crear estructura
mkdir -p src/app/core/{services,graphql/{queries,mutations},interceptors}
mkdir -p src/app/shared/{components,pipes,directives}
mkdir -p src/app/features/{students,enrollment,classmates}/{pages,components}

---

4. Configuración Apollo (app.config.ts)

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { provideApollo } from 'apollo-angular';
import { HttpLink } from 'apollo-angular/http';
import { InMemoryCache } from '@apollo/client/core';
import { inject } from '@angular/core';
import { routes } from './app.routes';
import { environment } from '../environments/environment';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    provideApollo(() => {
      const httpLink = inject(HttpLink);
      return {
        link: httpLink.create({ uri: environment.graphqlUrl }),
        cache: new InMemoryCache(),
      };
    }),
  ],
};

---

5. Environment Files

// environments/environment.ts
export const environment = {
  production: false,
  graphqlUrl: 'https://localhost:5001/graphql',
};

// environments/environment.prod.ts
export const environment = {
  production: true,
  graphqlUrl: '/graphql',
};

---

6. GraphQL Codegen (codegen.ts)

import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  schema: 'https://localhost:5001/graphql',
  documents: 'src/app/core/graphql/**/*.graphql',
  generates: {
    'src/app/core/graphql/generated/types.ts': {
      plugins: [
        'typescript',
        'typescript-operations',
        'typescript-apollo-angular',
      ],
    },
  },
};

export default config;

// package.json scripts
{
  "scripts": {
    "codegen": "graphql-codegen --config codegen.ts"
  }
}

---

7. Path Aliases (tsconfig.json)

{
  "compilerOptions": {
    "paths": {
      "@core/*": ["src/app/core/*"],
      "@shared/*": ["src/app/shared/*"],
      "@features/*": ["src/app/features/*"],
      "@env/*": ["src/environments/*"]
    }
  }
}

---

8. Comandos de Desarrollo

# Desarrollo
ng serve

# Build producción
ng build --configuration production

# Generar tipos GraphQL
npm run codegen

# Lint
ng lint

# Tests
ng test
ng test --watch=false --code-coverage

# Generar componente standalone
ng g c features/students/pages/student-list --standalone