Menu
How do I get the Angular CLI to serve up the right environments/environment*.ts file in Angular 7?
I've tried configuring the replacement of the environment.ts with environment.test.ts in three different places with no success.
I've tried running it with ng test and with ng test --configuration test.
Every single time, if I debug the tests, I find that it's using environment.prod.ts(?!) instead of environment.test.ts.
Here is a screenshot to show the three places I've tried to do the fileReplacements:
Here is the entire config for reference:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"mms": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "mms",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/mms",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets",
"src/web.config"
],
"styles": [
"src/styles.scss",
"src/assets/libs/pikaday/pikaday.scss",
"src/assets/scss/dragula/dragula.css",
"src/assets/libs/hopscotch/css/hopscotch.css",
"src/assets/scss/site.scss"
],
"scripts": [
"src/assets/libs/hopscotch/js/hopscotch.js",
"src/assets/libs/pikaday/pikaday.js",
"src/assets/libs/bitmovin-loader.js"
]
},
"configurations": {
"test": {
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.test.ts"
}]
},
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
},
{
"replace": "src/index.html",
"with": "src/index.prod.html"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
},
"mastermock": {
"main": "src/main-mock.ts",
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.mock.ts"
}]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "mms:build",
"proxyConfig": "proxy.conf.json"
},
"configurations": {
"production": {
"browserTarget": "mms:build:production"
},
"mastermock": {
"browserTarget": "mms:build:mastermock",
"proxyConfig": "proxy.conf.json"
}
}
},
"serve-local": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "mms:build",
"proxyConfig": "proxy.local.conf.json"
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "mms:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/styles.scss"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets",
"src/web.config"
],
"codeCoverageExclude": [
"**/*.mock.ts",
"**/*.module.ts"
],
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.test.ts"
}]
},
"configurations": {
"test": {
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.test.ts"
}]
},
"production": {
"karmaConfig": "src/karma.conf.prod.js"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**",
"**/*.dev.ts",
"**/e2e/**"
]
}
}
}
},
"mms-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.dev.js",
"devServerTarget": "mms:serve"
},
"configurations": {
"local": {
"protractorConfig": "e2e/protractor.conf.dev.js",
"devServerTarget": "mms:serve-local"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "mms",
"schematics": {
"@ngrx/schematics:component": {
"styleext": "scss"
}
},
"cli": {
"defaultCollection": "@ngrx/schematics"
}
}
454
It creates an Angular testing module—an @NgModule class—that you configure with the configureTestingModule method to produce the module environment for the class you want to test.
You can execute the unit tests for your app via the CLI by running ng test from within the root, project directory. Upon running ng test , two things happen. First, Angular uses the Karma test runner to open up a new browser window that contains the reporting mechanism for your unit tests.
spec. ts extension will run. To run your tests using the Angular CLI, you use the ng test command in your terminal. As a result, Karma will open up the default browser and run all the tests written with the aid of Jasmine and will display the outcome of those tests.
You can add fileReplacements to the test section of angular.json
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.test.ts"
}],
Tested angular-12.
57
import { environment } from '@environments/environment.prod';
fileReplacements is in architect.test.options.fileReplacements.environment.*.ts files other than environment.ts to something like DO-NOT-IMPORT.ENVIRONMENT.*.ts. At least that'll yell at me if I get the wrong import.
10
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