title: Angular 9 "Error: This constructor was not compatible with Dependency Injection."
body: <p>This weird error, that I don't remember seeing pre-Ivy, has popped up in the setup of a new app created with the latest Angular 9 CLI. Looks like it could be a bug with Ivy? Any ideas on how to fix would be greatly appreciated.</p>
  
  <p>Error result from ng test</p>
  
  <pre><code>Error: This constructor was not compatible with Dependency Injection.
      at Module.ɵɵinvalidFactory (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:14150:1)
      at Object.Router_Factory [as factory] (http://localhost:9876/_karma_webpack_/node_modules/@angular/router/__ivy_ngcc__/fesm5/router.js:4404:67)
      at R3Injector.push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.R3Injector.hydrate (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:11425:1)
      at R3Injector.push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.R3Injector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:11247:1)
      at injectInjectorOnly (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:787:1)
      at ɵɵinject (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:792:1)
      at Object.AuthService_Factory [as factory] (ng:///AuthService/ɵfac.js:5:39)
      at R3Injector.push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.R3Injector.hydrate (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:11425:1)
      at R3Injector.push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.R3Injector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:11247:1)
      at NgModuleRef$1.push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.NgModuleRef$1.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:24218:1)
  
  Error: Expected undefined to be truthy.
      at &lt;Jasmine&gt;
      at UserContext.&lt;anonymous&gt; (http://localhost:9876/_karma_webpack_/src/app/shared/components/header/header.component.spec.ts:25:23)
      at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone.js:396:1)
      at ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:305:1)
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre><code>import { Component, HostBinding } from '@angular/core';
  import { AuthService, ScreenService, AppInfoService } from './shared/services';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
  })
  export class AppComponent {
    @HostBinding('class') get getClass() {
      return Object.keys(this.screen.sizes)
        .filter(cl =&gt; this.screen.sizes[cl])
        .join(' ');
    }
  
    constructor(
      private authService: AuthService,
      private screen: ScreenService,
      public appInfo: AppInfoService,
    ) {}
  
    isAuthorized() {
      return this.authService.isLoggedIn;
    }
  }
  </code></pre>
  
  <p>app.component.spec.ts</p>
  
  <pre><code>import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  import { Router } from '@angular/router';
  
  import { AppComponent } from './app.component';
  import { AuthService } from './shared/services';
  
  describe('AppComponent', () =&gt; {
    let component: AppComponent;
    let fixture: ComponentFixture&lt;AppComponent&gt;;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [AppComponent],
        providers: [AuthService, Router],
      }).compileComponents();
    }));
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(AppComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  
    it('should create', () =&gt; {
      expect(component).toBeTruthy();
    });
  });
  </code></pre>
  
  <p>package.json dependencies</p>
  
  <pre><code>  "dependencies": {
      "@angular/animations": "~9.0.2",
      "@angular/cdk": "^8.0.0",
      "@angular/common": "~9.0.2",
      "@angular/compiler": "~9.0.2",
      "@angular/core": "~9.0.2",
      "@angular/forms": "~9.0.2",
      "@angular/platform-browser": "~9.0.2",
      "@angular/platform-browser-dynamic": "~9.0.2",
      "@angular/router": "~9.0.2",
      "devextreme": "latest",
      "devextreme-angular": "latest",
      "rxjs": "~6.5.4",
      "tslib": "^1.10.0",
      "zone.js": "~0.10.2"
    },
    "devDependencies": {
      "@angular-devkit/build-angular": "~0.900.3",
      "@angular/cli": "~9.0.3",
      "@angular/compiler-cli": "~9.0.2",
      "@angular/language-service": "~9.0.2",
      "@types/jasmine": "~3.5.0",
      "@types/jasminewd2": "~2.0.3",
      "@types/node": "^12.11.1",
      "codelyzer": "^5.1.2",
      "devextreme-cli": "latest",
      "devextreme-themebuilder": "latest",
      "husky": "^4.2.3",
      "jasmine-core": "~3.5.0",
      "jasmine-spec-reporter": "~4.2.1",
      "karma": "~4.3.0",
      "karma-chrome-launcher": "~3.1.0",
      "karma-coverage-istanbul-reporter": "~2.1.0",
      "karma-jasmine": "~2.0.1",
      "karma-jasmine-html-reporter": "^1.4.2",
      "prettier": "^1.19.1",
      "pretty-quick": "^2.0.1",
      "protractor": "~5.4.3",
      "ts-node": "~8.3.0",
      "tslint": "~5.18.0",
      "tslint-config-prettier": "^1.18.0",
      "typescript": "~3.7.5",
      "webpack-bundle-analyzer": "^3.6.0"
    }
  </code></pre>
  
  <p>NOTE: this error appeared after fixing <code>NullInjectorError</code> for both AuthService &amp; Router.</p>