Блог

Главная - Вопросы по программированию - Ошибка углового типа: прототип объекта может быть только объектом или null: не определено

Ошибка углового типа: прототип объекта может быть только объектом или null: не определено

#angular #typescript #exception #npm

#угловой #typescript #исключение #npm

Вопрос:

У меня был рабочий проект, пока я не попытался установить ExcelJs ( npm install --save exceljs ).

После этого я начал получать различные ошибки, такие как Cannot read property ‘Minus’ of undefined и Cannot find module 'postcss-value-something' которые были решены путем npm i добавления любых недостающих частей.

Однако после этого я теперь получаю TypeError: Object prototype may only be an Object or null: undefined .

Столкнувшись с этими проблемами, я удалил excelJs в надежде, что вернется некоторая нормальность, однако, не повезло.

Полная ошибка выглядит следующим образом:

     at setPrototypeOf (<anonymous>)
    at Object.__extends (F:HoneycombHoneyVarroanode_modules@angularcompiler-clinode_modulestslibtslib.js:68:9)
    at F:HoneycombHoneyVarroanode_modules@angularcompiler-clisrcngtscindexersrctemplate.js:118:17
    at F:HoneycombHoneyVarroanode_modules@angularcompiler-clisrcngtscindexersrctemplate.js:325:6
    at F:HoneycombHoneyVarroanode_modules@angularcompiler-clisrcngtscindexersrctemplate.js:3:17
    at Object.<anonymous> (F:HoneycombHoneyVarroanode_modules@angularcompiler-clisrcngtscindexersrctemplate.js:9:3)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at F:HoneycombHoneyVarroanode_modules@angularcompiler-clisrcngtscindexersrctransform.js:21:22
    at F:HoneycombHoneyVarroanode_modules@angularcompiler-clisrcngtscindexersrctransform.js:10:17
    at Object.<anonymous> (F:HoneycombHoneyVarroanode_modules@angularcompiler-clisrcngtscindexersrctransform.js:16:3)

Содержимое моего package.json выглядит следующим образом:

  "dependencies": {
    "@agm/core": "^1.1.0",
    "@agm/js-marker-clusterer": "^1.0.0-beta.3",
    "@angular/animations": "^8.0.0",
    "@angular/cdk": "^7.3.6",
    "@angular/common": "^8.0.0",
    "@angular/compiler": "^8.0.0",
    "@angular/core": "^8.0.0",
    "@angular/forms": "^8.0.0",
    "@angular/http": "^7.2.16",
    "@angular/material": "^7.3.6",
    "@angular/platform-browser": "^8.0.0",
    "@angular/platform-browser-dynamic": "^8.0.0",
    "@angular/platform-server": "^8.0.0",
    "@angular/router": "^8.0.0",
    "@angular/upgrade": "^8.2.14",
    "@auth0/angular-jwt": "^2.0.0",
    "@types/angular": "^1.6.47",
    "angular-calendar": "^0.28.16",
    "angular2-text-mask": "8.0.4",
    "angular2-toaster": "^8.0.0",
    "animate.css": "^3.7.0",
    "bootstrap": "^4.1.2",
    "brace": "0.11.0",
    "chart.js": "^2.7.3",
    "codemirror": "5.33.0",
    "copy-webpack-plugin": "^4.5.1",
    "core-js": "2.5.3",
    "dragula": "3.7.2",
    "file-saver": "^1.3.8",
    "flag-icon-css": "2.9.0",
    "font-awesome": "^4.7.0",
    "highcharts": "7.0.2",
    "highcharts-angular": "2.4.0",
    "highcharts-boost": "^0.1.7",
    "html2canvas": "^1.0.0-alpha.12",
    "intl": "^1.2.5",
    "js-marker-clusterer": "^1.0.0",
    "jspdf": "^1.5.3",
    "lodash": "^4.17.10",
    "moment": "^2.20.1",
    "ng-mat-select-infinite-scroll": "^2.0.0",
    "ng-select": "^1.0.2",
    "ng2-ace-editor": "^0.3.9",
    "ng2-charts": "1.6.0",
    "ng2-completer": "^3.0.0-beta.2",
    "ng2-dragula": "1.5.0",
    "ng2-file-upload": "1.2.1",
    "ng2-select": "^2.0.0",
    "ng2-validation": "^4.2.0",
    "ngx-bootstrap": "2.0.0-rc.0",
    "ngx-loading": "^8.0.0",
    "ngx-quill": "^8.1.8",
    "normalize.css": "^7.0.0",
    "oidc-client": "^1.5.1",
    "postcss-value-parser": "^4.1.0",
    "primeicons": "4.0.0",
    "primeng": "9.1.0",
    "raven-js": "^3.26.2",
    "rxjs": "6.2.1",
    "rxjs-compat": "^6.2.1",
    "simple-line-icons": "^2.4.1",
    "spinkit": "1.2.5",
    "ts-helpers": "1.1.2",
    "ts-overlapping-marker-spiderfier": "^1.0.2",
    "tslib": "^1.9.0",
    "xlsx": "0.13.3",
    "zone.js": "^0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.803.24",
    "@angular/cli": "^8.3.28",
    "@angular/compiler-cli": "^10.0.2",
    "@angular/language-service": "^10.0.2",
    "@fortawesome/fontawesome-free": "^5.6.1",
    "@types/core-js": "^2.5.3",
    "@types/file-saver": "0.0.1",
    "@types/googlemaps": "3.37.7",
    "@types/highcharts": "5.0.36",
    "@types/jasmine": "^3.5.11",
    "@types/jasminewd2": "2.0.3",
    "@types/jquery": "^3.5.0",
    "@types/lodash": "^4.14.110",
    "@types/luxon": "^1.11.1",
    "@types/node": "^14.0.19",
    "codelyzer": "^6.0.0",
    "jasmine-core": "^3.5.0",
    "jasmine-spec-reporter": "^5.0.2",
    "jasminewd2": "^2.2.0",
    "karma": "^5.1.0",
    "karma-chrome-launcher": "^3.1.0",
    "karma-cli": "^2.0.0",
    "karma-coverage-istanbul-reporter": "1.3.3",
    "karma-jasmine": "^3.3.1",
    "karma-jasmine-html-reporter": "^1.5.4",
    "karma-remap-istanbul": "^0.6.0",
    "protractor": "^7.0.0",
    "rxjs-tslint": "^0.1.8",
    "ts-node": "4.1.0",
    "tslint": "^6.1.2",
    "typescript": "^3.4.5",
    "webpack": "^4.43.0",
    "webpack-bundle-analyzer": "^3.1.0"
  }

Везде, где я читал до сих пор, предполагается, что виноват cli cli / compiler, но у меня создалось впечатление, что ^ средства, которые он обновляет по мере необходимости, я также попытался удалить ^ , если версия вышла за рамки поддерживаемой Angular версии моего проекта.

ng v возвращает следующее:

 Angular CLI: 8.3.28
Node: 10.16.0
OS: win32 x64
Angular: 8.0.0
... animations, common, compiler, core, forms, platform-browser
... platform-browser-dynamic, platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.28
@angular-devkit/build-angular     0.803.28
@angular-devkit/build-optimizer   0.803.28
@angular-devkit/build-webpack     0.803.28
@angular-devkit/core              8.3.28
@angular-devkit/schematics        8.3.28
@angular/cdk                      7.3.7
@angular/cli                      8.3.28
@angular/compiler-cli             10.0.2
@angular/http                     7.2.16
@angular/language-service         10.0.2
@angular/material                 7.3.7
@angular/upgrade                  8.2.14
@ngtools/webpack                  8.3.28
@schematics/angular               8.3.28
@schematics/update                0.803.28
rxjs                              6.2.1
typescript                        3.9.6
webpack                           4.43.0

Я подозреваю, что это все еще связано с версией компилятора / cli или даже typescript, как я видел, написано в другом месте, однако, похоже, нет никаких указаний относительно того, какие версии следует использовать с чем.

Любая помощь приветствуется.

Ответ №1:

Ваши версии пакетов angular настолько не синхронизированы! Каким-то образом ваш cli-интерфейс компилятора находится на уровне 10.0.2, но ваш http находится на уровне 7.2.16. Как это произошло? В любом случае, лучший способ обновить ваш angular — использовать ng update @angular/cli , ng update @angular/core и ng update @angular/material .

Это обновит его до версии 10 и, надеюсь, выполнит соответствующие миграции. Все, что начинается с @angular, всегда должно иметь одну и ту же основную версию. В вашем случае вы смешиваете v7 с v8 и v10. Добавьте v9, и у вас будет квартет.

Если обновление не работает с использованием cli, возможно, вам лучше выполнить следующие шаги:

  • сохраните исходный код, который находится под src , и любые другие файлы, которые, по вашему мнению, стоит сохранить, например package.json , для проверки любых неугловых пакетов, которые вы используете.
  • удалите всю папку проекта
  • обновите свой глобальный @angular/cli , используя ng -g i @angular/cli@latest
  • создайте новый проект, используя ng new xxx
  • скопируйте ваш src во вновь созданный проект, но пропустите main.ts , polyfills.ts и tsconfig файлы, потому что в последней версии angular cli произошли серьезные изменения
  • необязательно: обновите эти не скопированные файлы любыми пользовательскими изменениями, которые вы могли бы внести, например package.json

С этого момента всегда используйте ng update для обновления любой модуль angular, поскольку это также включает в себя необходимые миграции кода.

В качестве примечания, ^ если вы это сделаете, он просто обновит младшую версию вашего установленного пакета npm update . Подробнее здесь

Комментарии:

1. Привет, спасибо за ваш ответ, я начну попытки этих обновлений. Проектом пренебрегли, и был сделан минимум для обслуживания с точки зрения любых запрошенных изменений функций за эти годы. Существует большая вероятность того, что несоответствие версий произошло из-за избежания ошибок от старых используемых модулей / пакетов.

2. IIRC мы используем agm, который несовместим с более поздними версиями angular.

3. @Divine в этом случае вам следует вернуться к совместимой версии angular и никогда не обновлять 🙂 Хотя последняя версия agm поддерживает более поздние версии angular

4. вероятно ли, что мне нужно будет понизить cli? к 8.X, чтобы соответствовать другим версиям?