title: ng test problem while testing a component
body: <p>I have the following error when I ng test component on Angular 12:</p>
  <p>Error: Unexpected value 'ParamDecoratorFactory' imported by the module 'DynamicTestModule'. Please add an @NgModule annotation.
  at verifySemanticsOfNgModuleDef (http://localhost:9876/<em>karma_webpack</em>/vendor.js:85197:19)
  at http://localhost:9876/<em>karma_webpack</em>/vendor.js:85208:9
  at Array.forEach ()
  at verifySemanticsOfNgModuleDef (http://localhost:9876/<em>karma_webpack</em>/vendor.js:85206:60)
  at Function.get (http://localhost:9876/<em>karma_webpack</em>/vendor.js:85168:21)
  at R3TestBedCompiler.applyProviderOverridesToModule (http://localhost:9876/<em>karma_webpack</em>/vendor.js:92502:39)
  at R3TestBedCompiler.compileTestModule (http://localhost:9876/<em>karma_webpack</em>/vendor.js:92750:14)
  at R3TestBedCompiler.finalize (http://localhost:9876/<em>karma_webpack</em>/vendor.js:92356:14)
  at TestBedRender3.get testModuleRef [as testModuleRef] (http://localhost:9876/<em>karma_webpack</em>/vendor.js:93229:49)
  at TestBedRender3.inject (http://localhost:9876/<em>karma_webpack</em>/vendor.js:93152:29)</p>
  <p>Error: Expected undefined to be truthy.
  at 
  at UserContext. (http://localhost:9876/<em>karma_webpack</em>/main.js:1060:23)
  at ZoneDelegate.invoke (http://localhost:9876/<em>karma_webpack</em>/polyfills.js:382:26)
  at ProxyZoneSpec.onInvoke (http://localhost:9876/<em>karma_webpack</em>/vendor.js:120678:39)</p>
  <p>The spec.ts code is this:</p>
  <pre><code>import { ComponentFixture, TestBed } from '@angular/core/testing';
  import { Inject } from '@angular/core';
  import { MenuComponent } from './menu.component';
  import { Dish } from '../shared/dish';
  import { DishService } from '../services/dish.service';
  import { flyInOut, expand } from '../animations/app.animation';
  
  describe('MenuComponent', () =&gt; {
    let component: MenuComponent;
    let fixture: ComponentFixture&lt;MenuComponent&gt;;
  
    beforeEach(async () =&gt; {
      await TestBed.configureTestingModule({
        imports: [
          Inject,
          Dish,
          DishService,
          flyInOut,
          expand
        ],
        declarations: [ MenuComponent ]
      })
      .compileComponents();
    });
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(MenuComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
  
    });
  
    it('should create', () =&gt; {
      expect(component).toBeTruthy();
    });
  
  });
  </code></pre>
  <p>The component.ts code is this:</p>
  <pre><code>import { Component, OnInit, Inject } from '@angular/core';
  import { Dish } from '../shared/dish';
  import { DishService } from '../services/dish.service';
  import { flyInOut, expand } from '../animations/app.animation';
  
  @Component({
    selector: 'app-menu',
    templateUrl: './menu.component.html',
    styleUrls: ['./menu.component.scss'],
    // tslint:disable-next-line:use-host-property-decorator
    host: {
      '[@flyInOut]': 'true',
      'style': 'display: block;'
      },
    animations: [
      flyInOut(),
      expand()
    ]
  })
  export class MenuComponent implements OnInit {
  
    dishes!: Dish[];
    errMess: string;
    
    constructor(private dishService: DishService, 
      @Inject ('BaseURL') public baseURL) { }
  
    ngOnInit(): void {
      this.dishService.getDishes().subscribe((dishes =&gt; this.dishes = dishes), errMess =&gt; this.errMess = &lt;any&gt;errMess);
    }
  
  }
  </code></pre>
  <p>This is the dish.service.ts code:</p>
  <pre><code>import { Injectable } from '@angular/core';
  import { Dish } from '../shared/dish';
  import { Observable, of } from 'rxjs';
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  import { baseURL } from '../shared/baseurl';
  import { map, catchError } from 'rxjs/operators';
  import { ProcessHTTPMsgService } from './process-httpmsg.service';
  
  @Injectable({
    providedIn: 'root'
  })
  export class DishService {
  
    constructor(private http: HttpClient, private processHTTPMsgService: ProcessHTTPMsgService) { }
  
    getDishes(): Observable&lt;Dish[]&gt; {
      return this.http.get&lt;Dish[]&gt;(baseURL + '/dishes').pipe(catchError(this.processHTTPMsgService.handleError));
    }
  
    getDish(id: string): Observable&lt;Dish&gt; {
      return this.http.get&lt;Dish&gt;(baseURL + '/dishes/' + id).pipe(catchError(this.processHTTPMsgService.handleError));
    }
  
    getFeaturedDish(): Observable&lt;Dish&gt; {
      return this.http.get&lt;Dish[]&gt;(baseURL + '/dishes?featured=true').pipe(map(dishes =&gt; dishes[0])).pipe(catchError(this.processHTTPMsgService.handleError));
    }
  
    getDishIds(): Observable&lt;string[] | any&gt; {
      return this.getDishes().pipe(map(dishes =&gt; dishes.map(dish =&gt; dish.id))).pipe(catchError(error =&gt; error));
    }
  
    putDish(dish: Dish): Observable&lt;Dish&gt; {
      const httpOptions = {
        headers: new HttpHeaders({
          'Content-Type':  'application/json'})
      };
      return this.http.put&lt;Dish&gt;(baseURL + '/dishes/' + dish.id, dish, httpOptions).pipe(catchError(this.processHTTPMsgService.handleError));
    }
  }
  </code></pre>
  <p>Appreciate your help</p>