It's confusing and redundant to use `When true` and `when false` in descriptions for a CLI arguments because specifying false/true is redundant in a command line argument flag and in most cases users will not do it.
Example:
`--foo=true` is the same as `--foo`
`--foo=false` is the same as `--no-foo`
This is another feature that we mentioned in the Eliminate Render Blocking Requests RFC (#18730)
Inlining of critical CSS is turned off by default. To opt-in this feature set `inlineCritical` to `true`.
Example:
```json
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": {
"styles": {
"minify": true,
"inlineCritical": true,
}
},
```
To learn more about critical CSS see;
https://web.dev/defer-non-critical-csshttps://web.dev/extract-critical-css/
In a future version of the Angular CLI `inlineCritical` will be enabled by default.
Closes: #17966Closes: #11395Closes: #19445
JSON files a can also be valid fileReplacement when using the `resolveJsonModule` TypeScript feature. This causes JSON files to be resolved as JS modules and hence be part of the TypeScript program.
Closes#19378
fileReplacement is meant to replace compilation source files (JavaScript or TypeScript) with other compilation source files in the build. With this change we add validation to fail the build when the files have unsupported extensions.
Closes#11451
By default subdirectories within a symlinked directory are not searched by a glob. The new `followSymlinks` option for the longhand form of the `assets` browser builder option now allows opting in to search such subdirectories.
This allows improvements and bugfixes in later versions of the update command to be used in projects with older versions of the Angular CLI that do not have bootstrapping (<8.3.13).
BREAKING CHANGE:
Deprecated `rebaseRootRelativeCssUrls` browser builder option has been removed without replacement. This option was used to change root relative URLs in stylesheets to include base HREF and deploy URL and was used only for compatibility and transition as this behavior is non-standard.
With this change we inline Google fonts and icons in the index html file when optimization is enabled.
**Before**
```html
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
```
**After**
```html
<style>
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
}
</style>
```
To opt-out of this feature set `optimization.fonts: false` or `optimization.fonts.inline: false` in the browser builder options.
Example:
```js
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": {
"fonts": false
},
```
More information about the motivation for this feature can be found: https://github.com/angular/angular-cli/issues/18730
Note: internet access is required during the build for this optimization to work.
Previously, the workspace configuration file was found and loaded by individual commands potentially multiple times. This change moves the initial workspace location discovery and loading of the workspace to the CLI startup. It also provides the workspace to each command so that the commands can reuse the already loaded and parsed workspace configuration.
BREAKING CHANGE:
- Deprecated `scripts[].lazy` has been renamed with `scripts[].inject`
- Deprecated `styles[].lazy` has been renamed with `styles[].inject`
Note: this change only effects direct `@angular-devkit/build-angular` users and not application developers. Users will be migrated automatically off these options.
BREAKING CHANGE:
Browser builder `extractCss` option default value has been changed from `false` to `true`. This is to reflect the default behaviour when this deprecated option is removed.
This change implements the capability to specify multiple translation files per locale. The specified translation files for each locale will be merged prior to localization. The Angular configuration file has been updated to allow for both a single path string or an array of path strings when specifying the translations for each locale. If the same message identifier is present in multiple translation files, a warning will currently be issued and the last file with the duplicate message identifier will take precedence.
Closes#18276
Protractor `elementExplorer` debugger and element explorer cannot be used for Node.js 8+ since it relied on `_debugger` module.
In protractor version 5, this resulted in the below error:
```
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.
[10:25:35] I/direct - Using ChromeDriver directly...
[10:25:37] I/protractor -
[10:25:37] I/protractor - ------- Element Explorer -------
[10:25:37] I/protractor - Starting WebDriver debugger in a child process. Element Explorer is still beta, please report issues at github.com/angular/protractor
[10:25:37] I/protractor -
[10:25:37] I/protractor - Type <tab> to see a list of locator strategies.
[10:25:37] I/protractor - Use the `list` helper function to find elements by strategy:
[10:25:37] I/protractor - e.g., list(by.binding('')) gets all bindings.
[10:25:37] I/protractor -
***********************************************************
* WARNING: _debugger module not available on Node.js 8 *
* and higher. *
* *
* Use 'debugger' keyword instead: *
* https://goo.gl/MvWqFh *
***********************************************************
/Users/alanagius/cli-repos/demo-several/node_modules/protractor/built/debugger/debuggerCommons.js:14
throw e;
^
Error: Cannot find module '_debugger'
Require stack:
- /Users/alanagius/cli-repos/demo-several/node_modules/protractor/built/debugger/debuggerCommons.js
- /Users/alanagius/cli-repos/demo-several/node_modules/protractor/built/debugger/clients/explorer.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:980:15)
at Function.Module._load (internal/modules/cjs/loader.js:862:27)
at Module.require (internal/modules/cjs/loader.js:1042:19)
at require (internal/modules/cjs/helpers.js:77:18)
at Object.<anonymous> (/Users/alanagius/cli-repos/demo-several/node_modules/protractor/built/debugger/debuggerCommons.js:3:18)
at Module._compile (internal/modules/cjs/loader.js:1156:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
at Module.load (internal/modules/cjs/loader.js:1000:32)
at Function.Module._load (internal/modules/cjs/loader.js:899:14)
at Module.require (internal/modules/cjs/loader.js:1042:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/Users/alanagius/cli-repos/demo-several/node_modules/protractor/built/debugger/debuggerCommons.js',
'/Users/alanagius/cli-repos/demo-several/node_modules/protractor/built/debugger/clients/explorer.js'
]
}
```
but in protractor version 7, this logic was removed.
BREAKING CHANGE:
Protractor builder elementExplorer option has been removed. This was not compatable with the Node.Js versions that the Angular CLI supports. See: https://github.com/angular/protractor/blob/master/docs/debugging.md#enabled-control-flow for an alternative debugging methods.
BREAKING CHANGE:
Removed deprecated `typescriptMismatch` warning option. Users will be migrated off this option automatically. Users wishing to disable TypeScript version checks should use the Angular compiler option `disableTypeScriptVersionCheck`, see https://angular.io/guide/angular-compiler-options#disabletypescriptversioncheck for more information.
BREAKING CHANGE:
The following deprecated devkit builders options have been removed:
- `skipAppShell:` This has no effect
- `evalSourceMap`: This done to improve performance in older versions of the CLI and is no longer needed
- `vendorSourceMap`: Use `sourceMap.vendor` instead
- `profile`: Use `NG_BUILD_PROFILING` environment variable instead
BREAKING CHANGE
Deprecated browser builder option `es5BrowserSupport` has been removed. The inclusion for ES5 polyfills will be determined from the browsers listed in the browserslist configuration.
Depending on CommonJS modules is know to cause optimization bailouts. With this change when running a browser build and scripts optimization is enabled we display a warning.
To suppress the warning for a particular package, users can use the `allowedCommonJsDepedencies` builder options.
Example:
```
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
...
"allowedCommonJsDepedencies": ["bootstrap"]
},
}
```
Reference: TOOL-1328
Third party libraries can attempt to write color codes to the output even though the CLI has already determined that color should not be used. The previously implemented color removal code is no longer functional since the update of ansi-colors to 4.1.0. While this appears to be a defect in the aforementioned package, the new CLI removal method not only bypasses the defect but also unneeded execution logic that the CLI does not need in this case.
Fixes: #17053
When an error occurs during ng update we currently discard the stack trace which in some cases made it hard to identify the cause of the error.
Now, we print the stack trace to a log file similarly to unhandled exceptions.
Example of CMD output;
```cmd
** Executing migrations of package '@angular/core' **
> Static flag migration.
Removes the `static` flag from dynamic queries.
As of Angular 9, the "static" flag defaults to false and is no longer required for your view and content queries.
Read more about this here: https://v9.angular.io/guide/migration-dynamic-flag
× Migration failed: x
See "C:\Users\alag\AppData\Local\Temp\ng-NgmC1G\angular-errors.log" for further details.
```
Example of log file contents:
```txt
[error] Error: x
at UpdateCommand.executeSchematic (C:\git\angular-cli\test\node_modules\@angular\cli\commands\update-impl.js:98:19)
at UpdateCommand.executePackageMigrations (C:\git\angular-cli\test\node_modules\@angular\cli\commands\update-impl.js:167:39)
at UpdateCommand.executeMigrations (C:\git\angular-cli\test\node_modules\@angular\cli\commands\update-impl.js:161:21)
at UpdateCommand.run (C:\git\angular-cli\test\node_modules\@angular\cli\commands\update-impl.js:394:38)
at async UpdateCommand.validateAndRun (C:\git\angular-cli\test\node_modules\@angular\cli\models\command.js:134:28)
at async Object.runCommand (C:\git\angular-cli\test\node_modules\@angular\cli\models\command-runner.js:201:24)
at async default_1 (C:\git\angular-cli\test\node_modules\@angular\cli\lib\cli\index.js:62:31)
```
Pass the "grep" and "invertGrep" flags through to the Angular Protractor
builder as "jasmineNodeOpts" so that individual specs within an E2E test
file can be targeted.
Fixes#13020
