Angular

.htaccess

# Change BIN with the SubFolder Address
RewriteEngine On
RewriteBase /BIN/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /BIN/index.html [L]

# PREVENT CACHE
<FilesMatch "\.(js|css|json|xml|gz|html)$">
  Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
  Header set Pragma "no-cache"
  Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</FilesMatch>

Bootstrap & BT Icons

npm install bootstrap bootstrap-icons
npm i bootstrap@5.3.6

"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  "node_modules/bootstrap-icons/font/bootstrap-icons.css",
  "src/styles.scss"
],
"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

Build

ng build --output-hashing=none --resources-output-path=assets

#INSIDE A BIN
ng build --output-hashing=none --base-href "BIN" --resources-output-path=assets

OR
add inside angular.json in architect->build->options
	"baseHref": "/BIN/",
  
RUN ng build --output-hashing=none --resources-output-path=assets

HTTPClient

// INSERT INTO app.config.ts
  import { ApplicationConfig } from '@angular/core';
  import { provideRouter } from '@angular/router';
  -> import { provideHttpClient } from '@angular/common/http'; // Importa esto

  import { routes } from './app.routes'; // Asumiendo que tienes un archivo de rutas

  export const appConfig: ApplicationConfig = {
    providers: [
      provideRouter(routes),
  ->    provideHttpClient() // ¡Añade esto aquí!
    ]
  };
  // =========================================================

// SET SERVICES FILE
  // =========================================================
  ng g s services/SERVICE_NAME
  // CONFIGURATE THE SERVICES
  import { Injectable, inject } from '@angular/core';
  import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
  import { Observable } from 'rxjs';
  // OASIS GLOBALS
  import { OasisGlobals } from '../../oasisGlobals';
  // DEFINE INTERFACE RESPONSES FOR EXTREME SECURITY
  interface PostData {
    id?: number;
    title: string;
    body: string;
    userId: number;
  }
  // =========================================================
  // INJECT THE HTTPCLIENT
  // =========================================================
    @Injectable({
      providedIn: 'root'
    })
    export class DataService {
      private httpClient = inject(HttpClient);
      apiServerRequest:string = OasisGlobals.apiServerURI;

      constructor() { }

  // =========================================================
  // HTTP GET Request
  // =========================================================
      getPosts(): Observable<PostData[]> {
        return this.httpClient.get<INTERFACE>(this.apiServerRequest + '/');
      }

      getPostById(id: number): Observable<PostData> {
        return this.httpClient.get<INTERFACE>(this.apiServerRequest + '/id');
      }

      // Ejemplo con parámetros de consulta
      getPostsByUserId(userId: number): Observable<PostData[]> {
        const url = `${this.baseUrl}/posts`;
        const params = new HttpParams().set('userId', userId.toString());

        return this.httpClient.get<PostData[]>(url, { params }).pipe(
          catchError(this.handleError)
        );
      }

  // =========================================================
  // HTTP POST Request
  // =========================================================
      createPost(post: PostData): Observable<PostData> {
        const url = `${this.baseUrl}/posts`;
        const headers = new HttpHeaders({ 'Content-Type': 'application/json' }); // Headers comunes para POST

        return this.httpClient.post<PostData>(url, post, { headers }).pipe(
          catchError(this.handleError)
        );
      }

      // =========================================================
      // Manejo de Errores (Función de ayuda)
      // =========================================================
      private handleError(error: any): Observable<never> {
        let errorMessage = '';
        if (error.error instanceof ErrorEvent) {
          // Error del lado del cliente
          errorMessage = `Error: ${error.error.message}`;
        } else {
          // Error del lado del servidor
          errorMessage = `Código de error: ${error.status}\nMensaje: ${error.message}`;
        }
        console.error(errorMessage);
        return throwError(() => new Error(errorMessage));
      }
    }

// USE THE SERVICE
  // IMPORT THE SERVICE INTO THE COMPONENT
    import { SERVICE_NAME } from '../../services/SERVICE_NAME';
  // INJECT THE SERVICE IN THE COMPONENT CLASS
    private dataService = inject(SERVICE_NAME);
    constructor() {}

    ngOnInit(): void {
      // Puedes cargar datos al iniciar el componente si lo deseas
      // this.loadPosts();
    }
  // TO GET
    loadPosts(): void {
      this.errorMessage = ''; // Limpiar mensaje de error
      this.dataService.getPosts().subscribe({
        next: (data) => {
          this.posts = data;
          console.log('Posts obtenidos:', data);
        },
        error: (err) => {
          this.errorMessage = 'Error al cargar los posts. Revisa la consola.';
          console.error('Error en el componente al obtener posts:', err);
        },
        complete: () => console.log('Carga de posts completa.')
      });
    }
  // TO POST
    createNewPost(): void {
      this.errorMessage = ''; // Limpiar mensaje de error
      const newPost: PostData = {
        title: 'Mi Nuevo Post de Angular 20',
        body: 'Este es el contenido de un post creado desde mi aplicación Angular Standalone.',
        userId: 1
      };

      this.dataService.createPost(newPost).subscribe({
        next: (response) => {
          this.newPostResponse = response;
          console.log('Post creado exitosamente:', response);
        },
        error: (err) => {
          this.errorMessage = 'Error al crear el post. Revisa la consola.';
          console.error('Error en el componente al crear post:', err);
        },
        complete: () => console.log('Creación de post completa.')
      });
    }