title: Lazy loading - Providers and modules
body: <p>I'm moving my app to lazy loading. I'm done with pages, pipes and directives but now it's the turn of providers/services and some other modules.</p>
  
  <p>This was my <code>app.module</code>:</p>
  
  <pre><code>...
  import { FileUploadModule } from "ng2-file-upload";
  import { CloudinaryModule } from "@cloudinary/angular-5.x";
  import * as cloudinary from "cloudinary-core";
  import { ImageUploadProvider } from "../services/image-upload/image-upload";
  ...
  imports: [
   ...
   FileUploadModule,
   CloudinaryModule.forRoot(cloudinary, {
     cloud_name: "cloudName",
     upload_preset: "cloudCode"
    }),
    ...
  ]
  providers: [
   ...
   ImageUploadProvider
    ...
  ]
  </code></pre>
  
  <p>Now, these references are removed from this file.</p>
  
  <p>I need all of this on my <code>new-recipe</code> component. For that I added this into <code>new-recipe.module</code>:</p>
  
  <pre><code>import { ImageUploadProvider } from "../../services/image-upload/image-upload";
  ...
  providers: [
      ImageUploadProvider
    ]
  </code></pre>
  
  <p>What else do I need? I also created a <code>image-upload.module</code> but not sure if this is correct:</p>
  
  <pre><code>import { NgModule, ModuleWithProviders } from '@angular/core';
  import { FileUploadModule } from "ng2-file-upload";
  import { CloudinaryModule } from "@cloudinary/angular-5.x";
  import * as cloudinary from "cloudinary-core";
  import { ImageUploadProvider } from '../services/image-upload/image-upload';
  
  @NgModule({
    imports: [
      FileUploadModule,
      CloudinaryModule.forRoot(cloudinary, {
        cloud_name: "cloudName",
        upload_preset: "cloudId"
      })
    ],
    exports: [
      CloudinaryModule
    ]
  })
  
  export class ImageUploadProviderModule {
    static forRoot(): ModuleWithProviders {
      return {
        ngModule: ImageUploadProviderModule,
        providers: [ImageUploadProvider] // &lt;-- is this necessary?
      };
    }
  }
  </code></pre>
  
  <p>Do I need to import this new module inside <code>new-recipe.module</code> and remove the provider reference? How can I access then from my functions in <code>new-recipe</code> to this.imageUploadProvider?</p>