4

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

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

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

runtime.js:26 错误错误:没有为@angular/core 符号“ɵɵinjectPipeChangeDetectorRef”提供值。在 R3JitReflector.push../node_modules/@angular/compiler/fesm5/compiler.js.R3JitReflector.resolveExternalReference (vendor.js:36836) 在 JitEmitterVisitor.push../node_modules/@angular/compiler/fesm5/compiler.js。 JitEmitterVisitor.visitExternalExpr (vendor.js:36772) 在 ExternalExpr.push../node_modules/@angular/compiler/fesm5/compiler.js.ExternalExpr.visitExpression (vendor.js:31428) 在 JitEmitterVisitor.push../node_modules/@ angular/compiler/fesm5/compiler.js.AbstractEmitterVisitor.visitInvokeFunctionExpr (vendor.js:36217) 在 JitEmitterVisitor.push../node_modules/@angular/compiler/fesm5/compiler.js.AbstractJsEmitterVisitor.visitInvokeFunctionExpr (vendor.js:36572)在 InvokeFunctionExpr.push..


按照要求:

{
  "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(它正在寻找它的地方),有时不在那里:

错误: 在此处输入图像描述


在此处输入图像描述

4

4 回答 4

0

我花了很多时间试图解决这个问题。最后,我需要做的就是以下。

打开tsconfig.app.json,并将这个块添加到底部:

  "angularCompilerOptions": {
    "enableIvy": false
  }
于 2021-02-11T06:18:39.153 回答
0

AOT 禁用可能会导致此问题。确保它已启用。

于 2020-03-10T04:07:59.247 回答
0

TLDR;如果您收到此错误消息,请确保:

  • 您的ts.config.jsonangular.json文件是最新的。我建议使用 CLI 安装一个新项目,然后并排比较
  • 如果你有ts.config.jsonts.config.app.json在两个地方(appsrc)确保你是故意这样做的:-)

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

因此,潜在的问题R3JitReflector有时会在对象上没有提供的情况下被实例化,并且当它到达时希望找到它但找不到。ɵɵinjectPipeChangeDetectorRefcontextresolveExternalReference

R3JitReflector因此,第 1 步是为随后失败的创建找到堆栈跟踪。

由于很难更改源(我正在使用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并不作为依赖项。因此,让我们看看通过添加到组件中是否会产生影响。cdrcdr: 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 为 esm2015 编译 @angular/platform-b​​rowser : es2015 为 esm2015 编译 @angular/platform-b​​rowser-dynamic : es2015 为 esm2015

但我的项目给了我

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

这可能有关系吗?

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

未完待续...

于 2020-02-08T05:22:26.730 回答
0

我的情况是角度版本不匹配。我在我的主应用程序(ng v10)中使用了我的组件库(ng v.9)并遇到了这个问题。

于 2020-12-19T20:39:40.323 回答