174 lines
3.2 KiB
Markdown
174 lines
3.2 KiB
Markdown
# DV-003: Configuración Proyecto Angular 21
|
|
|
|
**Proyecto:** Sistema de Registro de Estudiantes
|
|
**Fecha:** 2026-01-07
|
|
|
|
---
|
|
|
|
## 1. Crear Proyecto
|
|
|
|
```bash
|
|
cd src/frontend
|
|
|
|
# Crear proyecto Angular 21
|
|
ng new student-enrollment \
|
|
--standalone \
|
|
--style=scss \
|
|
--routing \
|
|
--ssr=false
|
|
|
|
cd student-enrollment
|
|
```
|
|
|
|
---
|
|
|
|
## 2. Instalar Dependencias
|
|
|
|
```bash
|
|
# 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
|
|
|
|
```bash
|
|
# 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)
|
|
|
|
```typescript
|
|
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
|
|
|
|
```typescript
|
|
// 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)
|
|
|
|
```typescript
|
|
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;
|
|
```
|
|
|
|
```json
|
|
// package.json scripts
|
|
{
|
|
"scripts": {
|
|
"codegen": "graphql-codegen --config codegen.ts"
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 7. Path Aliases (tsconfig.json)
|
|
|
|
```json
|
|
{
|
|
"compilerOptions": {
|
|
"paths": {
|
|
"@core/*": ["src/app/core/*"],
|
|
"@shared/*": ["src/app/shared/*"],
|
|
"@features/*": ["src/app/features/*"],
|
|
"@env/*": ["src/environments/*"]
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 8. Comandos de Desarrollo
|
|
|
|
```bash
|
|
# 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
|
|
```
|