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

Encountered compilation errors while trying to compile the entry-point @ng-bootstrap/ng-bootstrap with `es2015` as esm2015. Compilation was unsuccessful

Seeking assistance in resolving the errors provided below. I am currently in the process of upgrading my angular project from version 8 to 12. Initially, I attempted to upgrade progressively from version to version, starting with "7 to 8, 8 to 9". However ...

The Main Page is always the default destination when navigating with Angular Router

Having an issue with Angular Router (Angular 11). Here is my routing configuration: {path: '', redirectTo: '/login', pathMatch: 'full'} {path: 'login', component: LoginComponent} {path: 'verdicts', componen ...

The type 'GetServerSidePropsContext<ParsedUrlQuery, PreviewData>' does not include property X

My current setup includes: type Session = { bearer: string, firstName: string, lastName: string, etc... }; interface ServerContext extends GetServerSidePropsContext { session: Session, }; export type ServerProps<P extends { [key: string]: ...

Maximizing the efficiency of enums in a React TypeScript application

In my React application, I have a boolean called 'isValid' set like this: const isValid = response.headers.get('Content-Type')?.includes('application/json'); To enhance it, I would like to introduce some enums: export enum Re ...

Looping through arrays within objects using NgFor in Angular 2/JavaScript

I have a custom object with data that I am iterating through using ngFor. Within this object, there is an array component that I also want to iterate through in a <li></li>. Currently, the output appears as one complete string within each < ...

Angular version 9.1 includes a myriad of functioning routes, with the exception of just one

UPDATE: The issue was not related to the API, but rather with Angular. Please refer to the answer provided below for more details. I have been using this particular App for years without any route-related problems until recently. After deploying some upda ...

Tips for validating nominal-typed identifiers

I recently started experimenting with the enum-based nominal typing technique explained in more detail at this link. enum PersonIdBrand {} export type PersonId = PersonIdBrand & string interface Person { id: PersonId firstName: string lastName: ...

What is the best way to implement multiple templates for a single component?

Is there a way to configure my Home Component based on the user's role? For instance: If the employee is an admin, then the home component should load the template URL designed for admins. Likewise, if the employee is a cashier, then the home compo ...

Generics in Typescript interfaces

I'm trying to grasp the meaning of T = {} within this TypeScript interface. I've searched for documentation on this usage but haven't found anything specific. How does it differ from simply using T? interface CustomProps<T = {}> { ...

Tips for adjusting the selected value in the ng2-select feature

I'm currently developing an angular2 application and I've integrated ng2-select for the multiselect dropdown feature. Everything works smoothly when creating a new entry, however, I'm facing issues with setting default selected values pulled ...

The call to the hooks is not valid. Hooks must be called within the body of a functional component

Could you please take a moment to review the validate method within the elfe-if condition in the code snippet below? I am encountering an issue when trying to invoke the useLocation method from react-router-dom. Upon researching online, I came across simil ...

Modifying a property in a nested layout through a page in Next.js 13

Currently, I am facing a challenge in updating the page title within a nested layout structure. app/docs/layout.tsx: export const DocsLayout = ({children}:{children: React.ReactNode}) => { return ( <> <header> ...

Typedoc Error: Attempted to assign a value to an undefined option (mode)

After installing typedoc with the command npm install typedoc --save-dev, I proceeded to add typedocOptions to tsconfig.json: { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", // ...some lin ...

Issue encountered while utilizing JQueryUI alongside TypeScript and the definition file from DefinitelyTyped

Currently, I'm attempting to incorporate JQueryUI with TypeScript by first installing JQueryUI using npm install jquery-ui-dist, and then installing JQuery with npm install jquery. Additionally, I have included the definition files from DefinitelyType ...

Testing a reusable component in Angular using unit testing techniques

Currently, I am creating a test for an AppleComponent which has the following type: <T,U extends BananaComponent<T>>. This component also contains BananaComponent<T>. Target Component export class AppleComponent<T,U extends BananaCom ...

The karma test appears as "passed" in IntelliJ, even though there are remaining errors present, leading to a failure in the CI/CD process

Currently working on an Angular project, my goal is to ensure all tests turn green. Surprisingly, they all passed on my end, but the CI/CD process (Teamcity) failed. Upon checking the log in my IntelliJ IDE, it was revealed that certain tests actually repo ...

How can we initiate an AJAX request in React when a button is clicked?

I'm fairly new to React and I'm experimenting with making an AJAX call triggered by a specific button click. This is how I am currently using the XMLHttpRequest method: getAssessment() { const data = this.data //some request data here co ...

Encountered an error while trying to access an undefined property in Angular

Trying to perform a basic import, but encountering a significant stack trace issue. Extensive search efforts have been made to address this problem, yet the stack trace lacks sufficient information for resolution. UPDATE: When setting a variable not sour ...

Is it necessary to manually unsubscribe from observables in the main Angular component?

I'm facing a dilemma with my Observable in the root Angular (6.x) component, AppComponent. Typically, I would unsubscribe from any open Subscription when calling destroy() using the lifecycle hook, ngOnDestroy. However, since the AppComponent serv ...

Dynamically populate dropdown menu with values extracted from dataset

I'm currently working on a dropdown menu that needs to be updated dynamically using the data set below: this.additionalPercentages = this.offer.offerData.wellbeing.retirementPackages[0].additionalVoluntaryContributionPercentages; When I console this ...