我今天将我的 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 中。 (它在哪里寻找它)，有时不在那里:错误:
最佳答案
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-browser : es2015 as esm2015
编译 @angular/platform-browser-dynamic : es2015 as esm2015
但我的项目给了我
编译 @angular/core : 模块为 esm5
编译 @angular/common : 模块为 esm5
编译 @angular/platform-browser : 模块为 esm5
这可能有关系吗？
最后更新:我几乎注释掉了我的整个应用程序，但仍然看到问题。无法在示例项目中复制它。我的狗现在需要走路了!明天再试一次。
待续...
关于Angular 9 "No value provided for @angular/core symbol ' ɵɵinjectPipeChangeDetectorRef'。”(IVY)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60110226/