Angular：Karma 给出错误错误：NullInjectorError：没有提供 ElementRef！ 从 v7 升级到 v8 后

Question

Very similar to my last Karma upgrade issue in this post , I have all my unit test for a component failing after upgrading from v7 to v8. Once again due to a custom component from a shared library.

So here I get the following..

        NullInjectorError: StaticInjectorError(DynamicTestModule)[ProgressIndicatorComponent -> ElementRef]: 
        StaticInjectorError(Platform: core)[ProgressIndicatorComponent -> ElementRef]: 
            NullInjectorError: No provider for ElementRef!
    Error: NullInjectorError: No provider for ElementRef!
            at NullInjector.get (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:725:1) [angular]
            at resolveToken (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:11918:1) [angular]
            at tryResolveToken (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:11862:1) [angular]
            at StaticInjector.get (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:11764:1) [angular]
            at resolveToken (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:11918:1) [angular]
            at tryResolveToken (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:11862:1) [angular]
            at StaticInjector.get (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:11764:1) [angular]
            at resolveNgModuleDep (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:20234:1) [angular]
            at NgModuleRef_.get (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:20905:1) [angular]
            at resolveDep (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:21276:1) [angular]
            at createClass (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:21152:1) [angular]
            at createDirectiveInstance (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:21027:1) [angular]
            at createViewNodes (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:29387:1) [angular]
            at callViewAction (http://localhost:9877/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:29703:1) [angular]

but this time I do have the ProgressIndicatorComponent (the problem component here) in my declarations.

The component has the following constructor.

    constructor(
        private elRef: ElementRef,
        private renderer: Renderer2,
        private changeDetector: ChangeDetectorRef) { }

If I import the module containing this component instead (and remove it from the declarations) I get

    Failed: Template parse errors:
    Can't bind to 'visible' since it isn't a known property of 'mm-progress-indicator'.
    1. If 'my-progress-indicator' is an Angular component and it has 'visible' input, then verify that it is part of this module.

If I include both, ie import the module AND declare the component, I get..

    NullInjectorError: StaticInjectorError(DynamicTestModule)[ProgressIndicatorComponent -> ElementRef]: 
        StaticInjectorError(Platform: core)[ProgressIndicatorComponent -> ElementRef]: 
            NullInjectorError: No provider for ElementRef!

Now out of ideas (the missing declaration worked for me last time)

Anyone any ideas?

Answer 1

This time, adding the following to tsconfig.json seemed to fix the issue

"paths": {     
     "@angular/*": [
       "./node_modules/@angular/*"
     ],

My global angular cli is actually still at v7, perhaps it was trying to use this? Also not sure why only the unit tests needed this, where as the project would build and run fine.