angular - Angular TypeError:对象原型可能只是一个对象或空:未定义
问题描述
在我尝试安装 ExcelJs ( npm install --save exceljs
) 之前,我有一个工作项目。
之后,我开始收到各种错误,例如, Cannot read property ‘Minus’ of undefined
通过Cannot find module 'postcss-value-something'
ing 解决npm i
缺失的部分。
然而,在此之后,我现在收到TypeError: Object prototype may only be an Object or null: undefined
.
遇到这些问题后,我删除了 excelJ,希望能够恢复正常,但没有这样的运气。
完整的错误如下:
at setPrototypeOf (<anonymous>)
at Object.__extends (F:\Honeycomb\Honey\Varroa\node_modules\@angular\compiler-cli\node_modules\tslib\tslib.js:68:9)
at F:\Honeycomb\Honey\Varroa\node_modules\@angular\compiler-cli\src\ngtsc\indexer\src\template.js:118:17
at F:\Honeycomb\Honey\Varroa\node_modules\@angular\compiler-cli\src\ngtsc\indexer\src\template.js:325:6
at F:\Honeycomb\Honey\Varroa\node_modules\@angular\compiler-cli\src\ngtsc\indexer\src\template.js:3:17
at Object.<anonymous> (F:\Honeycomb\Honey\Varroa\node_modules\@angular\compiler-cli\src\ngtsc\indexer\src\template.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:\Honeycomb\Honey\Varroa\node_modules\@angular\compiler-cli\src\ngtsc\indexer\src\transform.js:21:22
at F:\Honeycomb\Honey\Varroa\node_modules\@angular\compiler-cli\src\ngtsc\indexer\src\transform.js:10:17
at Object.<anonymous> (F:\Honeycomb\Honey\Varroa\node_modules\@angular\compiler-cli\src\ngtsc\indexer\src\transform.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 有问题,但我的印象^
是它会根据需要进行更新,我还尝试删除^
版本超出我项目支持的 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 版本甚至打字稿有关,正如我在其他地方看到的那样,但是似乎没有任何关于哪些版本应该与什么一起使用的指南。
非常感谢任何帮助。
解决方案
你的角度包版本太不同步了!不知何故,您的编译器 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
升级任何角度模块,因为这还包括必要的代码迁移。
附带说明一下,^
如果您这样做,它将只更新已安装软件包的次要版本npm update
。在这里阅读更多
推荐阅读
- servlets - 如何将 web.xml 中的上下文参数值外部化
- javascript - 如何处理具有优先级的事件委托?
- jsf - Primefaces 从支持 bean 开始 progressBar
- python - 如何修复 Python TypeError 和 AttributeError
- python - 如何将流文件传递给执行 Python 脚本并使用属性和 Nifi 变量来存储该文件?
- javascript - 如何根据传递的值从对象中查找键值
- vue.js - 无法使用 Vue 和 Vuetify 将模板文本添加到 v-textarea
- php - 压缩问题 Excel 使用 Maatwebsite
- c++ - 为什么 C++ 中的这个函数有效,但只有在打印到标准输出时才有效?
- html - 如何计算我的代码中的盒子大小?