Actualize mis apuntes de programar Angular a la versión 22.

• https://www.youtube.com/watch?v=APtSLRo6b-M
• https://www.youtube.com/watch?v=4PYwCI1LFqs

La Carpeta donde se renderiza el html y el javascript por defecto es:

 dist/<project-name>/browser/ 

• https://v17.angular.io/guide/deployment#building-and-serving-from-disk

Si es que con en el navegador se pone en el URL la carpeta y no se logra ver la página por enlaces erróneos por que el href es una ruta explicita o absoluta, en archivo index.html:

<base href="/">

Se puede hacer relativa con el comando

ng build --base-href ./

Se la puede configurar una ruta absoluta con el comando:

ng build --base-href /<RUTA>/

o modificando el archivo de configuración “angular.json”:

"projects": {
  "app": {
    "architect": {
      "build": {
        "options": {
          "baseHref": "/production-folder/"
        }
      }
    }
  }
}

Código básico:

//typescript
 
import {Component} from '@angular/core';
 
@Component({
  selector: 'app-root',
  imports: [],
  template: ` <h1>Default</h1> `,
  styleUrls: ['./app.css'],
})
export class App {
  title = 'default';
}

Si quieres actualizar Angular:

ng update

PS D:\testangular> ng update
Using package manager: npm
Collecting installed dependencies...
Found 15 dependencies.
    We analyzed your package.json, there are some packages to update:
    
      Name                       Version                  Command to update
     ------------------------------------------------------------------------
      @angular/cli               21.2.11 -> 22.0.0        ng update @angular/cli
      @angular/core              21.2.13 -> 22.0.0        ng update @angular/core
    
    There might be additional packages which don't provide 'ng update' capabilities that are outdated.

ng new <proyecto-nombre>

Se crean las carpetas y archivos

<Proyecto-Nombre>
  ├─ /angular/
  ├─ /node_modules/
  ├─ /public/
  |  └─ favicon.ico
  ├─ /app/
  |  ├─ app.config.server.ts
  |  ├─ app.config.ts
  |  ├─ app.css
  |  ├─ app.html
  |  ├─ app.routes.server.ts
  |  ├─ app.routes.ts
  |  ├─ app.spec.ts
  |  └─ app.ts
  ├─ index.html
  ├─ main.server.ts
  ├─ main.ts
  ├─ server.ts
  └─ styles.css

Tiene Tailwind como parte de opciones para manejo avanzado de CSS pero para agregar bootstrap se puede usar este comando:

ng add @ng-bootstrap/ng-bootstrap

(el ngx-bootstrap esta obsoleto y no se actualizará)

Para generar el html con la base para verla desde su dist browser (sin levantar el servidor ng serve)

ng build

Con build se crea las carpetas y archivos:

  ├─ /dist/ ─ /<nombre-proyecto>/
  |             ├─ /browser/
  |             |    └─ ... (archivos)
  |             └─ /server/
  |                  └─ ... (archivos)

ng build --base-href /<proyecto-nombre>/dist/<proyecto-nombre>/browser/

más información para configurar el build.

Para levantar un servidor por el puerto default 4200

ng serve

DART: https://www.youtube.com/watch?v=fLjV_MzUkwA

zone.js (deprecated version angular 21), ahora se usa signals

routers, componentes, componentes stand alones

el archivo “app.routes.ts”

<Proyecto-Nombre>
  |
  ├─ /app/
  |  ├─ app.routes.ts

El contenido por default es:

import { Routes } from '@angular/router';
 
export const routes: Routes = [];

Para agregar un componente se debe escribir en linea de comandos:

ng generate component <nombre o carpeta/nombre>
 
//forma apocopada:
 
ng g c <nombre o carpeta/nombre>

Deploy para el tipo SSR Server Side Rendering, usando Apache o Nginx

• https://blog.daudr.me/painless-angular-ssr/
• https://v17.angular.io/guide/deployment

En Apache:

• https://victorroblesweb.es/2021/01/24/poner-un-proyecto-de-angular-en-un-servidor-apache/

Usando WebPack:

• https://webpack.js.org/guides/development/#webpack-dev-server

Usando Hydration:

• https://www.angulararchitects.io/blog/guide-for-ssr/