@@ -99,7 +107,7 @@ The following application structure configures build targets for production and
environment.ts
- environment.prod.ts
+ environment.development.ts
environment.staging.ts
@@ -122,20 +130,21 @@ The following code in the component file \(`app.component.ts`\) uses an environm
-import { Component } from '@angular/core';
-import { environment } from './../environments/environment';
+ import { Component } from '@angular/core';
+ import { environment } from './../environments/environment';
-@Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
-})
-export class AppComponent {
- constructor() {
- console.log(environment.production); // Logs false for default environment
+ @Component({
+ selector: 'app-root',
+ templateUrl: './app.component.html',
+ styleUrls: ['./app.component.css']
+ })
+ export class AppComponent {
+ constructor() {
+ console.log(environment.production); // Logs false for development environment
+ }
+
+ title = 'app works!';
}
- title = 'app works!';
-}
@@ -152,36 +161,37 @@ For example:
-"configurations": {
- "production": {
- "fileReplacements": [
- {
- "replace": "src/environments/environment.ts",
- "with": "src/environments/environment.prod.ts"
- }
- ],
- …
+ "configurations": {
+ "development": {
+ "fileReplacements": [
+ {
+ "replace": "src/environments/environment.ts",
+ "with": "src/environments/environment.development.ts"
+ }
+ ],
+ …
-This means that when you build your production configuration with `ng build --configuration production`, the `src/environments/environment.ts` file is replaced with the target-specific version of the file, `src/environments/environment.prod.ts`.
+This means that when you build your development configuration with `ng build --configuration development`, the `src/environments/environment.ts` file is replaced with the target-specific version of the file, `src/environments/environment.development.ts`.
You can add additional configurations as required.
To add a staging environment, create a copy of `src/environments/environment.ts` called `src/environments/environment.staging.ts`, then add a `staging` configuration to `angular.json`:
-"configurations": {
- "production": { … },
- "staging": {
- "fileReplacements": [
- {
- "replace": "src/environments/environment.ts",
- "with": "src/environments/environment.staging.ts"
- }
- ]
+ "configurations": {
+ "development": { … },
+ "production": { … },
+ "staging": {
+ "fileReplacements": [
+ {
+ "replace": "src/environments/environment.ts",
+ "with": "src/environments/environment.staging.ts"
+ }
+ ]
+ }
}
-}
@@ -200,20 +210,23 @@ You can also configure the `serve` command to use the targeted build configurati
-"serve": {
- "builder": "@angular-devkit/build-angular:dev-server",
- "options": {
- "browserTarget": "your-project-name:build"
- },
- "configurations": {
- "production": {
- "browserTarget": "your-project-name:build:production"
+ "serve": {
+ "builder": "@angular-devkit/build-angular:dev-server",
+ "options": {
+ "browserTarget": "your-project-name:build"
},
- "staging": {
- "browserTarget": "your-project-name:build:staging"
+ "configurations": {
+ "development": {
+ "browserTarget": "your-project-name:build:development"
+ },
+ "production": {
+ "browserTarget": "your-project-name:build:production"
+ },
+ "staging": {
+ "browserTarget": "your-project-name:build:staging"
+ }
}
- }
-},
+ },
@@ -245,8 +258,8 @@ You can specify size budgets for the entire app, and for particular parts.
Each budget entry configures a budget of a given type.
Specify size values in the following formats:
-| Size value | Details |
-|:--- |:--- |
+| Size value | Details |
+| :-------------- | :-------------------------------------------------------------------------- |
| `123` or `123b` | Size in bytes. |
| `123kb` | Size in kilobytes. |
| `123mb` | Size in megabytes. |
@@ -257,7 +270,7 @@ When you configure a budget, the build system warns or reports an error when a g
Each budget entry is a JSON object with the following properties:
| Property | Value |
-|:--- |:--- |
+| :------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| type | The type of budget. One of:
| Value | Details |
bundle | The size of a specific bundle. |
initial | The size of JavaScript needed for bootstrapping the application. Defaults to warning at 500kb and erroring at 1mb. |
allScript | The size of all scripts. |
all | The size of the entire application. |
anyComponentStyle | This size of any one component stylesheet. Defaults to warning at 2kb and erroring at 4kb. |
anyScript | The size of any one script. |
any | The size of any file. |
|
| name | The name of the bundle \(for `type=bundle`\). |
| baseline | The baseline size for comparison. |
@@ -316,13 +329,7 @@ Internally, the Angular CLI uses the below `browserslist` configuration which ma
Firefox ESR
-
-To override the internal configuration, add a new file named `.browserslistrc`, to the project directory, that specifies the browsers you want to support:
-
-
- last 1 Chrome version
- last 1 Firefox version
-
+To override the internal configuration, run [`ng generate browserslist`](cli/generate#config-command), which generates a `.browserslistrc` configuration file in the the project directory.
See the [browserslist repository](https://github.com/browserslist/browserslist) for more examples of how to target specific browsers and versions.
@@ -357,9 +364,9 @@ For example, to divert all calls for `http://localhost:4200/api` to a server run
- …
- "architect": {
- "serve": {
+ …
+ "architect": {
+ "serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "your-application-name:build",
@@ -442,27 +449,25 @@ Proxy log levels are `info` \(the default\), `debug`, `warn`, `error`, and `sile
You can proxy multiple entries to the same target by defining the configuration in JavaScript.
-Set the proxy configuration file to `proxy.conf.js` \(instead of `proxy.conf.json`\), and specify configuration files as in the following example.
+Set the proxy configuration file to `proxy.conf.mjs` \(instead of `proxy.conf.json`\), and specify configuration files as in the following example.
-const PROXY_CONFIG = [
- {
- context: [
- "/my",
- "/many",
- "/endpoints",
- "/i",
- "/need",
- "/to",
- "/proxy"
- ],
- target: "http://localhost:3000",
- secure: false
- }
-]
-
-module.exports = PROXY_CONFIG;
+export default [
+ {
+ context: [
+ '/my',
+ '/many',
+ '/endpoints',
+ '/i',
+ '/need',
+ '/to',
+ '/proxy'
+ ],
+ target: 'http://localhost:3000',
+ secure: false
+ }
+];
@@ -476,7 +481,7 @@ In the CLI configuration file, `angular.json`, point to the JavaScript proxy con
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "your-application-name:build",
- "proxyConfig": "src/proxy.conf.js"
+ "proxyConfig": "src/proxy.conf.mjs"
},
…
@@ -488,21 +493,19 @@ If you need to optionally bypass the proxy, or dynamically change the request be
-const PROXY_CONFIG = {
- "/api/proxy": {
- "target": "http://localhost:3000",
- "secure": false,
- "bypass": function (req, res, proxyOptions) {
- if (req.headers.accept.indexOf("html") !== -1) {
- console.log("Skipping proxy for browser request.");
- return "/index.html";
- }
- req.headers["X-Custom-Header"] = "yes";
+export default {
+ '/api/proxy': {
+ "target": 'http://localhost:3000',
+ "secure": false,
+ "bypass": function (req, res, proxyOptions) {
+ if (req.headers.accept.includes('html')) {
+ console.log('Skipping proxy for browser request.');
+ return '/index.html';
}
+ req.headers['X-Custom-Header'] = 'yes';
}
-}
-
-module.exports = PROXY_CONFIG;
+ }
+};
@@ -523,26 +526,27 @@ Use the following content in the JavaScript configuration file.
-var HttpsProxyAgent = require('https-proxy-agent');
-var proxyConfig = [{
+import HttpsProxyAgent from 'https-proxy-agent';
+
+const proxyConfig = [{
context: '/api',
target: 'http://your-remote-server.com:3000',
secure: false
}];
-function setupForCorporateProxy(proxyConfig) {
- var proxyServer = process.env.http_proxy || process.env.HTTP_PROXY;
+export default (proxyConfig) => {
+ const proxyServer = process.env.http_proxy || process.env.HTTP_PROXY;
if (proxyServer) {
- var agent = new HttpsProxyAgent(proxyServer);
+ const agent = new HttpsProxyAgent(proxyServer);
console.log('Using corporate proxy server: ' + proxyServer);
- proxyConfig.forEach(function(entry) {
- entry.agent = agent;
- });
- }
- return proxyConfig;
-}
-module.exports = setupForCorporateProxy(proxyConfig);
+ for (const entry of proxyConfig) {
+ entry.agent = agent;
+ }
+ }
+
+ return proxyConfig;
+};
@@ -552,4 +556,4 @@ module.exports = setupForCorporateProxy(proxyConfig);
-@reviewed 2022-10-24
+@reviewed 2023-01-17
diff --git a/aio/content/guide/testing-code-coverage.md b/aio/content/guide/testing-code-coverage.md
index 91483778c2f..ae9a556e5ab 100644
--- a/aio/content/guide/testing-code-coverage.md
+++ b/aio/content/guide/testing-code-coverage.md
@@ -2,7 +2,7 @@
# Find out how much code you're testing
-The CLI can run unit tests and create code coverage reports.
+The Angular CLI can run unit tests and create code coverage reports.
Code coverage reports show you any parts of your code base that might not be properly tested by your unit tests.
@@ -19,10 +19,10 @@ ng test --no-watch --code-coverage
-When the tests are complete, the command creates a new `/coverage` folder in the project.
+When the tests are complete, the command creates a new `/coverage` directory in the project.
Open the `index.html` file to see a report with your source code and code coverage values.
-If you want to create code-coverage reports every time you test, set the following option in the CLI configuration file, `angular.json`:
+If you want to create code-coverage reports every time you test, set the following option in the Angular CLI configuration file, `angular.json`:
@@ -63,9 +63,17 @@ coverageReporter: {
+
+
+
+Read more about creating and fine tunning Karma configuration in the [testing guide](guide/testing#configuration).
+
+
+
+
The `check` property causes the tool to enforce a minimum of 80% code coverage when the unit tests are run in the project.
-Find more information about the different coverage configuration options [here](https://github.com/karma-runner/karma-coverage/blob/master/docs/configuration.md).
+Read more on coverage configuration options in the [karma coverage documentation](https://github.com/karma-runner/karma-coverage/blob/master/docs/configuration.md).
@@ -73,4 +81,4 @@ Find more information about the different coverage configuration options [here](
-@reviewed 2022-02-28
+@reviewed 2023-01-17
diff --git a/aio/content/guide/testing.md b/aio/content/guide/testing.md
index f62def7c334..9d5841f28b7 100644
--- a/aio/content/guide/testing.md
+++ b/aio/content/guide/testing.md
@@ -77,72 +77,13 @@ The tests run again, the browser refreshes, and the new test results appear.
The Angular CLI takes care of Jasmine and Karma configuration for you. It constructs the full configuration in memory, based on options specified in the `angular.json` file.
-If you require to fine-tune Karma, follow the below steps:
+If you want to customize Karma, you can create a `karma.conf.js` by running the following command:
-1. Create a `karma.conf.js` in the root folder of the project.
+
-
-
- module.exports = function (config) {
- config.set({
- basePath: '',
- frameworks: ['jasmine', '@angular-devkit/build-angular'],
- plugins: [
- require('karma-jasmine'),
- require('karma-chrome-launcher'),
- require('karma-jasmine-html-reporter'),
- require('karma-coverage'),
- require('@angular-devkit/build-angular/plugins/karma')
- ],
- client: {
- jasmine: {
- // you can add configuration options for Jasmine here
- // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
- // for example, you can disable the random execution with `random: false`
- // or set a specific seed with `seed: 4321`
- },
- clearContext: false // leave Jasmine Spec Runner output visible in browser
- },
- jasmineHtmlReporter: {
- suppressAll: true // removes the duplicated traces
- },
- coverageReporter: {
- dir: require('path').join(__dirname, './coverage/'),
- subdir: '.',
- reporters: [
- { type: 'html' },
- { type: 'text-summary' }
- ]
- },
- reporters: ['progress', 'kjhtml'],
- port: 9876,
- colors: true,
- logLevel: config.LOG_INFO,
- autoWatch: true,
- browsers: ['Chrome'],
- singleRun: false,
- restartOnFileChange: true
- });
- };
-
-
-
-1. In the `angular.json`, use the [`karmaConfig`](cli/test) option to configure the Karma builder to use the created configuration file.
-
-
-
- "test": {
- "builder": "@angular-devkit/build-angular:karma",
- "options": {
- "karmaConfig": "karma.conf.js",
- "polyfills": ["zone.js", "zone.js/testing"],
- "tsConfig": "src/tsconfig.spec.json",
- "styles": ["src/styles.css"]
- }
- }
-
-
+ng generate config karma
+
@@ -235,4 +176,4 @@ After you've set up your application for testing, you might find the following t
-@reviewed 2022-11-02
+@reviewed 2023-01-17