I am a beginner and i am following this tutorial (https://www.youtube.com/watch?v=aOkAx1jZokc&list=PLIjdNHWULhPSZFDzQU6AnbVQNNo1NTRpd&index=5) on creating a task manager application with Angular. At around 26:00 we access listID via "params._listId" .In current version of Angular you can no longer access listId this way. In the comments of that video somebody suggests to use "params?.['_listId'] but that cause mongo db to crash and it gives me a httperror response :
ERROR HttpErrorResponse {
headers: _HttpHeaders {
normalizedNames: Map(0) {},
lazyUpdate: null,
headers: Map(0) {}
},
status: 0,
statusText: 'Unknown Error',
url: 'http://localhost:3000/lists',
ok: false,
name: 'HttpErrorResponse',
message: 'Http failure response for http://localhost:3000/lists: 0 Unknown Error',
error: ProgressEvent2 {
type: 'error',
target: XMLHttpRequest2 {
onloadstart: null,
onprogress: null,
onabort: null,
onerror: null,
onload: null,
ontimeout: null,
onloadend: null,
_listeners: [Object],
onreadystatechange: null,
_anonymous: undefined,
readyState: 4,
response: null,
responseText: '',
responseType: 'text',
responseURL: '',
status: 0,
statusText: '',
timeout: 0,
upload: [XMLHttpRequestUpload],
_method: 'GET',
_url: [Url],
_sync: false,
_headers: [Object],
_loweredHeaders: [Object],
_mimeOverride: null,
_request: null,
_response: null,
_responseParts: null,
_responseHeaders: null,
_aborting: null,
_error: null,
_loadedBytes: 0,
_totalBytes: 0,
_lengthComputable: false
},
currentTarget: XMLHttpRequest2 {
onloadstart: null,
onprogress: null,
onabort: null,
onerror: null,
onload: null,
ontimeout: null,
onloadend: null,
_listeners: [Object],
onreadystatechange: null,
_anonymous: undefined,
readyState: 4,
response: null,
responseText: '',
responseType: 'text',
responseURL: '',
status: 0,
statusText: '',
timeout: 0,
upload: [XMLHttpRequestUpload],
_method: 'GET',
_url: [Url],
_sync: false,
_headers: [Object],
_loweredHeaders: [Object],
_mimeOverride: null,
_request: null,
_response: null,
_responseParts: null,
_responseHeaders: null,
_aborting: null,
_error: null,
_loadedBytes: 0,
_totalBytes: 0,
_lengthComputable: false
},
lengthComputable: false,
loaded: 0,
total: 0
}
}
ERROR HttpErrorResponse {
headers: _HttpHeaders {
normalizedNames: Map(0) {},
lazyUpdate: null,
headers: Map(0) {}
},
status: 0,
statusText: 'Unknown Error',
url: 'http://localhost:3000/lists/undefined/tasks',
ok: false,
name: 'HttpErrorResponse',
message: 'Http failure response for http://localhost:3000/lists/undefined/tasks: 0 Unknown Error',
error: ProgressEvent2 {
type: 'error',
target: XMLHttpRequest2 {
onloadstart: null,
onprogress: null,
onabort: null,
onerror: null,
onload: null,
ontimeout: null,
onloadend: null,
_listeners: [Object],
onreadystatechange: null,
_anonymous: undefined,
readyState: 4,
response: null,
responseText: '',
responseType: 'text',
responseURL: '',
status: 0,
statusText: '',
timeout: 0,
upload: [XMLHttpRequestUpload],
_method: 'GET',
_url: [Url],
_sync: false,
_headers: [Object],
_loweredHeaders: [Object],
_mimeOverride: null,
_request: null,
_response: null,
_responseParts: null,
_responseHeaders: null,
_aborting: null,
_error: null,
_loadedBytes: 0,
_totalBytes: 0,
_lengthComputable: false
},
currentTarget: XMLHttpRequest2 {
onloadstart: null,
onprogress: null,
onabort: null,
onerror: null,
onload: null,
ontimeout: null,
onloadend: null,
_listeners: [Object],
onreadystatechange: null,
_anonymous: undefined,
readyState: 4,
response: null,
responseText: '',
responseType: 'text',
responseURL: '',
status: 0,
statusText: '',
timeout: 0,
upload: [XMLHttpRequestUpload],
_method: 'GET',
_url: [Url],
_sync: false,
_headers: [Object],
_loweredHeaders: [Object],
_mimeOverride: null,
_request: null,
_response: null,
_responseParts: null,
_responseHeaders: null,
_aborting: null,
_error: null,
_loadedBytes: 0,
_totalBytes: 0,
_lengthComputable: false
},
lengthComputable: false,
loaded: 0,
total: 0
}
}`
Here is my task-view.component.ts code:
import { Component, OnInit } from '@angular/core';
import { TaskService } from '../../task.service';
import {ActivatedRoute, Params} from '@angular/router';
@Component({
selector: 'app-task-view',
templateUrl: './task-view.component.html',
styleUrl: './task-view.component.scss'
})
export class TaskViewComponent implements OnInit {
lists!: any[];
tasks!: any[];
constructor(private taskService: TaskService, private route: ActivatedRoute) {}
ngOnInit() {
this.route.params.subscribe(
(params: Params) => {
console.log(params);
//this.taskService.getTasks(params?.['_listId']).subscribe((tasks: any) => {
//this.tasks = tasks;
//})
}
)
this.taskService.getLists().subscribe((lists: any) => {
this.lists = lists;
console.log(lists);
})
}
}
commented lines is what causes the issue. I tried changing "params._listId" to params?.['_listId'] but that causes mongo db to crash. I am sorry if i wasnt clear enough i am a beginner to these things.