Develop Reference

ERROR [ExceptionHandler] Cannot read property 'switchToHttp' of undefined TypeError: Cannot read property 'switchToHttp' of undefined

what I am trying to do?
I am trying to implement a logger to log queries from TypeOrm and also add some information to the logs to identify the user
how I am trying to achieve this?
I have implemented the Logger interface from TypeOrm and used Winston for logging.
To identify the user I want to extract the JWT token for the particular request that is executing the query, from which I will have the user.id key.
To get the JWT I am using the ExecutionContext class provided by NestJs to get the request body and then extract the JWT token.
what issue I am facing?
I have given the implementation below and the error for it, I can see that the execution context is undefined and I am not sure how to pass the value to it, I am new to nest, and if I am not wrong, nest takes cares of the assignment of the ExecutionContext class.
Also, I am open to suggestions to implement it in a different way.
The Error:
[Nest] 11968 - ERROR [TypeOrmModule] Unable to connect to the database. Retrying (9)...
TypeError: Cannot read property 'switchToHttp' of undefined
The Implementation:
/* eslint-disable prettier/prettier */
import { ExecutionContext } from '#nestjs/common';
import { Logger, QueryRunner } from 'typeorm';
import { createLogger, Logger as winstonLogger, transports, format } from 'winston';
import { Format } from 'LogForm';
import { Request } from 'express';
export class CustomLogger implements Logger {
private readonly queryLogger: winstonLogger;
private readonly winstonFormat: Format;
private readonly ctt: ExecutionContext;
healthcheck2(ctx: ExecutionContext): any {
const payload = ctx.switchToHttp().getRequest<Request>();
console.log(payload);
}
constructor(){
this.winstonFormat= format.printf(({message})=> {
return `${message}`
});
const options = (filename: string) => ({
transports: [new transports.Console({level:'debug'})],
format: this.winstonFormat
});
this.queryLogger = createLogger(options('query.log'))
}
logQuery(query: string, _parameters?: any[], _queryRunner?: QueryRunner) {
this.healthcheck2(this.ctt);
this.queryLogger.log({
level: 'debug',
message: 'query logged',
timestamp: Date.now(),
label: 'query'
})
}
logQueryError(error: string | Error, query: string, parameters?: any[], queryRunner?: QueryRunner) {
console.log('query error');
}
logQuerySlow(time: number, query: string, parameters?: any[], queryRunner?: QueryRunner) {
console.log('other error');
}
logSchemaBuild(message: string, queryRunner?: QueryRunner) {
console.log('schema build');
}
logMigration(message: string, queryRunner?: QueryRunner) {
console.log('other error');
}
log(level: 'log' | 'info' | 'warn', message: any, queryRunner?: QueryRunner) {
console.log('normal log')
}
}

core.mjs:6509 ERROR TypeError: Cannot read properties of null (reading 'extras')

I am getting the following error
core.mjs:6509 ERROR TypeError: Cannot read properties of null (reading 'extras')
from the below line of code
constructor(protected authService: IAuthenticationService,
private router : Router,private apis: ApisService,
private route: ActivatedRoute,private messageBar: MessageBarService) {
let routeState = this.router.getCurrentNavigation().extras.state;
this.rowData = routeState.rowData;
this.action = routeState.action;
}
Direct url is
http://localhost:9090/#/landing/apicurio/workflow/task
Error is when i click on my submit button (Logic below), i am getting right data in rowData
public goToWorkflowTask(action:string,rowData:any): void {
this.router.navigateByUrl('workflow/task', { state: { rowData: rowData,action:action } });
}
routing module defined the path as like below :
{path:"workflow/task",component:WorkflowTaskComponent},

Cannot find a differ supporting object '[object Object] in Angular 8

I'm trying to get spotify API from current user's playlists
I have it in my console but I tried to put it into html and i'm getting this error:
ERROR Error: Cannot find a differ supporting object '[object Object]'
of type 'object'. NgFor only supports binding to Iterables such as
Arrays.
at NgForOf.ngDoCheck (common.js:4841)
at checkAndUpdateDirectiveInline (core.js:31913)
at checkAndUpdateNodeInline (core.js:44367)
at checkAndUpdateNode (core.js:44306)
at debugCheckAndUpdateNode (core.js:45328)
at debugCheckDirectivesFn (core.js:45271)
at Object.eval [as updateDirectives] (PlaylistsComponent.html:2)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:45259)
at checkAndUpdateView (core.js:44271)
at callViewAction (core.js:44637)
Here's my user.service.ts:
public getUserPlaylists(): Observable<any> {
const endpoint = environment.spotifyApi.host + "me/playlists";
const httpOptions = {
headers: new HttpHeaders({
Authorization: `Bearer ${this.accessToken}`,
}),
};
return this.http.get(endpoint, httpOptions);
}
Here's my playlists.component.ts:
playlists: any;
constructor(private router: Router, private userService: UserService) {}
ngOnInit() {
this.getPlaylists();
}
getPlaylists() {
let observable = this.userService.getUserPlaylists();
observable.subscribe((data) => {
this.playlists = data;
console.log(this.playlists);
});
}
and here is my html:
<div class="playlists text-center">
<div class="test" *ngFor="let playlist of playlists">
{{playlist.name}}
</div>
</div>
Update console from browser:
Object
href: "https://api.spotify.com/v1/users/12164174667/playlists?offset=0&limit=20"
items: Array(2)
0: {collaborative: false, description: "", external_urls: {…}, href: "https://api.spotify.com/v1/playlists/0tNJ7TiGOqqbiFratEY8WD", id: "0tNJ7TiGOqqbiFratEY8WD", …}
1: {collaborative: false, description: "Songs I'm currrently listening to; updated every 2 weeks.", external_urls: {…}, href: "https://api.spotify.com/v1/playlists/24G8qVxmH4Sg6WfsaRAumW", id: "24G8qVxmH4Sg6WfsaRAumW", …}
length: 2
__proto__: Array(0)
limit: 20
next: null
offset: 0
previous: null
total: 2
__proto__: Object

As you can clearly see in the logs that ngFor expects Iterables. Instead of assigning full object just assign items
Upate your method like this:
getPlaylists() {
let observable = this.userService.getUserPlaylists();
observable.subscribe((data) => {
this.playlists = data.items;
console.log(this.playlists);
});
}

I went through Spotify API and found what it returns in playlist object. in external_urls node you can get required playlist url. then you can iterate this.playlists.
getPlaylists() {
let observable = this.userService.getUserPlaylists();
observable.subscribe((res) => {
this.playlists = res.external_urls;
console.log(this.playlists);
});
}

Calling ngOnInit twice by getting the dossier id

I have a anuglar 8 application. And I have a parent child route relationship for creating a new item. But when the page is loaded where you can create a new item. the id of the parent component is first set, but the second time when it comes in ngOninit it is null.
So this is the route relationship:
{
path: ':dossierId',
component: ViewComponent, children: [
{ path: 'item/new/:dossierItemType', component: ItemComponent}
],
resolve: {
dossier: DossierResolver,
dossierItems: DossierItemsResolver
}
},
and this is the ite.component.ts:
export class ItemComponent implements OnInit {
itemTypes = DossierItemTypeDto;
formBuilder = new FormBuilder();
isNew = false;
editItemForm: FormGroup;
dossierItemId: string;
item: DossierItemDto;
dossierItems: DossierItemDto[];
dossier: DossierDto;
globalErrors: ValidationErrors;
constructor(
private dossierService: DossierService,
private route: ActivatedRoute,
private router: Router,
private errorProcessor: ErrorProcessor
) {
//this.dossier.id = this.route.snapshot.params.dossierId;
this.dossier = this.route.snapshot.data.dossier;
this.dossierItemId = this.route.snapshot.params.dossierItemId;
this.isNew = this.dossierItemId === undefined;
this.dossierItems = this.route.snapshot.data.dossierItems;
if (this.isNew) {
this.item = {
title: '',
itemType: this.route.snapshot.params.dossierItemType,
date: moment().format('Y-MM-DD'),
createdAt: moment().format('Y-MM-DD'),
body: ''
};
} else {
this.item = this.dossierItems.find(i => i.id === this.dossierItemId);
}
}
ngOnInit(): void {
this.route.params.subscribe((params: Params) => {
this.dossier.id = params.dossierId;
});
}
So when I first look at this line:
I see the id:
06637e72-8915-4735-9400-4ef7705194ea
but when I debug in google chrome, it goes again in the ngOninit and then the id is null.
this is the url:
http://localhost:4200/en/dossier/06637e72-8915-4735-9400-4ef7705194ea/item/new/Interview
And I get this error:
core.js:6406 ERROR TypeError: Cannot set property 'id' of undefined
at SafeSubscriber._next (item.component.ts:58)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
at SafeSubscriber.next (Subscriber.js:122)
at Subscriber._next (Subscriber.js:72)
at Subscriber.next (Subscriber.js:49)
then I get even more errors:
Interview:9 GET https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap net::ERR_NAME_NOT_RESOLVED
Interview:10 GET https://fonts.googleapis.com/icon?family=Material+Icons net::ERR_NAME_NOT_RESOLVED
core.js:6406 ERROR TypeError: Cannot set property 'id' of undefined
at SafeSubscriber._next (item.component.ts:58)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
at SafeSubscriber.next (Subscriber.js:122)
at Subscriber._next (Subscriber.js:72)
at Subscriber.next (Subscriber.js:49)
at BehaviorSubject._subscribe (BehaviorSubject.js:14)
at BehaviorSubject._trySubscribe (Observable.js:42)
at BehaviorSubject._trySubscribe (Subject.js:81)
at BehaviorSubject.subscribe (Observable.js:28)
at ItemComponent.ngOnInit (item.component.ts:57)
So the second time params is like this:
this.dossier.id = params.dossierId;
dossierItemType: "Interview"
this is the save method:
save(): void {
const form = this.editItemForm;
const dossierItemDto: DossierItemPostDto = {
title: form.controls.title.value,
itemType: form.controls.itemType.value,
date: (form.controls.date.value as moment.Moment).format('Y-MM-DD'),
body: form.controls.body.value
};
form.disable();
if (!this.isNew) {
this.dossierService.updateDossierItemById(this.dossier.id, this.item.id, dossierItemDto).subscribe(
item => {
this.item = item;
this.sortDossierItems();
form.enable();
form.markAsPristine();
this.errorProcessor.openSuccessSnackBar($localize`Item is saved`);
},
error => this.handleError(error)
);
} else {
this.dossierService.newDossierItem(this.dossier.id, dossierItemDto).subscribe(
item => {
this.item = item;
this.dossierItems.unshift(item);
this.sortDossierItems();
this.isNew = false;
form.enable();
form.markAsPristine();
this.errorProcessor.openSuccessSnackBar($localize`Item is saved`);
},
error => this.handleError(error)
);
}
}
this.dossierService.newDossierItem(this.dossier.id,
this is now also undefined
this error:
core.js:6406 ERROR Error: Required parameter dossierId was null or undefined when calling newDossierItem.
at DossierService.newDossierItem (dossier.service.ts:359)
at ItemComponent.save (item.component.ts:97)
Because A item is connected with a dossierId

So this is the solution:
#NgModule({
imports: [RouterModule.forRoot(routes, {
paramsInheritanceStrategy: 'always'
})],
exports: [RouterModule]
})
export class AppRoutingModule { }

Ionic 2:: Unusual TypeError retrieving a property from JSON in angular

i created a provider in my ionic project to retrieve the user object from the storage and heres my code
import { Injectable } from '#angular/core';
import { Storage } from '#ionic/storage';
#Injectable()
export class ApiProvider {
public user: any;
constructor(
public storage: Storage
) {}
getStoredUser(){
this.storage.get('user').then(
data => {
this.user = data;
console.log(data);
}
);
return this.user;
}
when i console log the user object from the getStoredUser() function,
this is what i get
{
authcode: "USR_65267H4390"
church_id: 2
email: "test#gmail.com"
fullname: ""An**a A***e""
id: 55
phone: "08*****7"
skills: "Football, chess, scrabble"
}
the json data logs properly, but then when i try to do this on a different component
export class HomePage {
obj: any;
userObj:any = {
name:'',
email:'',
phone:'',
skills:'',
unit:'',
church_id:2 //hardcoded on every request...
};
constructor(
public navCtrl: NavController,
public api: ApiProvider,
public storage: Storage
) {}
ngOnInit():void{
this.obj = this.api.getStoredUser();
//console.log(this.obj) - outputs the object above, no errors..
//if(this.obj.length < 1) - gives me error too.. i've tried everything
if(this.obj !== null){ //------------ this line gives me error.
this.userObj = {
name: this.obj.fullname, // ------- this property gives me error.
email: this.obj.email,
phone: this.obj.phone,
skills: this.obj.skills,
unit:'',
church_id: this.obj.church_id
}
} else{
// do something else.
}
}
This is the error i get when i try to read fullname...
" Uncaught(in promise): TypeError: Cannot read property
'fullname' of undefined TypeError: at Homepage.webpack.jsonp
and this is the error i get when i try to read the length of this.obj
" Uncaught(in promise): TypeError: Cannot read property
'length' of undefined TypeError: at Homepage.webpack.jsonp...
i have tried everything and i dont know what to do.. the json object is constructed properly, i need help.

the method getStoredUser returns a promise and you are trying to access it's value immediately.
You should access the return object after the promise is resolved using the then method:
this.api.getStoredUser().then(obj => {
this.userObj = {
name: obj.fullname, // ------- this property gives me error.
email: obj.email,
phone: obj.phone,
skills: obj.skills,
unit:'',
church_id: obj.church_id
}
});
Or use async\await if you are ES7 compatible:
this.obj = await this.api.getStoredUser();
//if(this.obj.length < 1) - gives me error too.. i've tried everything
if(this.obj !== null){ //------------ this line gives me error.
this.userObj = {
name: this.obj.fullname, // ------- this property gives me error.
email: this.obj.email,
phone: this.obj.phone,
skills: this.obj.skills,
unit:'',
church_id: this.obj.church_id
}
}