I have a Microsoft SignalR service in my Angular project. Everything was working fine with SignalR version 3.1.5. However, after updating to version 6.0.11, I'm facing a peculiar issue. When a user scans a QR code, the URL in the browser changes, and it's expected to navigate the user to the 'result' component. Unfortunately, this navigation isn't happening even though the URL changes. I've double-checked my router setup, and it seems to be correct.
Here's the relevant part of my SignalR service where I handle the navigation:
this._hubConnection.on('PaymentCompleted', (statusData) => {
if (statusData && statusData.skipInfoMessage) {
window.location.href = statusData.redirectUrl;
}else {
if (statusData && statusData.success) {
this.router.navigate(['result'], { queryParams: { status: true } });
}else {
this.router.navigate(['result'], { queryParams: { status: false } });
}
}
this._hubConnection.stop().finally();
this._hubConnection = null;
});
From my app-routing.module.ts:
{
path: 'result',
component: ResultComponent
}
Upon upgrading SignalR, I encountered two errors when running my Angular project using npm start:
An issue with finally() in the SignalR service.
A node-related issue (I don't recall the exact error message).
To address these errors:
- I added es2018.promise to the lib in tsconfig.json.
- In tsconfig.app.json, under compilerOptions, I added 'node' to the types array.
Here's my package.json for reference:
{
"name": "angulartemplate",
"version": "0.0.0",
"scripts": {
"test": "jest --config ./src/jest.config.js",
"ng": "ng",
"start": "ng serve --port 4201 --public-host \"http://localhost:8811/Pay\"",
"build": "ng build",
"release": "ng build --prod",
"build:ssr": "ng run AngularTemplate:server:dev",
"lint": "ng lint",
"e2e": "ng e2e",
"extract-translations": "ngx-translate-extract --input ./src --output
./src/assets/i18n/*.json --clean --sort --format namespaced-json --marker _"
},
"private": true,
"dependencies": {
"@angular/animations": "^9.1.1",
"@angular/common": "^9.1.1",
"@angular/compiler": "^9.1.1",
"@angular/core": "^9.1.1",
"@angular/forms": "^9.1.1",
"@angular/platform-browser": "^9.1.1",
"@angular/platform-browser-dynamic": "^9.1.1",
"@angular/platform-server": "^9.1.1",
"@angular/router": "^9.1.1",
"@angular/service-worker": "^9.1.1",
"@microsoft/signalr": "^6.0.11",
"@nguniversal/module-map-ngfactory-loader": "^8.2.6",
"@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0",
"angular2-qrcode": "^2.0.3",
"aspnet-prerendering": "^3.0.1",
"core-js": "^3.6.5",
"oidc-client": "^1.10.1",
"rxjs": "^6.5.5",
"zone.js": "^0.10.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "0.901.9",
"@angular/cli": "9.1.13",
"@angular/compiler-cli": "9.1.1",
"@angular/language-service": "9.1.1",
"@biesbjerg/ngx-translate-extract": "7.0.3",
"@ngneat/spectator": "^5.9.0",
"@types/jest": "^25.2.3",
"@types/node": "^13.11.1",
"codelyzer": "^5.2.2",
"jasmine-core": "^4.1.1",
"jest": "^26.0.1",
"jest-preset-angular": "^8.2.0",
"karma": "^6.3.19",
"karma-chrome-launcher": "^3.1.1",
"karma-jasmine": "^5.0.1",
"ng-mocks": "^10.2.1",
"typescript": "3.7.5"
},
"optionalDependencies": {
"protractor": "~5.4.3",
"ts-node": "~8.8.2",
"tslint": "^6.1.1"
}
}
Additionally, my backend is built using .NET 6.
Apart from the above changes, I haven't made any other modifications to the project. I'm unsure what's causing the navigation issue post the SignalR upgrade. Any insights or suggestions would be greatly appreciated.