title: Angular factory.factory is not a function
body: <p>I am working on a recipe app with angular, and trying to set up communication with backend services using HTTP. I have been following along with angular documentation to set this up, here is the link <a href="https://angular.io/guide/http#sending-data-to-a-server" rel="nofollow noreferrer">https://angular.io/guide/http#sending-data-to-a-server</a>. When I add in the code to make a POST request, I get the following error:</p>
  <pre><code>ERROR Error: Uncaught (in promise): TypeError: factory.factory is not a function
  TypeError: factory.factory is not a function
      at getNodeInjectable (core.js:3913)
      at searchTokensOnInjector (core.js:3849)
      at getOrCreateInjectable (core.js:3771)
      at Module.ɵɵdirectiveInject (core.js:13730)
      at NodeInjectorFactory.FormComponent_Factory [as factory] (form.component.ts:14)
      at getNodeInjectable (core.js:3913)
      at instantiateRootComponent (core.js:7837)
      at createRootComponent (core.js:18351)
      at ComponentFactory$1.create (core.js:22287)
      at ViewContainerRef.createComponent (core.js:10127)
      at resolvePromise (zone-evergreen.js:798)
      at resolvePromise (zone-evergreen.js:750)
      at zone-evergreen.js:860
      at ZoneDelegate.invokeTask (zone-evergreen.js:399)
      at Object.onInvokeTask (core.js:27126)
      at ZoneDelegate.invokeTask (zone-evergreen.js:398)
      at Zone.runTask (zone-evergreen.js:167)
      at drainMicroTaskQueue (zone-evergreen.js:569)
      at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:484)
      at invokeTask (zone-evergreen.js:1621)
  </code></pre>
  <p>I am not sure how to fix this error, as I have been trying to figure it out for quite a while. Here is my code that initiates the POST request:</p>
  <pre><code>
      import { Component, OnInit } from '@angular/core';
      import { FormGroup, FormControl } from '@angular/forms';
      import { FormBuilder } from '@angular/forms';
      import { Validators } from '@angular/forms';
      import { Addedrecipes } from './addedsoups';
      import { RecipesService } from './recipes.service';
      
      @Component({
        selector: 'app-form',
        templateUrl: './form.component.html',
        providers: [RecipesService],
        styleUrls: ['./form.component.css']
      })
      export class FormComponent implements OnInit {
      
        sections = ['Bread', 'Soup', 'Cakes'];
      
        recipe = { name: '', ingredients: '', description: '', section: this.sections[0] };
      
        Form: FormGroup;
        addedrecipes: any;
      
        constructor(private fb: FormBuilder, private recipesService: RecipesService) { }
      
        ngOnInit() {
          this.Form = new FormGroup({
            name: new FormControl(this.recipe.name, [
              Validators.required,
              Validators.minLength(1)
            ]),
            ingredients: new FormControl(this.recipe.ingredients, [
              Validators.required,
              Validators.minLength(10)
            ]),
            description: new FormControl(this.recipe.description, [
              Validators.required,
              Validators.minLength(20)
            ]),
            section: new FormControl(this.recipe.section, Validators.required)
          })
      
        }
        add(name: string, description: string, ingredients: string): void {
          name = name.trim();
          description = description.trim();
          ingredients = ingredients.trim();
          if (!name || !description || !ingredients) {
            return;
      
          }
      
      
          // The server will generate the id for this new hero
          const newRecipe: Addedrecipes = { name, description, ingredients } as Addedrecipes;
          console.log(&quot;this works&quot;);
          this.recipesService
            .addRecipe(newRecipe)
            .subscribe(recipe =&gt; this.addedrecipes.push(recipe)); 
        }
      
        onSubmit() {
          // TODO: Use EventEmitter with form value
          console.warn(this.Form.value);
        }
      }
  
  </code></pre>
  <p>Here is my service that makes the request:</p>
  <pre><code>
      import { Injectable } from '@angular/core';
      import { HttpClient, HttpParams } from '@angular/common/http';
      import { HttpHeaders } from '@angular/common/http';
      import { HttpClientModule } from '@angular/common/http';
      
      import { Observable } from 'rxjs';
      import { catchError } from 'rxjs/operators';
      
      import { Addedrecipes } from './addedsoups';
      import { HttpErrorHandler, HandleError } from '../http-error-handler.service';
      import { BrowserModule } from '@angular/platform-browser';
      import { NgModule } from '@angular/core';
      
      
       const httpOptions = { 
          headers: new HttpHeaders({
          'Content-Type':  'application/json',
          Authorization: 'my-auth-token'
        })
      };
      // @NgModule({
      //   declarations: [],
      //   imports: [BrowserModule],
      //   providers: [HttpErrorHandler],
      //   bootstrap: []
      // })
      // @Injectable({
      //   providedIn: 'root',
      // }) 
      @NgModule({
        providers: [HttpErrorHandler]
      }) 
      
      @Injectable ()
      export class RecipesService {
        recipeUrl = 'api/recipe';  // URL to web api
        private handleError: HandleError;
          
        constructor(
          private http: HttpClient,
          httpErrorHandler: HttpErrorHandler) {   
          this.handleError = httpErrorHandler.createHandleError('RecipesService');
         {   }
         
      }
      
      
      addRecipe(addedrecipes: Addedrecipes): Observable&lt;Addedrecipes&gt; {
        return this.http.post&lt; Addedrecipes&gt;(this.recipeUrl, addedrecipes, httpOptions)
          .pipe(
            catchError(this.handleError(&quot;addRecipe&quot;, addedrecipes))
          );
      }
      }
  
  </code></pre>
  <p>Any ideas on how to fix the occurring error? Any ideas/suggestions are appreciated.
  Thank you in advance.</p>