我收到此错误
Error: Uncaught (in promise): TypeError: Gy(...).storage is not a function
但是只有在我使用ng build --prod
构建和部署Angular项目时才可以。
当我使用ng build
进行部署或在localhost上运行时,我没有收到该错误,并且一切正常。
仅当我尝试路由到应用程序中的一个特定组件时,才会发生错误。我有一个“项目”列表,当我单击其中一个时,路由器应带我到“ ItemComponent”,其中显示了该项目的详细信息。当我单击该项目时,我可以在地址栏中看到新的路由瞬间闪烁(即/ list / 12345 / item / 67890),但随后它又变回原始路由(即/ list / 12345)并在路由器插座中什么也不显示,并且在我的控制台中显示错误(下面粘贴了完整的错误)。
一段时间以来,这一直是我应用程序中的组件,并且运行良好。这是我所知道的可能会对其产生影响的更改:
-我最近将Google AdSense代码添加到了我的html文件中,但是现在我已经将其完全删除,并以相同的错误重新部署。
-我安装了@angular/http
并添加了一个服务人员来处理请求,但是,我尚未实际添加任何实际发出http get请求的代码。 ItemComponent是使用此服务工作者的唯一组件。我确实从ItemComponent(我在其中导入服务,在其中注入它的位置,以及调用它的唯一方法)中注释掉了与此服务工作者相关的所有代码,并尝试构建,但仍然出错。
-由于出现错误,我还更新了几乎所有的npm软件包,以查看是否可以解决问题,但没有帮助。
-当我第一次开始遇到此错误时,它实际上说的是Error: Uncaught (in promise): TypeError: Xy(...).storage is not a function
而不是Gy,但现在似乎每次都说Gy。
-我在ngOnInit()的开始处添加了console.log(“ Item component starting ....”),它甚至没有出现在控制台中,所以好像还没有开始。
以下是一些可能与我相关的代码,但老实说,我不知道此错误可能指的是什么,所以请告诉我是否应该提供更多代码。
Chrome控制台中完全错误:
main-es2015.cae7ab5….js:1 ERROR Error: Uncaught (in promise): TypeError: Gy(...).storage is not a function
TypeError: Gy(...).storage is not a function
at main-es2015.cae7ab5….js:1
at a.invoke (polyfills-es2015.4d3…a2afc45cfd85b5.js:1)
at t.run (polyfills-es2015.4d3…a2afc45cfd85b5.js:1)
at hr.runOutsideAngular (main-es2015.cae7ab5….js:1)
at new <anonymous> (main-es2015.cae7ab5….js:1)
at main-es2015.cae7ab5….js:1
at Ui (main-es2015.cae7ab5….js:1)
at Mi (main-es2015.cae7ab5….js:1)
at main-es2015.cae7ab5….js:1
at Ui (main-es2015.cae7ab5….js:1)
at P (polyfills-es2015.4d3…a2afc45cfd85b5.js:1)
at P (polyfills-es2015.4d3…a2afc45cfd85b5.js:1)
at polyfills-es2015.4d3…a2afc45cfd85b5.js:1
at a.invokeTask (polyfills-es2015.4d3…a2afc45cfd85b5.js:1)
at Object.onInvokeTask (main-es2015.cae7ab5….js:1)
at a.invokeTask (polyfills-es2015.4d3…a2afc45cfd85b5.js:1)
at t.runTask (polyfills-es2015.4d3…a2afc45cfd85b5.js:1)
at _ (polyfills-es2015.4d3…a2afc45cfd85b5.js:1)
at c.invokeTask [as invoke] (polyfills-es2015.4d3…a2afc45cfd85b5.js:1)
at y (polyfills-es2015.4d3…a2afc45cfd85b5.js:1)
Ut @ main-es2015.cae7ab5….js:1
我的package.json:
{
"name": "presently",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^8.1.2",
"@angular/common": "^8.1.2",
"@angular/compiler": "^8.1.2",
"@angular/core": "^8.1.2",
"@angular/fire": "^5.2.1",
"@angular/forms": "^8.1.2",
"@angular/http": "^7.2.15",
"@angular/platform-browser": "^8.1.2",
"@angular/platform-browser-dynamic": "^8.1.2",
"@angular/router": "^8.1.2",
"@ng-bootstrap/ng-bootstrap": "^4.2.1",
"@types/fs-extra": "^8.0.0",
"@types/jquery": "^3.3.30",
"@types/sharp": "^0.22.2",
"bootstrap": "^4.3.1",
"core-js": "^3.1.4",
"firebase": "^6.3.1",
"firebase-admin": "^8.2.0",
"firebase-tools": "^7.1.1",
"firebaseui": "^4.1.0",
"jquery": "^3.4.1",
"material-design-icons": "^3.0.1",
"node": "^12.6.0",
"popper.js": "^1.15.0",
"rxjs": "~6.4.0",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.801.2",
"@angular/cli": "^8.1.2",
"@angular/compiler-cli": "^8.1.2",
"@angular/language-service": "^8.1.2",
"@types/jasmine": "^3.3.14",
"@types/jasminewd2": "^2.0.6",
"@types/node": "^12.6.8",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "^3.4.5"
}
}
我的tsconfig.json:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types", "./typings.d.ts"
],
"lib": [
"es2018",
"dom"
]
}
}
一小部分是我的item.component.ts:
import { ProductApiService } from '../../services/product-api.service';
.
.
.
constructor(
private productApiService: ProductApiService,
...
) { }
.
.
.
ngOnInit() {
console.log("item component starting...........")
...
}
.
.
.
fillProductByAPI() { //called by clicking a button in html, so not started automatically
if(this.editedItem.url !== null && this.editedItem.url !== '') {
this.productApiService.getProductDetails(this.editedItem.url);
}
}
我的产品-api.service.ts:
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class ProductApiService {
constructor(private http: HttpClient) { }
getProductDetails(url: string) {
//These are all just strings...
this.apiRequestUrl = this.apiEndpoint
+ this.apiTokenArgument
+ this.apiOptionalArguments
+ this.apiUrlArgument
+ url;
console.log(this.apiRequestUrl);
}
}