Consume WebService with Ionic

By personal improvement I am learning Ionic, I already managed to run some examples, but where I can not make progress is to consume a WebService.

Regularly with JQuery I consumed it in the following way:

 function obtenerProduccionFinca(inicioPeriodo, zona, finca, opcion, callbackFn) {
            var parametros = JSON.stringify({ 'inicioPeriodo': inicioPeriodo, 'zona': zona, 'finca': finca, 'opcion': opcion });
            $.ajax({
                url: '../../rrhh/ws/wsrrhh.asmx/obtenerProduccionFincaComparativo',
                type: 'POST',
                data: parametros,
                dataType: "text json",
                contentType: "application/json; charset=utf-8",
                success: function (msg) {
                    callbackFn(msg);
                },
                error: function (xhr, status) {
                    alertify.error('Ha ocurrido un error al contactar con el servidor');
                }
            });
        }

Now my question is how to do it with Ionic. I read the tutorial hosted at link but I can not make it work.

The first error that I deployed is in the Home.ts that when importing the service tells me that the module is not found.

import { UserService } from '../../providers/user-service';

[ts] No se encuentra el módulo '../../providers/user-service'.

And if I try to run the project like this, it displays another error:

C:\Users\ditzep\Desktop\Web\demo103>ionic serve
Starting app-scripts server: --address 0.0.0.0 --port 8100 --livereload-port 35729
--dev-logger-port 53703 --nobrowser - Ctrl+C to cancel
[15:33:49]  watch started ...
[15:33:49]  build dev started ...
[15:33:49]  clean started ...
[15:33:49]  clean finished in 3 ms
[15:33:49]  copy started ...
[15:33:49]  deeplinks started ...
Error: C:\Users\ditzep\Desktop\Web\demo103\src\pages\home\home.ts has a @IonicPage decorator,
but it does not have a corresponding "NgModule" at C:\Users\ditzep\Desktop\Web\demo103\src\pages\home\home.module.ts
    at new BuildError (C:\Users\ditzep\Desktop\Web\demo103\node_modules\@ionic\app-scripts\dist\util\errors.js:16:28)
    at C:\Users\ditzep\Desktop\Web\demo103\node_modules\@ionic\app-scripts\dist\deep-linking.js:57:21
    at <anonymous>

The structure of my project is as follows:

And my files are as follows.

User-service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class UserServiceProvider {

  constructor(
    public http: HttpClient) {
    console.log('Hello UserServiceProvider Provider');
  }
  getUsers() {
    return this.http.get('https://randomuser.me/api/?results=25');
  }
}

home.ts

import { Component } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';
import { UserService } from '../../providers/user-service';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  users: any[] = [];
  constructor(
    public navCtrl: NavController,
    public userService: UserService) {

  }
  ionViewDidLoad(){
    this.userService.getUsers()
    .subscribe(
      (data) => { // Success
        this.users = data['results'];
      },
      (error) =>{
        console.error(error);
      }
    )
  }
}

home.html

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      Demo 103
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let user of users">
      <ion-avatar item-start>
        <img [src]="user.picture.medium">
      </ion-avatar>
      <h2>{{ user.name.first | uppercase }}</h2>
      <p>{{ user.email }}</p>
    </ion-item>
  </ion-list>
</ion-content>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { UserServiceProvider } from '../providers/user-service/user-service';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    UserServiceProvider
  ]
})
export class AppModule {}

Installed versions:

ionic is 3.20.00 node.js 8.11.3 Angular 5.2.11

I thank you very much for your help.