Angular: Karma giving error Error: NullInjectorError: No provider for ElementRef! after upgrade from v7 to v8

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.

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?



Read more here: https://stackoverflow.com/questions/67930791/angular-karma-giving-error-error-nullinjectorerror-no-provider-for-elementref

Content Attribution

This content was originally published by peterc at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: