Learn how to set up browser targeting using differential loading in Angular 10, specifically for es2016 or newer versions

Seeking advice on JS target output for compiled Angular when utilizing differential loading.

By default, Angular compiles TypeScript down to ES5 and ES2015, with browsers using either depending on their capabilities.

In order to stay current, I've been researching different ES versions and browser support.

Unfortunately, I've reached a roadblock and can't find more information on this topic.

To ensure compatibility with modern browsers, I decided to upgrade the target output from es2015 to es2016.

I achieved this by adjusting the target value in tsconfig.json

"compilerOptions": {
    "target": "es2016"
}

However, I encountered an issue.

During compilation, I received the following warning:

Warning: Using differential loading with targets ES5 and ES2016 or higher may cause problems. Browsers with ES2015 support will load ES2016+ scripts but they might not support ES2016+ syntax.

Essentially, I'm curious about how Typescript/Angular/the browser determines which file to serve based on the browser being used (how does targeting work).

Is it possible to configure this on a per-browser basis? For example, having some browsers use es5, others use es2015, and certain ones use es2016. I'm struggling to grasp how differential loading caters to specific browsers.

Additionally, are there any advantages to using a version later than es2015 (such as fewer polyfills, more native code, faster performance, smaller compiled files)?

Thank you in advance for your help.

Answer №1

When performing an Angular build with differential loading enabled, you will observe that the index.html file contains two sets of script tags for each module.

The specification looks like this:

<script src="runtime-es2015.js" type="module"></script>
<script src="runtime-es5.js" nomodule></script>

You may notice the use of nomodule and type="module". The presence of nomodule informs modern browsers that this is es5 code which they can ignore. Therefore, modern browsers will not load this script, but older browsers will load and execute it. For more information on the nomodules attribute, visit MDN.

Additionally, according to the Angular documentation, differential loading is only supported for targeting es2015, and any other target would result in a warning as mentioned by you.

You have the ability to configure supported browser versions using the .browserslistrc file. Refer to this link and this link for further details.

By targeting es2015, you should already see smaller bundles being generated (while older browsers will continue to load larger es5 bundles). However, if users have modern browsers but outdated versions, there's a chance they could encounter runtime errors if the target isn't set to es2015. For example, using features like Array.flat which is supported from Chrome 69 onwards but not in earlier versions such as Chrome 68.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to align all child elements to the right side inside a multi-select checkbox dropdown list using Angular?

I am seeking assistance with the following scenarios: I have a multiselect dropdownlist using the ng-multiselect-dropdown control in Angular. The parent and child items are bound using the code below in the HTML file: <ng-multiselect-dropdown name=&qu ...

Error encountered in Next.js: TypeScript error with code ts(7031) - The binding element 'Component' is implicitly assigned the 'any' type

Converting my NextJS project to TypeScript presented a challenge for me. When working on my _app.tsx file, I came across a type error: 'pageProps' implicitly has an 'any' type. ts(7031). The error message likely resembled this image: ht ...

The optimal location to declare a constructor in Typescript

When it comes to adding properties in an Angular component, the placement of these properties in relation to the constructor function can be a topic of discussion. Is it best to declare them before or after the constructor? Which method is better - Method ...

Encountered difficulty retrieving properties from the req.query object within expressjs

My setup includes a router configuration like this: router.get('/top-5-cheap', aliasTopTours, getAllTours); I've also implemented some middlewares: Middleware aliasTopTours: In this middleware, I am setting certain properties on the reque ...

Guide to dynamically load external JavaScript script in Angular 2 during runtime

Currently, I am integrating Twitter digits for authentication purposes. To implement this feature, a small .js script needs to be downloaded and initialized. The recommended approach is to directly fetch the file from the Twitter server. In order to succe ...

What are the advantages of utilizing NGRX over constructor-injected services?

Have you ever wondered about the benefits of using NGRX or NGXS for an Angular application instead of constructor injected services to manage component IO? Is it simply to prevent mutation of component properties references without replacing the entire pr ...

Struggling with consolidating values in an array of objects - seeking assistance with Javascript

Currently, I am handling a project where I receive data in the form of an Object Array. My task is to merge values with the same key into one key and convert the values into an array of strings. Below is the sample data I am working with: inputArray = [ ...

Obtain the current time for a specific user

I'm currently struggling with obtaining the accurate 'trusted' user time, in order to prevent any cheating through manipulation of their computer's clock. Whether I utilize a basic date object, moment timezone, or even Google timezone ...

When invoking a callback function that includes a conditional type, TypeScript mandates the inclusion of a parameter that intersects multiple types

There is a function that requires specific arguments, including a callback function that takes an object or an array of objects based on an isArray parameter. I am attempting to create a new feature. type Option = { name: string value: string } type ...

Is it necessary to have a Test Adapter in VSTS in order to include a code coverage report?

Currently, I am producing code coverage using Karma-coverage and hosting my output coverage folder on an http-server for local viewing. My question is: How can I display this report on the VSTS code coverage tab? Do I need to re-format my coverage result ...

Using TypeScript to Manipulate SVG Polyline Shapes

In my TypeScript 3.1.1 project in VS Code with an Aurelia setup, I am facing a challenge while trying to manipulate an SVG Polyline using TypeScript code. The issue arises when attempting to create a new SVGPoint object. The initial HTML structure is as fo ...

Anyone have any suggestions on how to resolve the issue with vertical tabs in material UI while using react.js?

I'm working on integrating a vertical tab using material UI in react.js, but I'm facing an issue where the tabs are not appearing. Here is the snippet of my code: Javascript: const [value, setValue] = useState(0); const handleChange1 = (event ...

"Everything seems to be in order with `ng serve`, but `ionic serve`

My current project involves using Ionic version 6.19.0, but it has recently run into some unexpected compiling issues. Every time I attempt to execute 'ionic serve,' I encounter an Error: spawn UNKNOWN. Here is the content of my package.json fil ...

Tips for implementing JS function in Angular for a Collapsible Sidebar in your component.ts file

I am attempting to collapse a pre-existing Sidebar within an Angular project. The Sidebar is currently set up in the app.component.html file, but I want to transform it into its own component. My goal is to incorporate the following JS function into the s ...

Leveraging TypeScript's library extensions in combination with requirejs

Currently, I am experimenting with THREE.js and socket.io to develop a small game. I am looking to utilize the OrbitControls extension for THREE.js for camera controls, which I have successfully used in a previous project. However, it seems that the clien ...

Having trouble with an unexpected value in your Angular2 Service? Don't forget to add

I encountered an error in my Angular2 app: Error: (SystemJS) Unexpected value 'ReleasesService' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation. Here is my AppModule code: import { NgModule } fr ...

Is it possible to regulate the type of a class that has not yet been instantiated?

Is there a method in typescript to restrict the type of an uninstantiated class? I am looking to specify that only classes which inherit from Repository can be accepted by the addRepository method without actually creating an instance of the class (its co ...

Can you provide guidance on implementing Material-UI's `withStyles` decorator in a practical scenario?

I'm currently solving the challenge of annotating the types for the different styles in my code. After converting from plain JavaScript to TypeScript, I am now adding type annotations. Here is a snippet of the code: import * as React from 'react ...

Tips for incorporating JSON in server-side rendering using Angular Universal

Currently, I am in the process of developing an angular2-universal app for a university project which is also my bachelor thesis. My goal is to have this app rendered on the server using angular universal. However, I am facing a challenge in loading my .js ...

Ensuring the completion of all validations in Angular 4

Currently, I'm working on a project that involves 3 FormControls. I am in need of a validation process that ensures either all three have values selected or none at all. Is there a method to achieve this type of validation? ...