DEV Community: Aman

Angular 8.x / 9.x & Internet Explorer Not Working. Quick Solution!

Aman — Thu, 13 Feb 2020 17:25:30 +0000

When it comes to web application Internet Explorer is always the bad boy (especially IE 11).

Angular 8 and above are not working on IE at all. Its really hard to test your application on IE, how the layout looks like and etc.

After you installed Angular 8 or Angular 9 when you run

ng serve

you will see a white page in Internet Explorer.

I will show you here how to fix that problem.

To get Internet Explorer working we need to do the following steps:

Un-comment some imports in the polyfill.ts file.
Install a couple of npm packages.
Modify the browserslist file.

Polyfill Imports

First, open the polyfills file in your IDE or text editor:
the file is found inside your project folder \src\polyfills.ts

There are two commented lines you need to un-comment:

// import 'classlist.js';  // Run `npm install --save classlist.js`.

// import 'web-animations-js';  // Run `npm install --save web-animations-js`.

Install npm Packages

There are some

npm install

commands in the comments. You need to run:

npm install --save classlist.js
npm install --save web-animations-js

Modify browserslist File

Open the browserslist file in your IDE or text editor:
the file is found inside your project folder \browserslist

The default file looks something like the below:

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# You can see what browsers were selected by your queries by running:
#   npx browserslist

> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11 # For IE 9-11 support, remove 'not'.

You need to change that last line by removing the not. After you make the changes the last line should read:

IE 9-11 # For IE 9-11 support, remove 'not'.

Run on production

ng build --prod

After building you can run:

cd .\dist\project-folder\
npx local-web-server

Run on dev

ng serve

you will still get the blank Internet Explorer. This is because ng serve doesn’t automatically generate the ES5 bundle.

Do the below quick config:

Modify tsconfig.json

You can find your tsconfig.json file in the root of your Angular Workspace. Open it up in your IDE or text editor and you will see:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

Notice that line:

target: es2015

. You can change it to es5. It will then look like this:

"target": "es5",

Now you can run:

ng serve

Hooray! at this point IE should work.

Sass in 5 min

Aman — Wed, 12 Feb 2020 23:03:16 +0000

Sass: Store Data with Sass Variables

One feature of Sass that's different from CSS is it uses variables. They are declared and set to store data, similar to JavaScript.

In JavaScript, variables are defined using the let and const keywords.
In Sass, variables start with a $ followed by the variable name.

examples:

$main-fonts: Arial, sans-serif;
$headings-color: green;

To use variables

h1 {

  font-family: $main-fonts;
  color: $headings-color;

}

One example where variables are useful is when a number of elements need to be the same color. If that color is changed, the only place to edit the code is the variable value.

Sass: Nest CSS with Sass

Sass allows nesting of CSS rules, which is a useful way of organizing a style sheet.

Normally, each element is targeted on a different line to style it, like so:

nav {
  background-color: red;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline-block;
}

For a large project, the CSS file will have many lines and rules. This is where nesting can help organize your code by placing child style rules within the respective parent elements:

nav {
  background-color: red;

  ul {
    list-style: none;

    li {
      display: inline-block;
    }
  }
}

Sass: Create Reusable CSS with Mixins

In Sass, a mixin is a group of CSS declarations that can be reused throughout the style sheet.

Newer CSS features take time before they are fully adopted and ready to use in all browsers. As features are added to browsers, CSS rules using them may need vendor prefixes. Consider "box-shadow":

div {
  -webkit-box-shadow: 0px 0px 4px #fff;
  -moz-box-shadow: 0px 0px 4px #fff;
  -ms-box-shadow: 0px 0px 4px #fff;
  box-shadow: 0px 0px 4px #fff;
}

It's a lot of typing to re-write this rule for all the elements that have a box-shadow, or to change each value to test different effects. Mixins are like functions for CSS. Here is how to write one:

@mixin box-shadow($x, $y, $blur, $c){ 
  -webkit-box-shadow: $x, $y, $blur, $c;
  -moz-box-shadow: $x, $y, $blur, $c;
  -ms-box-shadow: $x, $y, $blur, $c;
  box-shadow: $x, $y, $blur, $c;
}

The definition starts with @mixin followed by a custom name. The parameters
(the $x, $y, $blur, and $c in the example above) are optional. Now any time a box-shadow rule is needed,
only a single line calling the mixin replaces having to type all the vendor prefixes. A mixin is called with the
@include directive:

div {
  @include box-shadow(0px, 0px, 4px, #fff);
}

Write a mixin for border-radius and give it a $radius parameter. It should use all the vendor prefixes from the
example. Then use the border-radius mixin to give the #awesome element a border-radius of 15px.

<style type='text/sass'>

  @mixin border-radius($radius) {
    border-radius: $radius;
  }

  #awesome {
    width: 150px;
    height: 150px;
    background-color: green;
    @include border-radius(15px);
  }
</style>
<div id="awesome"></div>

Sass: Use @if and @else to Add Logic To Your Styles
The @if directive in Sass is useful to test for a specific case - it works just like the if statement in JavaScript.

@mixin make-bold($bool) {
  @if $bool == true {
    font-weight: bold;
  }
}

And just like in JavaScript, @else if and @else test for more conditions:

@mixin text-effect($val) {
  @if $val == danger {
    color: red;
  }
  @else if $val == alert {
    color: yellow;
  }
  @else if $val == success {
    color: green;
  }
  @else {
    color: black;
  }
}

Sass: Use @for to Create a Sass Loop

The @for directive adds styles in a loop, very similar to a for loop in JavaScript.

@for is used in two ways: "start through the end" or "start to end". The main difference is that the "start to end" excludes the end number as part of the count, and "start through the end" includes the end number as part of the count.

Here's a start through end example:

@for $i from 1 through 12 {
  .col-#{$i} { width: 100%/12 * $i; }
}

The #{$i} part is the syntax to combine a variable (i) with text to make a string. When the Sass file is converted to CSS, it looks like this:

col-1 {
  width: 8.33333%;
}
.col-2 {
  width: 16.66667%;
}
.col-12 {
  width: 100%;
}

Sass: Use @each to Map Over Items in a List

The last challenge showed how the @for directive uses a starting and ending value to loop a certain number of times. Sass also offers the @each directive which loops over each item in a list or map. On each iteration, the variable gets assigned to the current value from the list or map.

Sass: Apply a Style Until a Condition is Met with @while
The @while directive is an option with similar functionality to the JavaScript while loop. It creates CSS rules until a condition is met.

The @for challenge gave an example to create a simple grid system. This can also work with @while.

Sass: Split Your Styles into Smaller Chunks with Partials

Partials in Sass are separate files that hold segments of CSS code. These are imported and used in other Sass files. This is a great way to group similar code into a module to keep it organized.

Names for partials start with the underscore (_) character, which tells Sass it is a small segment of CSS and not to convert it into a CSS file. Also, Sass files end with the .scss file extension. To bring the code in the partial into another Sass file, use the @import directive.

For example, if all your mixins are saved in a partial named "_mixins.scss", and they are needed in the "main.scss" file, this is how to use them in the main file:

// In the main.scss file
@import 'mixins'

Write an @import statement to import a partial named _variables.scss into the main.scss file.
@import 'variables'

Sass: Extend One Set of CSS Styles to Another Element

Sass has a feature called extend that makes it easy to borrow the CSS rules from one element and build upon them in another.

For example, the below block of CSS rules style a .panel class. It has a background-color, height and border.

.panel{
  background-color: red;
  height: 70px;
  border: 2px solid green;
}

Now you want another panel called .big-panel. It has the same base properties as .panel, but also needs a width and font-size. It's possible to copy and paste the initial CSS rules from .panel, but the code becomes repetitive as you add more types of panels. The extend directive is a simple way to reuse the rules written for one element, then add more for another:

.big-panel{
  @extend .panel;
  width: 150px;
  font-size: 2em;
}

The .big-panel will have the same properties as .panel in addition to the new styles.