I want the production build output to only produce ES2015 builds and not ES5 builds.
I am using Angular 8 with Ivy rendering engine on.
I am also attaching my angular.json, browserslist, tsconfig.json files.
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"front-end-inventory": {
"projectType": "application",
"schematics": {
"@schematics/angular:ponent": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/front-end-inventory",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets",
"src/manifest.webmanifest",
"src/.htaccess"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
"scripts": [
"./node_modules/jquery/dist/jquery.slim.min.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
],
"serviceWorker": true,
"ngswConfigPath": "ngsw-config.json"
},
"staging": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.staging.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": true,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
],
"serviceWorker": true,
"ngswConfigPath": "ngsw-config.json"
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "front-end-inventory:build"
},
"configurations": {
"production": {
"browserTarget": "front-end-inventory:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "front-end-inventory:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets",
"src/manifest.webmanifest",
"src/.htaccess"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "front-end-inventory:serve"
},
"configurations": {
"production": {
"devServerTarget": "front-end-inventory:serve:production"
}
}
}
}
}
},
"defaultProject": "front-end-inventory"
}
browserlist
# 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:
#
# You can see what browsers were selected by your queries by running:
# npx browserslist
Chrome > 70
tsconfig.json
{
"pileOnSave": false,
"pilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"noImplicitAny": true,
"strictNullChecks": true,
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
}
}
Current build result
The current build creates files but the index.html does not use type module but I want the index.html to use only module script only
Current Index.html Result
<script src="runtime.dd2d878cd9ae88476a26.js"></script>
<script src="polyfills.8ce2a1027d74b4930bab.js"></script>
<script src="scripts.b7617d15d290ae695226.js"></script>
<script src="main.c6dce3ad2ed82428de43.js"></script>
Expected Index.html Result
<script src="runtime.dd2d878cd9ae88476a26.js" type="module"></script>
<script src="polyfills.8ce2a1027d74b4930bab.js" type="module"></script>
<script src="scripts.b7617d15d290ae695226.js" type="module"></script>
<script src="main.c6dce3ad2ed82428de43.js" type="module"></script>
The resultant built scripts are also not ES2015 ready.
Side Note
If reverting back the browserlist to default configuration provided by angular produces both ES5 and ES2015 results.
I want the production build output to only produce ES2015 builds and not ES5 builds.
I am using Angular 8 with Ivy rendering engine on.
I am also attaching my angular.json, browserslist, tsconfig.json files.
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"front-end-inventory": {
"projectType": "application",
"schematics": {
"@schematics/angular:ponent": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/front-end-inventory",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets",
"src/manifest.webmanifest",
"src/.htaccess"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
"scripts": [
"./node_modules/jquery/dist/jquery.slim.min.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
],
"serviceWorker": true,
"ngswConfigPath": "ngsw-config.json"
},
"staging": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.staging.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": true,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
],
"serviceWorker": true,
"ngswConfigPath": "ngsw-config.json"
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "front-end-inventory:build"
},
"configurations": {
"production": {
"browserTarget": "front-end-inventory:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "front-end-inventory:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets",
"src/manifest.webmanifest",
"src/.htaccess"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "front-end-inventory:serve"
},
"configurations": {
"production": {
"devServerTarget": "front-end-inventory:serve:production"
}
}
}
}
}
},
"defaultProject": "front-end-inventory"
}
browserlist
# 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./browserslist/browserslist#queries
# You can see what browsers were selected by your queries by running:
# npx browserslist
Chrome > 70
tsconfig.json
{
"pileOnSave": false,
"pilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"noImplicitAny": true,
"strictNullChecks": true,
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
}
}
Current build result
The current build creates files but the index.html does not use type module but I want the index.html to use only module script only
Current Index.html Result
<script src="runtime.dd2d878cd9ae88476a26.js"></script>
<script src="polyfills.8ce2a1027d74b4930bab.js"></script>
<script src="scripts.b7617d15d290ae695226.js"></script>
<script src="main.c6dce3ad2ed82428de43.js"></script>
Expected Index.html Result
<script src="runtime.dd2d878cd9ae88476a26.js" type="module"></script>
<script src="polyfills.8ce2a1027d74b4930bab.js" type="module"></script>
<script src="scripts.b7617d15d290ae695226.js" type="module"></script>
<script src="main.c6dce3ad2ed82428de43.js" type="module"></script>
The resultant built scripts are also not ES2015 ready.
Side Note
If reverting back the browserlist to default configuration provided by angular produces both ES5 and ES2015 results.
Share Improve this question edited Jul 19, 2019 at 7:26 Max Gaurav asked Jul 19, 2019 at 7:16 Max GauravMax Gaurav 1,9132 gold badges14 silver badges29 bronze badges 3- I'm struggling with something similar. I saw this info about ng build that may be useful: "es5BrowserSupport - Deprecated: This will be determined from the list of supported browsers specified in the 'browserslist' file. - Enables conditionally loaded ES2015 polyfills." link – heringer Commented Oct 18, 2019 at 18:45
- Update: I think in Angular 9 will provide the solution for my problem. I will post it once I test things out. – Max Gaurav Commented Nov 20, 2019 at 6:15
- I'm curious to find out if you tried the configuration i supplied below. It is what worked in my case. What is changing in Angular 9 with regard to this? – DevMike Commented Dec 21, 2019 at 17:31
1 Answer
Reset to default 13To setup a build to target ES2015 only, do the following:
in your tsconfig.json:
make sure, as you already have, that the target is set to es2015:
"target": "es2015"
and set your browserlist config as follows:
last 2 Chrome versions
last 2 ChromeAndroid versions
last 2 Safari versions
last 2 iOS versions
last 2 Firefox versions
last 2 FirefoxAndroid versions
last 2 Edge versions
Those settings pile for ES2015 only, although, i am not seeing the type attribute included in the script tags as you noted in the resulting index page:
<script src="runtime.HASH.js" type="module"></script>
Someone please correct me if i am wrong, but i do not think the type attribute is necessary unless you intend on embedding additional scripts for legacy browsers which is what you were trying to avoid in the first place and thus, it is not necessary in this scenario. See this link for reference
Lastly, note that you can use the following mand to check which browser versions your browserlist config will target:
npx browserslist