角9“没有为@角/核心符号‘ɵɵ注入’提供任何值。(常春藤)

Question

我今天更新了我的角应用程序到版本9，没有常春藤编译器，它工作得很好。

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

这似乎与变更检测器、参考资料和管道有关，但当我使用自定义管道时，没有人使用变更检测器。

runtime.js:26错误:没有为@角/核心符号“ɵɵ注入器injectPipeChangeDetectorRef”提供值。在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)在JitEmitterVisitor.Push./node_node/@angular/compiler/fesm5/compiler.js.AbstractEmitterVisitor.visitInvokeFunctionExpr (vendor.js:36217)在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)在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

如果收到此错误消息，请确保：

• 您的ts.config.json和angular.json文件是最新的。我建议使用CLI安装一个新项目，如果您在两个地方(

和src)都有ts.config.json或ts.config.app.json，然后并行地比较它:-)。

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

因此，根本的问题是，R3JitReflector有时在没有在context对象上提供ɵɵinjectPipeChangeDetectorRef的情况下实例化，当它到达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是一个组件提供的服务--我失败的URLS之一就是CheckoutComponent。

providers: [ UnobserveHelperService ]

有趣的是，CheckoutComponent本身并不是，将cdr作为一个依赖项。因此，让我们看看通过将cdr: ChangeDetectorRef添加到组件中是否会产生影响。

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

好，现在让我们做一个简单的项目，看看我们能不能复制这个.

创建了一个新的空角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 {

  }
}

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

在编译我的新项目时，我注意到一件事：

编译@转角式/核心: es2015作为esm2015编译@ esm2015 /公用: es2015作为esm2015编译@angular/platform-browser : es2015作为esm2015编译@转角/平台-浏览器-动态: es2015作为esm2015

但我的项目给了我

编译@转角/核心:模块作为esm5编译@角/通用:模块作为esm5编译@角/平台浏览器:模块作为esm5

这可能是相关的吗？

上一次更新:我已经注释掉了我的整个应用程序，并且仍然看到了这个问题。无法在示例项目中复制它。我的狗现在需要他的散步！明天再试一次。

待续..。

Answer 2

禁用AOT会导致此问题。确保它是启用的。

Answer 3

我的案子是角度版错配。我在我的主应用程序(ng v10)中使用了组件库(ng v.9)，并出现了这个问题。