Working with Ionic Project Structure

// src/environments/environment.ts
export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000'
};

// src/environments/environment.prod.ts
export const environment = {
  production: true,
  apiUrl: 'https://api.myapp.com'
};

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [MyApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    StatusBar,
    SplashScreen
  ]
})
export class AppModule { }

ionic generate page home

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./pages/home/home.module').then(m => m.HomePageModule)
  },
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

<img src="assets/images/logo.png" alt="App Logo">

import { HttpClient } from '@angular/common/http';\n\nconstructor(private http: HttpClient) {}\n\nloadData() {\n  this.http.get('assets/data/config.json').subscribe(data => {\n    console.log(data);\n  });\n}

{
  "name": "myApp",
  "version": "1.0.0",
  "integrations": {
    "capacitor": {}
  },
  "build": {
    "ionicEnvironment": "development"
  },
  "devServer": {
    "address": "localhost",
    "port": 8100
  }
}

import { environment } from './environments/environment';

// Example usage
if (environment.production) {
  console.log("Running in production");
} else {
  console.log("Running in development");
}

theme/
├── variables.scss
└── colors.scss

$primary-color: #3880ff;
$secondary-color: #3dc2ff;

:root {
  --ion-color-primary: #3880ff;
  --ion-color-secondary: #3dc2ff;
}

ion-content {
  --background: #f4f5f8;
}

ion-title {
  color: var(--ion-color-primary);
}

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Ionic App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#3880ff">
    <meta name="description" content="A cross-platform mobile app built with Ionic">
    <link rel="manifest" href="manifest.json">
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

npm install @ionic/angular

npm install @ionic/angular@7.0.0

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'MyApp',
  webDir: 'dist',
  bundledWebRuntime: false
};

export default config;