Angular 6 Error Handling not showing toasts
I am using the code below to catch errors in my small Angular 6 app... I am catching the errors, I am showing info in the console the problem is that the toasts do not show unless I click somewhere in the application, they don't show up all by themselves. I am using the ToastrService in other parts of the application and whenever I call it like I do it here it shows toats without having to click on anything.
Any idea what might be causing this behaviour?
import { Injectable, ErrorHandler, Injector } from '@angular/core';
import { Router } from '@angular/router';
import { HttpErrorResponse } from '@angular/common/http';
import { ToastrService } from 'ngx-toastr';
import { AppSettings } from '../../app.settings';
@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
constructor(private injector: Injector) {}
public handleError(error: any) {
const router = this.injector.get(Router);
const settings = this.injector.get(AppSettings)
const toastr = this.injector.get(ToastrService);
console.log(`Request URL: ${router.url}`);
console.log(error);
if (error instanceof HttpErrorResponse) {
console.log("it is");
if (error.status === 401) {
router.navigate(['/login']);
settings.settings.setLoadingSpinner(false);
toastr.error('Logged in user no longer authenticated on server.', 'Unable to connect to server');
} else if (error.status === 404) {
console.log("it is 404");
toastr.error('Unable to connect to server. Missing or wrong URL, please try again', 'Unable to connect to server');
settings.settings.setLoadingSpinner(false);
} else if (error.status === 0) {
toastr.error('Server appears to be temporary unavailable', 'Unable to connect to server');
settings.settings.setLoadingSpinner(false);
} else if (error.status === 500) {
toastr.error('Server appears to be temporary unavailable', 'Unable to connect to server');
settings.settings.setLoadingSpinner(false);
}
} else {
console.error(error);
toastr.error('An error has occured', 'Sorry');
}
}
}
I have added the provider in the module also to use this class as error handler.
javascript angular typescript angular-toastr
add a comment |
I am using the code below to catch errors in my small Angular 6 app... I am catching the errors, I am showing info in the console the problem is that the toasts do not show unless I click somewhere in the application, they don't show up all by themselves. I am using the ToastrService in other parts of the application and whenever I call it like I do it here it shows toats without having to click on anything.
Any idea what might be causing this behaviour?
import { Injectable, ErrorHandler, Injector } from '@angular/core';
import { Router } from '@angular/router';
import { HttpErrorResponse } from '@angular/common/http';
import { ToastrService } from 'ngx-toastr';
import { AppSettings } from '../../app.settings';
@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
constructor(private injector: Injector) {}
public handleError(error: any) {
const router = this.injector.get(Router);
const settings = this.injector.get(AppSettings)
const toastr = this.injector.get(ToastrService);
console.log(`Request URL: ${router.url}`);
console.log(error);
if (error instanceof HttpErrorResponse) {
console.log("it is");
if (error.status === 401) {
router.navigate(['/login']);
settings.settings.setLoadingSpinner(false);
toastr.error('Logged in user no longer authenticated on server.', 'Unable to connect to server');
} else if (error.status === 404) {
console.log("it is 404");
toastr.error('Unable to connect to server. Missing or wrong URL, please try again', 'Unable to connect to server');
settings.settings.setLoadingSpinner(false);
} else if (error.status === 0) {
toastr.error('Server appears to be temporary unavailable', 'Unable to connect to server');
settings.settings.setLoadingSpinner(false);
} else if (error.status === 500) {
toastr.error('Server appears to be temporary unavailable', 'Unable to connect to server');
settings.settings.setLoadingSpinner(false);
}
} else {
console.error(error);
toastr.error('An error has occured', 'Sorry');
}
}
}
I have added the provider in the module also to use this class as error handler.
javascript angular typescript angular-toastr
It would be great if you could provide a Minimal, Complete, and Verifiable example. You can use StackBlitz to create one.
– SiddAjmera
Nov 23 '18 at 8:01
add a comment |
I am using the code below to catch errors in my small Angular 6 app... I am catching the errors, I am showing info in the console the problem is that the toasts do not show unless I click somewhere in the application, they don't show up all by themselves. I am using the ToastrService in other parts of the application and whenever I call it like I do it here it shows toats without having to click on anything.
Any idea what might be causing this behaviour?
import { Injectable, ErrorHandler, Injector } from '@angular/core';
import { Router } from '@angular/router';
import { HttpErrorResponse } from '@angular/common/http';
import { ToastrService } from 'ngx-toastr';
import { AppSettings } from '../../app.settings';
@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
constructor(private injector: Injector) {}
public handleError(error: any) {
const router = this.injector.get(Router);
const settings = this.injector.get(AppSettings)
const toastr = this.injector.get(ToastrService);
console.log(`Request URL: ${router.url}`);
console.log(error);
if (error instanceof HttpErrorResponse) {
console.log("it is");
if (error.status === 401) {
router.navigate(['/login']);
settings.settings.setLoadingSpinner(false);
toastr.error('Logged in user no longer authenticated on server.', 'Unable to connect to server');
} else if (error.status === 404) {
console.log("it is 404");
toastr.error('Unable to connect to server. Missing or wrong URL, please try again', 'Unable to connect to server');
settings.settings.setLoadingSpinner(false);
} else if (error.status === 0) {
toastr.error('Server appears to be temporary unavailable', 'Unable to connect to server');
settings.settings.setLoadingSpinner(false);
} else if (error.status === 500) {
toastr.error('Server appears to be temporary unavailable', 'Unable to connect to server');
settings.settings.setLoadingSpinner(false);
}
} else {
console.error(error);
toastr.error('An error has occured', 'Sorry');
}
}
}
I have added the provider in the module also to use this class as error handler.
javascript angular typescript angular-toastr
I am using the code below to catch errors in my small Angular 6 app... I am catching the errors, I am showing info in the console the problem is that the toasts do not show unless I click somewhere in the application, they don't show up all by themselves. I am using the ToastrService in other parts of the application and whenever I call it like I do it here it shows toats without having to click on anything.
Any idea what might be causing this behaviour?
import { Injectable, ErrorHandler, Injector } from '@angular/core';
import { Router } from '@angular/router';
import { HttpErrorResponse } from '@angular/common/http';
import { ToastrService } from 'ngx-toastr';
import { AppSettings } from '../../app.settings';
@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
constructor(private injector: Injector) {}
public handleError(error: any) {
const router = this.injector.get(Router);
const settings = this.injector.get(AppSettings)
const toastr = this.injector.get(ToastrService);
console.log(`Request URL: ${router.url}`);
console.log(error);
if (error instanceof HttpErrorResponse) {
console.log("it is");
if (error.status === 401) {
router.navigate(['/login']);
settings.settings.setLoadingSpinner(false);
toastr.error('Logged in user no longer authenticated on server.', 'Unable to connect to server');
} else if (error.status === 404) {
console.log("it is 404");
toastr.error('Unable to connect to server. Missing or wrong URL, please try again', 'Unable to connect to server');
settings.settings.setLoadingSpinner(false);
} else if (error.status === 0) {
toastr.error('Server appears to be temporary unavailable', 'Unable to connect to server');
settings.settings.setLoadingSpinner(false);
} else if (error.status === 500) {
toastr.error('Server appears to be temporary unavailable', 'Unable to connect to server');
settings.settings.setLoadingSpinner(false);
}
} else {
console.error(error);
toastr.error('An error has occured', 'Sorry');
}
}
}
I have added the provider in the module also to use this class as error handler.
javascript angular typescript angular-toastr
javascript angular typescript angular-toastr
edited Nov 23 '18 at 7:58
SiddAjmera
15.1k31137
15.1k31137
asked Nov 23 '18 at 7:56
Vlad NVlad N
91114
91114
It would be great if you could provide a Minimal, Complete, and Verifiable example. You can use StackBlitz to create one.
– SiddAjmera
Nov 23 '18 at 8:01
add a comment |
It would be great if you could provide a Minimal, Complete, and Verifiable example. You can use StackBlitz to create one.
– SiddAjmera
Nov 23 '18 at 8:01
It would be great if you could provide a Minimal, Complete, and Verifiable example. You can use StackBlitz to create one.
– SiddAjmera
Nov 23 '18 at 8:01
It would be great if you could provide a Minimal, Complete, and Verifiable example. You can use StackBlitz to create one.
– SiddAjmera
Nov 23 '18 at 8:01
add a comment |
1 Answer
1
active
oldest
votes
please include the toaster service in constructor and run. As per my understanding, while service get instantiated, toaster should have to get initiated.
If I do this, I am getting a Error: Provider parse errors: Cannot instantiate cyclic dependency!
– Vlad N
Nov 23 '18 at 8:44
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53442661%2fangular-6-error-handling-not-showing-toasts%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
please include the toaster service in constructor and run. As per my understanding, while service get instantiated, toaster should have to get initiated.
If I do this, I am getting a Error: Provider parse errors: Cannot instantiate cyclic dependency!
– Vlad N
Nov 23 '18 at 8:44
add a comment |
please include the toaster service in constructor and run. As per my understanding, while service get instantiated, toaster should have to get initiated.
If I do this, I am getting a Error: Provider parse errors: Cannot instantiate cyclic dependency!
– Vlad N
Nov 23 '18 at 8:44
add a comment |
please include the toaster service in constructor and run. As per my understanding, while service get instantiated, toaster should have to get initiated.
please include the toaster service in constructor and run. As per my understanding, while service get instantiated, toaster should have to get initiated.
answered Nov 23 '18 at 8:14
shaan26shaan26
297
297
If I do this, I am getting a Error: Provider parse errors: Cannot instantiate cyclic dependency!
– Vlad N
Nov 23 '18 at 8:44
add a comment |
If I do this, I am getting a Error: Provider parse errors: Cannot instantiate cyclic dependency!
– Vlad N
Nov 23 '18 at 8:44
If I do this, I am getting a Error: Provider parse errors: Cannot instantiate cyclic dependency!
– Vlad N
Nov 23 '18 at 8:44
If I do this, I am getting a Error: Provider parse errors: Cannot instantiate cyclic dependency!
– Vlad N
Nov 23 '18 at 8:44
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53442661%2fangular-6-error-handling-not-showing-toasts%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
It would be great if you could provide a Minimal, Complete, and Verifiable example. You can use StackBlitz to create one.
– SiddAjmera
Nov 23 '18 at 8:01