Menu
I have a local environment and a production environment. Within the index.html i add or remove script files depending on if the environment is local or production.
I want an easy way to handle this. Inside the angular.json there is a file_replacement configuration option. This works for switching out the environment.ts to an environment.prod.ts but it does not seem to work for replacing the index.html file to a index.prod.html.
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"demo": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
"src/assets",
"src/favicon.ico",
{
"glob": "**/*",
"input": "../node_modules/font-awesome/fonts",
"output": "/assets/"
}
],
"styles": [
"src/styles/style.scss",
"src/theme.scss",
"node_modules/font-awesome/css/font-awesome.min.css"
],
"scripts": [
"node_modules/hammerjs/hammer.min.js",
"node_modules/auth0-js/build/auth0.min.js",
"node_modules/moment/min/moment.min.js",
"node_modules/ua-parser-js/dist/ua-parser.min.js",
"node_modules/d3/dist/d3.min.js",
"node_modules/wordcloud/src/wordcloud2.js",
"node_modules/chart.js/dist/Chart.bundle.min.js",
"node_modules/progressbar.js/dist/progressbar.min.js"
]
},
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
},
{
"replace": "src/index.html",
"with": "src/index.prod.html"
}
]
},
"test": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.test.ts"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "demo:build"
},
"configurations": {
"production": {
"browserTarget": "demo:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "demo:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"scripts": [
"node_modules/hammerjs/hammer.min.js",
"node_modules/auth0-js/build/auth0.min.js",
"node_modules/moment/min/moment.min.js",
"node_modules/ua-parser-js/dist/ua-parser.min.js",
"node_modules/d3/dist/d3.min.js",
"node_modules/wordcloud/src/wordcloud2.js",
"node_modules/chart.js/dist/Chart.bundle.min.js",
"node_modules/progressbar.js/dist/progressbar.min.js"
],
"styles": [
"src/styles/style.scss",
"src/theme.scss",
"node_modules/font-awesome/css/font-awesome.min.css"
],
"assets": [
"src/assets",
"src/favicon.ico",
{
"glob": "**/*",
"input": "../node_modules/font-awesome/fonts",
"output": "/assets/"
}
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"demo-e2e": {
"root": "",
"sourceRoot": "",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "demo:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"e2e/tsconfig.e2e.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "demo",
"schematics": {
"@schematics/angular:component": {
"prefix": "app",
"styleext": "scss"
},
"@schematics/angular:directive": {
"prefix": "app"
}
}
}
503
Customize Webpack Configuration in Your Angular Application Now that we've added it to our project, we can use the index transform option to modify the HTML file output, based on the environment.
A project's src/environments/ folder contains the base configuration file, environment.ts , which provides a default environment. You can add override defaults for additional environments, such as production and staging, in target-specific configuration files.
An Angular Application Environment is JSON configuration information that tells the build system which files to change when you use ng build and ng serve . Let's say you have a back end REST API deployed on a server that provides services to your Angular application.
html file. Angular is a framework which allows us to create "Single Page Applications", and here the index. html is the single page which was provided by the server.
This is supported from version @angular/[email protected].
Update (November 2019):
The fileReplacements solution does not work with
Angular CLI 8.0.0 anymore
Change angular.json to set your production index.html instead:
"architect":{
"build": {
"options": {
"index": "src/index.html", //non-prod
},
"configurations": {
"production":{
"index": { //prod index replacement
"input": "src/index.prod.html",
"output": "index.html
}
}
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
