首页 > 解决方案 > Angular:Karma 给出错误错误:NullInjectorError:没有提供 ElementRef!从 v7 升级到 v8 后

问题描述

与我在这篇文章中的上一个 Karma 升级问题非常相似,从 v7 升级到 v8 后,我对组件的所有单元测试都失败了。再次由于来自共享库的自定义组件。

所以在这里我得到以下..

        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]

但这次我的ProgressIndicatorComponent声明中确实有(这里的问题组件)。

该组件具有以下构造函数。

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

如果我导入包含此组件的模块(并将其从声明中删除),我会得到

    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.

如果我同时包含两者,即导入模块并声明组件,我得到..

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

现在没有想法(上次缺少的声明对我有用)

有人有什么想法吗?

标签: angularkarma-runner

解决方案


这次,添加以下内容tsconfig.json似乎可以解决问题

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

我的全局角度 cli 实际上仍处于 v7,也许它正在尝试使用它?也不知道为什么只有单元测试需要这个,因为项目可以构建和运行良好。


推荐阅读