Angular 9 "No value provided for @angular/core symbol ' ɵɵinjectPipeChangeDetectorRef'。”(IVY)

Question

我今天将我的 Angular 应用程序更新到第 9 版，它在没有 IVY 编译器的情况下运行良好。

一旦启用 Ivy，我就会收到以下错误(在应用程序启动时)并且不知道如何继续。

它似乎与更改检测器引用和管道有关，但是当我使用自定义管道时，没有人使用更改检测器。

runtime.js:26 ERROR Error: No value provided for @angular/core symbol 'ɵɵinjectPipeChangeDetectorRef'. at R3JitReflector.push../node_modules/@angular/compiler/fesm5/compiler.js.R3JitReflector.resolveExternalReference (vendor.js:36836) at JitEmitterVisitor.push../node_modules/@angular/compiler/fesm5/compiler.js.JitEmitterVisitor.visitExternalExpr (vendor.js:36772) at ExternalExpr.push../node_modules/@angular/compiler/fesm5/compiler.js.ExternalExpr.visitExpression (vendor.js:31428) at JitEmitterVisitor.push../node_modules/@angular/compiler/fesm5/compiler.js.AbstractEmitterVisitor.visitInvokeFunctionExpr (vendor.js:36217) at JitEmitterVisitor.push../node_modules/@angular/compiler/fesm5/compiler.js.AbstractJsEmitterVisitor.visitInvokeFunctionExpr (vendor.js:36572) at InvokeFunctionExpr.push../node_modules/@angular/compiler/fesm5/compiler.js.InvokeFunctionExpr.visitExpression (vendor.js:31285) at vendor.js:36401 at JitEmitterVisitor.push../node_modules/@angular/compiler/fesm5/compiler.js.AbstractEmitterVisitor.visitAllObjects (vendor.js:36420) at JitEmitterVisitor.push../node_modules/@angular/compiler/fesm5/compiler.js.AbstractEmitterVisitor.visitAllExpressions (vendor.js:36401) at JitEmitterVisitor.push../node_modules/@angular/compiler/fesm5/compiler.js.AbstractEmitterVisitor.visitInstantiateExpr (vendor.js:36257)

按照要求:

{
  "name": "mycompanyname",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "bundle-report": "webpack-bundle-analyzer dist/stats.json"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^9.0.0",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "^9.0.0",
    "@angular/compiler": "^9.0.0",
    "@angular/core": "^9.0.0",
    "@angular/flex-layout": "^9.0.0-beta.29",
    "@angular/forms": "^9.0.0",
    "@angular/material": "^8.2.3",
    "@angular/material-moment-adapter": "^8.2.3",
    "@angular/platform-browser": "^9.0.0",
    "@angular/platform-browser-dynamic": "^9.0.0",
    "@angular/router": "^9.0.0",
    "@datorama/akita": "^4.17.0",
    "@datorama/akita-ng-router-store": "^4.0.0",
    "@datorama/akita-ngdevtools": "^3.0.2",
    "@microsoft/signalr": "^3.1.0",
    "@types/applepayjs": "^3.0.0",
    "@types/braintree-web": "^3.47.0",
    "@types/fb": "0.0.23",
    "@types/gapi": "0.0.39",
    "@types/gapi.auth2": "0.0.51",
    "@types/google.analytics": "0.0.40",
    "@types/google.visualization": "0.0.51",
    "@types/hammerjs": "^2.0.36",
    "@types/highlight.js": "^9.12.3",
    "@types/jwt-decode": "^2.2.1",
    "@types/lodash-es": "^4.17.3",
    "@types/mailcheck": "^1.1.31",
    "@types/smoothscroll-polyfill": "^0.3.1",
    "@types/universal-analytics": "^0.4.3",
    "@types/uuid": "^3.4.6",
    "@types/vkbeautify": "^0.99.2",
    "@types/youtube": "0.0.38",
    "braintree-web": "^3.56.0",
    "core-js": "^3.5.0",
    "dependency-tree": "^7.2.0",
    "fast-safe-stringify": "^2.0.7",
    "hammerjs": "^2.0.8",
    "highlight.js": "^9.17.1",
    "immer": "^5.0.1",
    "intersection-observer": "^0.7.0",
    "json2typescript": "^1.2.3",
    "jwt-decode": "^2.2.0",
    "lodash-es": "^4.17.15",
    "lottie-web": "^5.5.10",
    "mailcheck": "^1.1.1",
    "moment": "^2.24.0",
    "ng-in-viewport": "^6.0.3",
    "ng2-google-charts": "^4.0.0",
    "ngx-cookie": "^4.1.2",
    "ngx-highlightjs": "^4.0.2",
    "ngx-markdown": "^8.2.1",
    "ngx-md": "^8.0.0",
    "normalize.css": "^8.0.1",
    "normalizr": "^3.4.1",
    "pretty-data": "^0.40.0",
    "rxjs": "^6.5.3",
    "rxjs-etc": "^9.6.2",
    "safe-json-stringify": "^1.2.0",
    "slugify": "^1.3.6",
    "smoothscroll-polyfill": "^0.4.4",
    "svg-inline-loader": "^0.8.0",
    "tslib": "^1.10.0",
    "uuid": "^3.3.3",
    "vkbeautify": "^0.99.3",
    "web-animations-js": "^2.3.2",
    "webpack-visualizer-plugin": "^0.1.11",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.1",
    "@angular/cli": "^9.0.1",
    "@angular/compiler-cli": "^9.0.0",
    "@angular/language-service": "^9.0.0",
    "@nguniversal/express-engine": "^8.2.6",
    "@types/jasmine": "^3.5.0",
    "@types/jasminewd2": "~2.0.8",
    "@types/node": "^12.11.1",
    "akita-schematics": "^2.0.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "^2.1.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.2",
    "ts-node": "~8.5.4",
    "tslint": "~5.20.1",
    "typescript": "^3.7.5",
    "webpack-bundle-analyzer": "^3.6.0"
  }
}

我现在在浏览器中逐步浏览，看看我能找到什么。

缺少的符号有时会出现在 R3JitReflector.context 中。 (它在哪里寻找它)，有时不在那里:

错误:

Answer 1

TLDR；如果您收到此错误消息，请确保:

您的 ts.config.json和 angular.json文件是最新的。我建议使用 CLI 安装一个新项目，然后并排比较

如果你有 ts.config.json或 ts.config.app.json在两个地方(app 和 src)确保你是故意这样做的 :-)

这是一个正在进行的答案 - 还不是一个完整的答案

所以根本问题是 R3JitReflector有时会在没有 ɵɵinjectPipeChangeDetectorRef 的情况下实例化在 context 上提供对象，当它到达 resolveExternalReference它希望找到它但找不到。

所以第 1 步是找到创建 R3JitReflector 的堆栈跟踪。后来失败了。

由于很难更改源代码(我使用的是 ng serve )，因此我在构造函数中添加了一个带有副作用的鬼鬼祟祟的断点，它会创建一个我以后可以检查的堆栈跟踪)。



所以现在当它即将抛出错误时，我可以检查 this.stack获取原始堆栈跟踪。这里是:

Error
    at eval (eval at R3JitReflector (https://dev.example.com:44300/vendor.js:36828:9), <anonymous>:1:15)
    at new R3JitReflector (https://dev.example.com:44300/vendor.js:36828:9)
    at CompilerFacadeImpl.push../node_modules/@angular/compiler/fesm5/compiler.js.CompilerFacadeImpl.jitExpression (https://dev.example.com:44300/vendor.js:49155:79)
    at CompilerFacadeImpl.push../node_modules/@angular/compiler/fesm5/compiler.js.CompilerFacadeImpl.compileFactory (https://dev.example.com:44300/vendor.js:49134:21)
    at Function.get (https://dev.example.com:44300/vendor.js:70418:45)
    at eval (ng:///UnobserveHelperService/ɵprov.js:4:110)
    at JitEvaluator.push../node_modules/@angular/compiler/fesm5/compiler.js.JitEvaluator.executeFunction (https://dev.example.com:44300/vendor.js:36744:78)
    at JitEvaluator.push../node_modules/@angular/compiler/fesm5/compiler.js.JitEvaluator.evaluateCode (https://dev.example.com:44300/vendor.js:36732:21)
    at JitEvaluator.push../node_modules/@angular/compiler/fesm5/compiler.js.JitEvaluator.evaluateStatements (https://dev.example.com:44300/vendor.js:36701:21)
    at CompilerFacadeImpl.push../node_modules/@angular/compiler/fesm5/compiler.js.CompilerFacadeImpl.jitExpression (https://dev.example.com:44300/vendor.js:49155:37)"

我现在终于看到自己的代码 UnobserveHelperService它具有以下构造函数:



所以现在我开始做点什么了——我有一个 ChangeDetectorRef这里...

幸好 ChangeDetectorRef是那种你可以注释掉的东西，你的代码基本上仍然可以工作......事实证明就是这样。

我的应用程序现在加载并且似乎工作正常!!!

好的，回到 UnobserveService 是什么.为了方便起见，它需要一个可观察对象树并将它们“解包”到 POJO。

但这并不重要——重要的是它是如何实例化的。

首先让我们确定 private无关紧要，让它成为 public cdr而是以防万一...... OK 仍然失败 - 正如预期的那样。

让我们看看我们是否能到达构造函数。

@Injectable()
export class UnobserveHelperService implements OnDestroy
{
    constructor(public cdr: ChangeDetectorRef)
    {
        throw new Error('constructor for UnobserveService threw error');
    }

有趣的是我们没有，但我想这并不奇怪——在我们到达这里之前很久就坏了。

所以无论如何 UnobserveHelperService是由组件提供的服务 - 我的失败 URL 之一是 CheckoutComponent .
providers: [ UnobserveHelperService ]
有趣的是 CheckoutComponent不 本身 拍 cdr作为依赖。因此，让我们通过添加 cdr: ChangeDetectorRef 来看看这是否会有所不同。到组件。

这似乎没有什么区别(也尝试在我的 UnobserveHelperService 之前和之后放置 cdr)。

好的，现在让我们做一个简单的项目，看看我们是否可以复制它......

创建了一个新的空 angular 9 项目，以下是 不是 失败:

@Injectable()
export class UnobserveHelperService
{
    constructor(private cdr: ChangeDetectorRef)
    {
       console.log(this.cdr);
    }
}

@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.scss'],
  providers: [ UnobserveHelperService ]
})
export class ChatComponent implements OnInit {

  constructor(private helper: UnobserveHelperService) {
    console.log(this.helper);
  }

  ngOnInit(): void {

  }
}

如果我将这个确切的服务定义放回我的主应用程序，那么它会再次失败。

在编译我的新项目时我注意到的一件事是我得到:

编译 @angular/core : es2015 为 esm2015
编译 @angular/common : es2015 as esm2015
编译 @angular/platform-b​​rowser : es2015 as esm2015
编译 @angular/platform-b​​rowser-dynamic : es2015 as esm2015

但我的项目给了我

编译 @angular/core : 模块为 esm5
编译 @angular/common : 模块为 esm5
编译 @angular/platform-b​​rowser : 模块为 esm5

这可能有关系吗？

最后更新:我几乎注释掉了我的整个应用程序，但仍然看到问题。无法在示例项目中复制它。我的狗现在需要走路了!明天再试一次。

待续...