Estructura de un proyecto en Ionic 8 (guía 2026)

La estructura de un proyecto Ionic 8 gira en torno a la carpeta src/: main.ts arranca la app, app/app.component.ts es el componente raíz con el <ion-app>, app/app.routes.ts define las rutas y cada pantalla es un componente standalone con sus tres archivos (.ts, .html y .scss). La gran novedad frente a Ionic 4/5 es que ya no hay NgModule (app.module.ts desaparece): todo se apoya en componentes standalone. En esta guía recorremos carpeta a carpeta qué es cada archivo y para qué sirve.

Actualizado: julio 2026 — revisado con Ionic 8.8 y proyectos Angular standalone.

Aquí tienes el índice completo del tutorial para seguir el hilo:

Índice del tutorial de Ionic >>

• Tutorial de Ionic: Introducción
• Estructura de un proyecto en Ionic (estás aquí)
• Mini juego de acertar números
• Navegación entre páginas
• Menú lateral con ion-menu
• Navegación por tabs (pestañas)
• Componentes personalizados
• Peticiones HTTP a una API REST
• Formularios reactivos

Crear el proyecto

Partimos de la plantilla blank. Al crear el proyecto, el CLI te pregunta cómo quieres construir la app: elige Standalone (es la opción recomendada hoy y la que asume esta guía):

ionic start miApp blank --type=angular
cd miApp

Para arrancarla en el navegador y ver la estructura en marcha:

ionic serve

Vista general de la estructura de carpetas

Un proyecto Ionic 8 standalone recién creado tiene, a grandes rasgos, este aspecto:

miApp/
├── src/
│   ├── main.ts                  → arranca la aplicación
│   ├── index.html               → HTML raíz, contiene <app-root>
│   ├── global.scss              → estilos globales de la app
│   ├── theme/
│   │   └── variables.scss       → variables de color/tema de Ionic
│   ├── assets/                  → imágenes, fuentes, iconos…
│   └── app/
│       ├── app.component.ts     → componente raíz (<ion-app>)
│       ├── app.component.html
│       ├── app.routes.ts        → definición de rutas
│       └── home/
│           ├── home.page.ts     → página standalone
│           ├── home.page.html
│           └── home.page.scss
├── angular.json                 → configuración de build de Angular
├── ionic.config.json            → configuración del proyecto Ionic
├── capacitor.config.ts          → configuración nativa (Capacitor)
├── package.json                 → dependencias y scripts
└── tsconfig.json                → configuración de TypeScript

Casi todo tu trabajo diario ocurre dentro de src/app/. El resto son archivos de configuración que tocarás poco.

Los archivos clave, uno a uno

src/main.ts — el punto de arranque

Es lo primero que se ejecuta. Aquí se «levanta» la aplicación y se registran los servicios globales: Ionic (provideIonicAngular) y el router con tus rutas. En Ionic 4/5 esto vivía repartido entre app.module.ts y main.ts; ahora está todo aquí:

import { bootstrapApplication } from '@angular/platform-browser';
import { RouteReuseStrategy, provideRouter } from '@angular/router';
import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular/standalone';

import { AppComponent } from './app/app.component';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    provideIonicAngular(),
    provideRouter(routes),
  ],
});

src/index.html — la página raíz

El único HTML «de verdad» de la app. Su etiqueta importante es <app-root></app-root>: ahí es donde Angular inyecta todo. No sueles tocarlo, salvo para el <title> o metaetiquetas.

src/app/app.component.ts — el componente raíz

El contenedor de toda la app. Suele ser mínimo: un <ion-app> con un <ion-router-outlet> dentro, que es donde se renderizan tus páginas. Fíjate en que ya es standalone e importa los componentes de Ionic que usa:

import { Component } from '@angular/core';
import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';

@Component({
  selector: 'app-root',
  standalone: true,
  template: '<ion-app><ion-router-outlet></ion-router-outlet></ion-app>',
  imports: [IonApp, IonRouterOutlet],
})
export class AppComponent {}

src/app/app.routes.ts — las rutas

Sustituye al antiguo app-routing.module.ts. Aquí declaras qué componente se carga en cada URL. Cada página se carga de forma perezosa con loadComponent (solo se descarga cuando se visita):

import { Routes } from '@angular/router';

export const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  {
    path: 'home',
    loadComponent: () => import('./home/home.page').then((m) => m.HomePage),
  },
];

Para profundizar en rutas, parámetros y navegación tienes el capítulo dedicado: navegación entre páginas en Ionic.

src/app/home/ — una página

Cada pantalla son tres archivos que van juntos:

• home.page.ts — la lógica (el componente standalone, con sus imports de Ionic).
• home.page.html — la plantilla (el <ion-header>, <ion-content>…).
• home.page.scss — los estilos solo de esa página.

Cuando generas una página nueva con ionic generate page ajustes, el CLI crea esa carpeta con sus tres archivos y añade la ruta automáticamente.

src/theme/variables.scss y src/global.scss

Son los dos sitios donde se controla el aspecto global:

• theme/variables.scss — las variables CSS de Ionic (colores primary/secondary, modo claro/oscuro…). Es donde cambias la paleta de tu app.
• global.scss — estilos que quieres que apliquen a toda la app, más las utilidades de Ionic.

src/assets/ — recursos estáticos

Imágenes, fuentes, iconos, JSON de datos… todo lo que se sirve tal cual. (En proyectos Angular más recientes esta carpeta puede llamarse public/; la idea es la misma.)

Qué cambió respecto a Ionic 4/5

Si vienes de un tutorial antiguo o mantienes un proyecto viejo, estos son los cambios que más despistan:

• Adiós a los *.module.ts. No hay app.module.ts ni un home.module.ts por página. Cada componente es standalone y declara sus propios imports.
• app-routing.module.ts → app.routes.ts. Las rutas son un simple array exportado.
• El arranque vive en main.ts con bootstrapApplication, no en un módulo raíz.
• Los componentes de Ionic se importan uno a uno desde @ionic/angular/standalone, en lugar de un IonicModule global. Esto aligera el bundle.

Los archivos de configuración

• angular.json — cómo se compila la app (rutas de salida, estilos globales, presupuestos de tamaño…).
• ionic.config.json — identifica el proyecto como Ionic (nombre, tipo, integraciones).
• capacitor.config.ts — la configuración nativa: id de la app, nombre, plugins. Es lo que usa Capacitor para empaquetar tu web como app de iOS/Android.
• package.json — dependencias y scripts (npm start, build…).
• tsconfig.json — opciones de TypeScript.

Modifica tu «hola mundo»

Para tocar algo y ver el resultado, abre src/app/home/home.page.html y cambia el contenido del <ion-content>:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>Hola Mundo</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">
  <h1>¡¡¡¡Hola mundo!!!!</h1>
</ion-content>

Guarda y, con ionic serve en marcha, verás el cambio al instante en el navegador. Ya tienes el mapa completo del proyecto: a partir de aquí, cada capítulo del tutorial va llenando estas carpetas.

Seguimos con el tutorial

Ahora que conoces la estructura, el siguiente paso es hacer que la app se mueva: aprende a navegar entre páginas, a montar un menú lateral o una navegación por tabs, y a traer datos con peticiones HTTP.

Un saludo, y si aún no lo has hecho no olvides suscribirte a mi blog para no perderte los próximos posts  :-),

Suscríbete a Reviblog.net:

He leído y acepto los términos y condiciones

Deja vacío este campo si eres humano:

También puedes seguirme en Twitter en ‎@revi_apps y no olvides que me ayudas mucho si compartes este post en las redes sociales.