Toastr service not working for Internet Explorer - css

Question

I have used ngx-toastr module to show toastr in my angular application It is working fine with Chorme,Firefox but not working in IE ie it is working in ngOninit() function but not in any other function
.
import { ToastrModule } from 'ngx-toastr';

Answer 1

In my case, the toast container was being shown in DOM, but the toast itself wasn't being displayed.
(You can check if this is your case inspecting the DOM and looking for the text "toast-container", which the container div has).
I tried uncommenting polyfills lines and everything until I realized the toast was being set the property "display:none" for some reason by IE.
The thing that worked for me was just adding this to my styles.scss:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
.toast {
display: block !important;
}
}
#supports (-ms-accelerator:true) {
/* IE Edge 12+ CSS styles go here */
.toast {
display: block !important;
}
}
Hope this helps!

Answer 2

polyfills.ts
/**
This file includes polyfills needed by Angular and is loaded before the app.
You can add your own extra polyfills to this file.
*
This file is divided into 2 sections:
Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
Application imports. Files imported after ZoneJS that should be loaded before your main
file.
*
The current setup is for so-called "evergreen" browsers; the last versions of browsers that
automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
*/
/***************************************************************************************************
BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js'; // Run npm install --save classlist.js.
/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';
/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';
/**
Web Animations #angular/platform-browser/animations
Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
**/
import 'web-animations-js'; // Run npm install --save web-animations-js.
/**
By default, zone.js will patch all possible macroTask and DomEvents
user can disable parts of macroTask/DomEvents patch by setting following flags
*/
(window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
(window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
(window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
/*
in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
with the following flag, it will bypass zone.js patch for IE/Edge
*/
(window as any).__Zone_enable_cross_context_check = true;
/***************************************************************************************************
Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
/***************************************************************************************************
APPLICATION IMPORTS
*/
// Add global to window, assigning the value of window itself.
(window as any)['global'] = window;
if (!Element.prototype.matches) {
Element.prototype.matches = (<any>Element.prototype).msMatchesSelector ||
Element.prototype.webkitMatchesSelector;
}
package.json
{
"name": "xtreme-admin-angular",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "node app.js",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "node patch-webpack.js"
},
"private": true,
"dependencies": {
"#agm/core": "^1.0.0-beta.7",
"#angular/animations": "^7.0.1",
"#angular/common": "^7.0.1",
"#angular/compiler": "^7.0.1",
"#angular/core": "^7.0.1",
"#angular/forms": "^7.0.1",
"#angular/http": "^7.0.1",
"#angular/platform-browser": "^7.0.1",
"#angular/platform-browser-dynamic": "^7.0.1",
"#angular/router": "^7.0.1",
"#jaspero/ng-confirmations": "^0.4.7",
"#jaspero/ng2-confirmations": "^0.3.3",
"#ng-bootstrap/ng-bootstrap": "^3.3.1",
"#swimlane/ngx-charts": "^7.0.1",
"#swimlane/ngx-datatable": "^13.1.0",
"#types/crypto-js": "^3.1.43",
"angular-calendar": "^0.25.2",
"angular-datatables": "^6.0.0",
"angular2-notifications": "^2.0.0",
"bcryptjs": "^2.4.3",
"bootstrap": "^4.1.3",
"c3": "^0.4.23",
"chart.js": "^2.8.0",
"chartist": "^0.11.3",
"classlist.js": "^1.1.20150312",
"compression": "^1.7.4",
"core-js": "^2.6.9",
"critical": "^1.3.6",
"crypto-js": "^3.1.9-1",
"d3": "^4.8.0",
"datatables.net": "^1.10.16",
"datatables.net-dt": "^1.10.16",
"express": "^4.17.1",
"express-simple-cdn": "^1.0.1",
"jquery": "^3.4.1",
"jspdf": "^1.5.3",
"jspdf-autotable": "^3.2.4",
"karma-html-reporter": "^0.2.7",
"karma-phantomjs-launcher": "^1.0.4",
"karma-teamcity-reporter": "^1.1.0",
"ng-chartist": "^1.1.1",
"ng2-charts": "^1.6.0",
"ng2-dragula": "^1.5.0",
"ng2-file-upload": "^1.3.0",
"ng2-smart-table": "1.2.2",
"ngx-loading": "^3.0.1",
"ngx-owl-carousel": "^2.0.7",
"ngx-owl-carousel-o": "^2.0.1",
"ngx-pagination": "^4.1.0",
"ngx-perfect-scrollbar": "6.1.0",
"ngx-quill": "^3.6.0",
"ngx-slick-carousel": "^0.4.6",
"ngx-spinner": "^7.2.0",
"ngx-toastr": "^8.7.3",
"ngx-tooltip": "0.0.9",
"node-sass": "^4.12.0",
"owl.carousel": "^2.3.4",
"pace-js": "^1.0.2",
"quill": "^1.3.6",
"remove-node-modules": "^1.7.6",
"rxjs": "^6.5.2",
"rxjs-compat": "^6.5.2",
"script-loader": "^0.7.2",
"slick-carousel": "^1.8.1",
"web-animations-js": "^2.3.2",
"zone.js": "^0.8.29"
},
"devDependencies": {
"#angular-builders/custom-webpack": "^8.2.0",
"#angular-devkit/build-angular": "^0.10.7",
"#angular/cli": "~7.0.3",
"#angular/compiler-cli": "^7.0.1",
"#angular/language-service": "^7.0.1",
"#types/c3": "^0.6.4",
"#types/chartist": "^0.9.46",
"#types/datatables.net": "^1.10.17",
"#types/jasmine": "~2.8.6",
"#types/jasminewd2": "~2.0.3",
"#types/jquery": "^3.3.22",
"#types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"css-aspect-ratio": "^1.0.5",
"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.4.2",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "3.1.6"
},
"browser": {
"crypto": false,
"stream": false
}
}