How to capture SignalR Response on Angular 6 - angular6

I am struggling to listen to the message I am getting from a .net application using signalR on angular 6 application.
In angular.json file I have added /node_modules/signalr/jquery.signalR.min.js & jquery
Package.json includes
"dependencies": {
"#angular/animations": "^6.0.0",
"#angular/cdk": "^6.3.1",
"#angular/common": "^6.0.0",
"#angular/compiler": "^6.0.0",
"#angular/core": "^6.0.0",
"#angular/flex-layout": "^6.0.0-beta.16",
"#angular/forms": "^6.0.0",
"#angular/http": "^6.0.0",
"#angular/material": "^6.3.1",
"#angular/platform-browser": "^6.0.0",
"#angular/platform-browser-dynamic": "^6.0.0",
"#angular/router": "^6.0.0",
"#fortawesome/fontawesome-free-webfonts": "^1.0.9",
"#ng-bootstrap/ng-bootstrap": "^3.2.2",
"#ngrx/effects": "^6.0.0",
"#ngrx/store": "^6.0.0",
"#types/jquery": "^3.3.31",
"#types/signalr": "^2.2.35",
"ag-grid-angular": "^20.2.0",
"ag-grid-community": "^20.2.0",
"bootstrap": "^4.1.1",
"browser-detect": "^0.2.27",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"jquery": "^3.3.1",
"material-icons": "^0.2.3",
"ngx-toastr": "^10.0.4",
"popper.js": "^1.14.3",
"rxjs": "6.0.0",
"signalr": "^2.4.1",
"uuid": "^3.1.0",
"web-animations-js": "^2.2.5",
"zone.js": "^0.8.20"
}
Service file:
import { Injectable } from '#angular/core';
declare var $: any;
#Injectable({
providedIn: 'root'
})
export class SignalRServiceService {
private connection: any;
private proxy: any;
private url = 'https://localhost:8090';
constructor() {}
public startConnection(): void {
this.connection = $.hubConnection(this.url);
this.proxy = this.connection.createHubProxy('testhub');
// connection starts
this.connection.start().done((data: any) => {
console.log('Connected to Hub');
}).catch((error: any) => {
console.log('Hub error -> ' + error);
});
this.connection.proxies.testHub.on('databaseUpdateNotification', () => {
console.log('captured response');
});
}
}
I am able to see the 'Connected to Hub' message in console. I believe there is no connection issue. When .net some message broadcaster broadcasting I am not able to capture the response.
How to capture the response here?
Appreciate all your help....
Thanks a ton

On your method change to:
this.connection.proxies.testHub.on('databaseUpdateNotification', (data) => {
console.log(data);
});

Related

GET call, Invalid JSON error when Updating to Angular 9

I am working to update my app to Angular 9 CLI and all of my NPM packages to the latest versions. But when I try to make a GET call to load the data on page load the page breaks with a 400 error returned from the server. This endpoint call breaks:
#Effect()
getAllData$ = this.action$.pipe(
ofType<DataAction>(DATA_ACTION_TYPES.GET_ALL_DATA),
switchMap(() => {
return this.dataservice.getAllData().pipe(
map(data => {
const payload = new DataPayload();
payload.data = data;
return new GottenAllDataAction(data);
})
);
})
);
public getAllData(): Observable<any[]> {
// code hits the dataEndpoint
return this.httpClient
.get(this.dataEndpoint)
.pipe(map(response => plainToClass(DataV2, response as Object[], { groups: ['get'] })));
}
In the network tab I get a 400 error with this response:
Here is the start of my 400 console error from the GET call:
Here is my package.json:
"dependencies": {
"#angular/animations": "9.1.6",
"#angular/cdk": "9.2.3",
"#angular/common": "9.1.6",
"#angular/compiler": "9.1.6",
"#angular/core": "9.1.6",
"#angular/flex-layout": "~9.0.0-beta.29",
"#angular/forms": "9.1.6",
"#angular/material": "9.2.3",
"#angular/platform-browser": "9.1.6",
"#angular/platform-browser-dynamic": "9.1.6",
"#angular/router": "9.1.6",
"#auth0/angular-jwt": "^4.0.0",
"#ngrx/effects": "~9.1.2",
"#ngrx/router-store": "~9.1.2",
"#ngrx/store": "~9.1.2",
"#ngrx/store-devtools": "~9.1.2",
"#nrwl/nx": "6.3.1",
"class-transformer": "0.1.9",
"classlist.js": "^1.1.20150312",
"core-js": "~3.6.5",
"es6-shim": "^0.35.5",
"file-saver": "^2.0.2",
"hammerjs": "2.0.8",
"highcharts": "~8.1.0",
"moment": "~2.25.3",
"ng2-file-upload": "^1.4.0",
"ngx-toastr": "^12.0.1",
"ramda": "^0.27.0",
"reflect-metadata": "~0.1.13",
"rxjs": "~6.5.5",
"rxjs-compat": "~6.5.5",
"tachyons-sass": "^4.9.5",
"tslib": "^1.11.2",
"typedjson": "^1.5.1",
"zone.js": "~0.10.3"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.901.5",
"#angular-devkit/core": "9.1.5",
"#angular-devkit/schematics": "9.1.5",
"#angular/cli": "9.1.5",
"#angular/compiler-cli": "9.1.6",
"#angular/language-service": "9.1.6",
"#nrwl/schematics": "8.12.11",
"#schematics/angular": "9.1.3",
"#types/highcharts": "5.0.4",
"#types/jasmine": "^3.5.10",
"#types/jasminewd2": "~2.0.8",
"#types/node": "^13.13.4",
"codelyzer": "^5.2.2",
"fibers": "^3.1.0",
"html-webpack-plugin": "^4.2.1",
"jasmine-core": "^3.5.0",
"jasmine-marbles": "0.3.1",
"jasmine-spec-reporter": "^5.0.2",
"karma": "~5.0.5",
"karma-chrome-launcher": "^3.1.0",
"karma-cli": "^2.0.0",
"karma-coverage-istanbul-reporter": "^3.0.2",
"karma-jasmine": "^3.1.1",
"karma-jasmine-html-reporter": "^1.5.3",
"ng-mocks": "^9.3.0",
"node-sass": "^4.14.0",
"prettier": "^1.18.2",
"protractor": "^5.4.4",
"remote-redux-devtools": "^0.5.16",
"ts-node": "~8.10.1",
"tslint": "~6.1.2",
"typescript": "~3.8.3"
}
Everything works fine in Angular 8. This error only occurs on my current branch where I am trying to update to the latest Angular 9. But I'm not sure how a front end issue could be causing the error I'm seeing. Could this be a problem with one of the NPM package updates?
Any help is appreciated.
Try these steps:
Delete node-modules folder C:\Users\USER\AppData\Roaming\npm\node_modules
Open windows powershell as admin
npm cache clean --force
npm install -g npm#latest
npm uninstall -g angular-cli
npm install -g #angular/cli#latest

WARNING in ./node_modules/pdfjs-dist/build/pdf.js Module not found: Error: Can't resolve 'zlib' in 'ui_angular_6\node_modules\pdfjs-dist\build'

I was trying to migrate my angular 5 code to angular 6.
After doing npm start getting the below problem
npm start
WARNING in ./node_modules/pdfjs-dist/build/pdf.js
Module not found: Error: Can't resolve 'zlib' in '\ui_angular_6\node_modules\pdfjs-dist\build'
Package.json
"dependencies": {
"#angular/animations": "6.0.2",
"#angular/common": "6.0.2",
"#angular/compiler": "6.0.2",
"#angular/core": "6.0.2",
"#angular/flex-layout": "^6.0.0-beta.15",
"#angular/forms": "6.0.2",
"#angular/http": "6.0.2",
"#angular/platform-browser": "6.0.2",
"#angular/platform-browser-dynamic": "6.0.2",
"#angular/router": "6.0.2",
"#ng-bootstrap/ng-bootstrap": "^1.1.2",
"angular-font-awesome": "^3.1.2",
"body-parser": "^1.18.2",
"bootstrap": "^4.1.0",
"core-js": "^2.4.1",
"elasticsearch": "^15.1.1",
"elasticsearch-browser": "^15.1.1",
"express": "^4.16.3",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"ng2-pdf-viewer": "^5.1.1",
"npm": "^6.0.1",
"popper.js": "^1.14.3",
"rxjs": "^6.1.0",
"rxjs-compat": "^6.1.0",
"underscore": "^1.8.3",
"zone.js": "^0.8.26"
}
Please help me to fix this issue.
Try by placing this in your package.json file:
"browser": {
"zlib":false }
There was a fix for this issue in the following PR https://github.com/mozilla/pdf.js/pull/9924 (merged 12 days ago). You may want upgrading to the latest "pdfjs-dist" to fix the issue.

"Live Broadcast" message on HTML5 audio player in Safari - Angular 6 Progressive Web App

I have a Progressive Web App in Angular 6 that includes an audio HTML5 tag to play some sounds. I deploy it to Firebase.
The problem I have is in Safari Browser (Mobile and Desktop, latest versions). Somehow the Service Worker makes that a "Live Broadcast"
message appears on the rendered audio tag when you try to play the sound (or even before you try to click on play button).
I don't get this "error" in Chrome, only in Safari.
I published an example app so that you can see the problem (remember
to visit the app from a Safari browser).
Example Firebase App
In this repository you can find the code of the example app.
Example App code repository
The "Live broadcast" message is something like this: Live Broadcast
message in Safari
I need that users can play the audio without getting that "Live Broadcast" text on the HTML5 audio player. I think it is something related with the Service Worker configuration, I'm not sure though. It might be an Angular problem too.
Any help would be really appreciated.
Details
Versions:
Angular version: 6.0.1
angular/cli version: 6.0.1
Node version: 8.11.1
npm version: 5.6.0
To build the app I use: (If I don't use --prod option I don't get the "Live Broadcast" message because the service worker is not
included when you don't use it)
ng build --prod
app.component.html
<div height="300px;">
<audio controls #audio123 controlsList="nodownload"
src="https://firebasestorage.googleapis.com/v0/b/angular-ng-build-
safari.appspot.com/o/-%20GIN%20-%20Testing%20Lakewood%20M31-CP%20(online-audio-converter.com).mp3?alt=media&token=1ba5f53e-58d3-43fe-b058-a6de05a51c29" preload="metadata">
</audio>
</div>
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { ServiceWorkerModule } from '#angular/service-worker';
import { environment } from '../environments/environment';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
package.json
{
"name": "ng-build-sw-problem",
"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": "^6.0.0",
"#angular/common": "^6.0.0",
"#angular/compiler": "^6.0.0",
"#angular/core": "^6.0.0",
"#angular/forms": "^6.0.0",
"#angular/http": "^6.0.0",
"#angular/platform-browser": "^6.0.0",
"#angular/platform-browser-dynamic": "^6.0.0",
"#angular/pwa": "^0.6.1",
"#angular/router": "^6.0.0",
"core-js": "^2.5.4",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26",
"#angular/service-worker": "^6.0.0"
},
"devDependencies": {
"#angular/compiler-cli": "^6.0.0",
"#angular-devkit/build-angular": "~0.6.1",
"typescript": "~2.7.2",
"#angular/cli": "~6.0.1",
"#angular/language-service": "^6.0.0",
"#types/jasmine": "~2.8.6",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~1.4.2",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1"
}
}
ngsw-conf.json
{
"index": "/index.html",
"assetGroups": [{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**"
]
}
}]
}

Issue with loading third party library in Angular 6

Issue with loading third party library which is dependence on another third party library. In my case, i'm using bootstrap(v3.3.7) which is required JQuery. I included these libraries as per angular suggested way and successfully compile the application, if run it in browser i got a console error.
Versions
"dependencies": {
"#angular/animations": "^6.0.0",
"#angular/common": "^6.0.0",
"#angular/compiler": "^6.0.0",
"#angular/core": "^6.0.0",
"#angular/forms": "^6.0.0",
"#angular/http": "^6.0.0",
"#angular/platform-browser": "^6.0.0",
"#angular/platform-browser-dynamic": "^6.0.0",
"#angular/router": "^6.0.0",
"#types/bootstrap": "^3.3.33",
"#types/jquery": "^3.3.1",
"bootstrap": "^3.3.7",
"core-js": "^2.5.4",
"jquery": "3.3.1",
"malihu-custom-scrollbar-plugin": "3.1.5",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26" }
Sample code and console error
app.component.ts
import { Component, ElementRef, OnInit, AfterViewInit } from
'#angular/core';
import * as $ from 'jquery';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app';
constructor(private element: ElementRef){ }
ngOnInit() {
$('.dropdown-toggle').dropdown();
}
}
angular.json
"options": {
"outputPath": "dist/ang6",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
{ "input": "node_modules/bootstrap/dist/css/bootstrap.min.css" },
{ "input": "src/styles.css" }
],
"scripts": [
{ "input": "node_modules/jquery/dist/jquery.js" },
{ "input": "node_modules/bootstrap/dist/js/bootstrap.min.js" }
]
},
console error
error_message_pic
Is angular 6 changed the way of load/include the third party library files? Can anyone please help me to resolve this issue?

Angular2 bundle.js:2 Uncaught ReferenceError: google is not defined

I use the 2.0.0-rc.4 version of Angular. I have always "google is not defined" problem in my console
console error
bundle.js:2 Uncaught ReferenceError: google is not defined
With Angular Beta without gulp, I have not had the problem.
typings folder content
my ** gulpfile.js** file
var gulp = require('gulp');
gulp.task('bundle', function() {
var SystemBuilder = require('systemjs-builder');
var builder = new SystemBuilder();
builder.loadConfig('./system.config.js')
.then(function(){
var outputFile = 'dist/bundle.js';
return builder.buildStatic('app', outputFile, {
minify: true,
mangle: true,
rollup: true
});
})
.then(function(){
console.log('bundle built successfully!');
});
});
package.json
{
"name": "angular2-poc",
"scripts": {
"clean": "gulp clean",
"compile": "gulp compile",
"build": "gulp build",
"postinstall": "typings install",
"test": "tsc && karma start",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
"typings": "typings"
},
"devDependencies": {
"concurrently": "^1.0.0",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.0",
"gulp-jshint": "^2.0.1",
"gulp-minify": "0.0.11",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.3.1",
"gulp-uglify": "^1.5.3",
"gulp-util": "^3.0.7",
"jasmine-core": "~2.3.4",
"jshint": "^2.9.2",
"karma": "~0.13.15",
"karma-jasmine": "~0.3.6",
"karma-phantomjs2-launcher": "^0.3.2",
"lite-server": "2.0.1",
"path": "^0.12.7",
"systemjs-builder": "^0.15.16",
"traceur": "^0.0.91",
"typescript": "^1.7.3",
"yargs": "^4.7.0"
},
"dependencies": {
"#angular/common": "2.0.0-rc.4",
"#angular/compiler": "2.0.0-rc.4",
"#angular/core": "2.0.0-rc.4",
"#angular/http": "2.0.0-rc.4",
"#angular/platform-browser": "2.0.0-rc.4",
"#angular/platform-browser-dynamic": "2.0.0-rc.4",
"#angular/router": "3.0.0-beta.1",
"#angular/upgrade": "2.0.0-rc.4",
"#angular/forms": "0.2.0",
"es6-shim": "^0.35.0",
"events": "^1.0.2",
"fbjs": "^0.3.1",
"flux": "^2.1.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.27",
"zone.js": "^0.6.12"
}
}
My tsd.json file
{
"version": "v4",
"repo": "borisyankov/DefinitelyTyped",
"ref": "master",
"path": "typings",
"bundle": "typings/tsd.d.ts",
"installed": {
"googlemaps/google.maps.d.ts": {
"commit": "de82425735f84a10b43921ae4b1d085b3752a626"
}
}
}
Thanks you
Try loading these 2 files from your index.html
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
For more details, refer this - https://developers.google.com/chart/interactive/docs/basic_load_libs
See if this helps.