I can't connect my ionic app with a mysql database - mysql

Question

In a project that I have to do I was copying some lines from a youtube project, trying to connect the login page to a mysql database. All the project is in a htdocs folder of xampp, also there is a server_api folder with a config.php (I describe its content below) and a file_aski.php (with nothing in it). Please any help would be great! Thanks.
The files that I describe below are:
config.php
app.module.ts
app.component.ts
app-routing.module.ts
login.page.ts
login.page.html
---------- config.php ----------
<?php
// setting config database
define('DB_NAME', 'dbtotalinspector');
define('DB_USER', 'root');
define('DB_PASSWORD', ''); // default
define('DB_HOST', 'localhost'); // default xampp
$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
?>
---------- app.module.ts ----------
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { RouteReuseStrategy } from '#angular/router';
import { IonicModule, IonicRouteStrategy } from '#ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
/* import { HttpModule } from '#angular/http';
import { PostProvider } from '../providers/post-provider';
import { IonicStorageModule } from '#ionic/storage-angular';
*/
#NgModule({
declarations: [AppComponent],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule /* , IonicStorageModule.forRoot(), PostProvider*/],
providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy } /*, PostProvider */ ],
bootstrap: [AppComponent],
})
export class AppModule {}
---------- app.component.ts ----------
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss'],
})
export class AppComponent {
constructor() {}
}
---------- app-routing.module.ts ----------
import { NgModule } from '#angular/core';
import { PreloadAllModules, RouterModule, Routes } from '#angular/router';
const routes: Routes = [
{
path: 'home',
loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
},
{
path: '',
redirectTo: 'login',
pathMatch: 'full'
},
{
path: 'login',
loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
},
{
path: 'seleccionar-obra',
loadChildren: () => import('./seleccionar-obra/seleccionar-obra.module').then( m => m.SeleccionarObraPageModule)
},
{
path: 'cargar-obra',
loadChildren: () => import('./cargar-obra/cargar-obra.module').then( m => m.CargarObraPageModule)
},
{
path: 'cargar-item',
loadChildren: () => import('./cargar-item/cargar-item.module').then( m => m.CargarItemPageModule)
},
{
path: 'desplegar-items-de-obra',
loadChildren: () => import('./desplegar-items-de-obra/desplegar-items-de-obra.module').then( m => m.DesplegarItemsDeObraPageModule)
},
{
path: 'tomar-fotografia',
loadChildren: () => import('./tomar-fotografia/tomar-fotografia.module').then( m => m.TomarFotografiaPageModule)
},
{
path: 'generar-informe',
loadChildren: () => import('./generar-informe/generar-informe.module').then( m => m.GenerarInformePageModule)
},
{
path: 'confirmar-enviar-informe',
loadChildren: () => import('./confirmar-enviar-informe/confirmar-enviar-informe.module').then( m => m.ConfirmarEnviarInformePageModule)
},
{
path: 'desplegar-foto',
loadChildren: () => import('./desplegar-foto/desplegar-foto.module').then( m => m.DesplegarFotoPageModule)
},
];
#NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule { }
---------- login.page.ts ----------
import { Component, OnInit } from '#angular/core';
import { Router } from '#angular/router';
#Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
constructor(private router: Router) { }
ngOnInit() {
}
btnClickIngresar(){
this.router.navigateByUrl('/home');
}
}
---------- login.page.html ----------
<app-header></app-header>
<ion-content>
<div class="container">
<ion-card>
<ion-card-header>
<ion-card-title>Iniciar sesión</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-item>
<ion-icon name="person-outline" slot="start"></ion-icon>
<ion-item>
<ion-label position="floating">Usuario</ion-label>
<ion-input></ion-input>
</ion-item>
</ion-item>
<ion-item>
<ion-icon name="lock-open-outline" slot="start"></ion-icon>
<ion-item>
<ion-label position="floating">Contraseña</ion-label>
<ion-input type="password"></ion-input>
</ion-item>
</ion-item>
<ion-button expand="full" (click)="btnClickIngresar();">INGRESAR</ion-button>
</ion-card-content>
</ion-card>
</div>
</ion-content>

Answer 1

Thanks for all the advices, I'm reading the guidelines. Ok, I see that I have to cut the code to the most importan parts. As I see, the main problem is in "post-providers.ts" and maybe in in "app.module.ts" too. I took out the code between /* */ I will show you how the code looks and the error messages.
post-providers.ts
// providers api
import { Injectable } from "#angular/core";
import { Http,Headers, RequestOptions } from '#angular/http';
import 'rxjs/add/operator/map';
#Injectable()
export class PostProvider {
server: string = "http://localhost/server_api";
constructor (public http: Http){
}
postData(body, file){
let type = "application/json; charset=UTF-8";
let headers = new Headers({ 'Content-Type': type });
let options = new RequestOptions ({ headers: headers });
return this.http.post(this.server + file, JSON.stringify(body), options)
.map(res => res.json());
}
}
NOTE: on ".map" of the code above it says "Property 'map' does not exist on type 'Observable'.ts(2339)"
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { RouteReuseStrategy } from '#angular/router';
import { IonicModule, IonicRouteStrategy } from '#ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpModule } from '#angular/http';
import { PostProvider } from '../providers/post-provider';
import { IonicStorageModule } from '#ionic/storage-angular';
#NgModule({
declarations: [AppComponent],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, IonicStorageModule.forRoot(), PostProvider, HttpModule],
providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, PostProvider ],
bootstrap: [AppComponent],
})
export class AppModule {}
NOTE: in app.module.ts, the "HttpModule" is cross out (or strike out) in both, "import {}" and the imports inside #NgModule of
The site appears in blank and it is compiled succesfully. But I don't see the login page.
THE ERRORS ARE:
./node_modules/rxjs/add/operator/map.js:7:0-39 - Error: Module not found: Error: Can't resolve 'rxjs-compat/add/operator/map' in 'C:\xampp\htdocs\totalinspector\node_modules\rxjs\add\operator'
[ng]
[ng] Error: src/providers/post-provider.ts:21:10 - error TS2339: Property 'map' does not exist on type 'Observable<Response>'.
[ng]
[ng] 21 .map(res => res.json());
[ng] ~~~
[ng] × Failed to compile.