Angular 9 "Не указано значение для символа @ angular / core 'jectinjectPipeChangeDetectorRef'." (ПЛЮЩ) - PullRequest
2 голосов
/ 07 февраля 2020

Я обновил свое Angular приложение до версии 9 сегодня, и оно прекрасно работает без компилятора IVY.

Как только я включаю Ivy, я получаю следующую ошибку (при запуске приложения) и понятия не имею, как продолжить.

Похоже, что-то связано с ссылками и трубами детектора изменений, но пока я использую пользовательские каналы, ни одна не использует детектор изменений.

время выполнения. js: 26 Ошибка: не указано значение для @ angular / core символа 'jectinjectPipeChangeDetectorRef'. в R3JitReflector.pu sh .. / node_modules/@angular/compiler/fesm5/compiler.js.R3JitReflector.resolveExternalReference (vendor. js: 36836) в JitEmitterVisitor.pu sh .. / node_modules / @ angular / compiler / fesm5 / compiler. js .JitEmitterVisitor.visitExternalExpr (vendor. js: 36772) в ExternalExpr.pu sh .. / node_modules/@angular/compiler/fesm5/compiler.js.ExternalExpr .visitExpression (vendor. js: 31428) в JitEmitterVisitor.pu sh .. / node_modules/@angular/compiler/fesm5/compiler.js.AbstractEmitterVisitor.visitInvokeFunctionExpr (вендор. js: 36217ter) в Jit .pu sh .. / node_modules/@angular/compiler/fesm5/compiler.js.AbstractJsEmitterVisitor.visitInvokeFunctionExpr (vendor. js: 36572) в InvokeFunctionExpr.pu sh .. / node_modules / @ angular / compiler / fesm5 / compiler. js .InvokeFunctionExpr.visitExpression (vendor. js: 31285) у поставщика. js: 36401 в JitEmitterVisitor.pu sh .. / node_modules / @ angular / compiler / fesm5 / compiler . js .AbstractEmitterVisito r.visitAllObjects (vendor. js: 36420) в JitEmitterVisitor.pu sh .. / node_modules/@angular/compiler/fesm5/compiler.js.AbstractEmitterVisitor.visitAllExpressions (vendor. js: 36401) в JitEmitterVisitor.pu sh .. / 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 (где он смотрит за это) а иногда и нет:

Ошибка: enter image description here


enter image description here

Ответы [ 2 ]

0 голосов
/ 10 марта 2020

AOT отключен может вызвать эту проблему. Убедитесь, что он включен.

0 голосов
/ 08 февраля 2020

TLDR; Если вы получаете это сообщение об ошибке, убедитесь, что

  • ваш ts.config.json и angular.json файл обновлен. Я рекомендую установить новый проект с CLI, а затем сравнивать бок о бок
  • , если у вас есть ts.config.json или ts.config.app.json в двух местах (app и src), убедитесь, что вы делаете это намеренно : -)

Это ответ в процессе, но еще не полный ответ

Таким образом, основная проблема в том, что R3JitReflector иногда создается без ɵɵinjectPipeChangeDetectorRef предоставляется для context объекта, и когда он достигает resolveExternalReference, он ожидает найти его, но не может.

Таким образом, шаг 1 состоял в том, чтобы найти трассировку стека для создания объекта. R3JitReflector, который впоследствии потерпел неудачу.

Так как трудно изменить источник (я использую ng serve), я добавил хитрую точку останова с побочным эффектом в конструктор, который создал бы трассировку стека, которую я мог позже осмотреть ).

enter image description here

Так что теперь, когда он собирается выдать ошибку, я могу проверить 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, который имеет следующий конструктор:

enter image description here

Так что теперь я нахожусь во что-то - у меня есть 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 к компоненту.

Похоже, это не имело значения (также пытался поместить cdr до и после моего UnobserveHelperService).

ОК, так что теперь давайте просто создадим простой проект, чтобы посмотреть, сможем ли мы его дублировать. ..

Создан новый пустой проект 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 as esm2015 Компиляция @ angular / common: es2015 as esm2015 Компиляция @ angular / platform-browser: es2015 as esm2015 Compiling @ angular / platform-browser-dynamici c: es2015 as esm2015

но мой проект дает мне

Compiling @ angular / core: module as esm5 Компиляция @ angular / common: module as esm5 Компиляция @ angular / platform-browser: module as esm5

Может ли это быть связано?

Последнее обновление: я закомментировал практически все свои применение и до сих пор вижу проблему. Не удается продублировать его в примере проекта. Моей собаке нужна его прогулка сейчас! завтра попробую еще раз.

продолжение следует ...

...