The `schematicCollections` can be placed under the `cli` option in the global `.angular.json` configuration, at the root or at project level in `angular.json` .
```jsonc
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"cli": {
"schematicCollections": ["@schematics/angular", "@angular/material"]
}
// ...
}
```
**Rationale**
When this option is not configured and a user would like to run a schematic which is not part of `@schematics/angular`,
the collection name needs to be provided to `ng generate` command in the form of `[collection-name:schematic-name]`. This make the `ng generate` command too verbose for repeated usages.
This is where `schematicCollections` comes handle. When adding `@angular/material` to the list of `schematicCollections`, the generate command will try to locate the schematic in the specified collections.
```
ng generate navigation
```
is equivalent to:
```
ng generate @angular/material:navigation
```
**Conflicting schematic names**
When multiple collections have a schematic with the same name. Both `ng generate` and `ng new` will run the first schematic matched based on the ordering (as specified) of `schematicCollections`.
DEPRECATED:
The `defaultCollection` workspace option has been deprecated in favor of `schematicCollections`.
Before
```json
"defaultCollection": "@angular/material"
```
After
```json
"schematicCollections": ["@angular/material"]
```
Closes#12157
With this change we deprecate the angular.json `defaultProject` option.
DEPRECATED:
The `defaultProject` workspace option has been deprecated. The project to use will be determined from the current working directory.
Closes#20661
Persistent disk build cache is now enabled by default. A number of options have been added to allow fine tuning of the cache.
The options can be configuration in `cli.cache` section in the `angular.json` as shown below.
- `enabled`: Configure whether disk caching is enabled. Defaults to `true`
- `environment`: Configure in which environment disk cache is enabled. Valid values `ci`, `local` or `all`. Defaults to: `local`
- `path`: cache base path. Defaults to `.angular/cache`
DEPRECATED: `NG_BUILD_CACHE` environment variable option will be removed in the next major version. Configure `cli.cache` in the workspace configuration instead.
BREAKING CHANGE: `NG_PERSISTENT_BUILD_CACHE` environment variable option no longer have effect. Configure `cli.cache` in the workspace configuration instead.
```json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"cli": {
"cache": {
"enabled": true,
"path": ".custom-cache-path",
"environment": "all"
}
}
...
}
```
All Angular builders are now located within one subdirectory of the `src` directory. This organization provides better discovery of the builders and will allow builder specific code to be stored in a single area.
With this change we automate the generation of `@angular/cli/lib/config/schema.json`. While on paper we could use quicktype for this. Quicktype doesn't handle `patternProperties` and `oneOf` that well.
How does this works?
Relative `$ref` will be resolved and inlined as part of the root schema definitions.
Example
```json
"@schematics/angular:enum": {
"$ref": "../../../../schematics/angular/enum/schema.json"
},
```
Will be parsed and transformed to
```json
"@schematics/angular:enum": {
"$ref": "#/definitions/SchematicsAngularEnumSchema"
},
"definitions: {
"SchematicsAngularEnumSchema": {
"title": "Angular Enum Options Schema",
"type": "object",
"description": "Generates a new, generic enum definition for the given or default project.",
"properties": {...}
}
}
```
The experimental rollup pass has significant issues with the new Ivy webpack plugin. It also, didn't produce as well as we hoped in real world scenarios infact in many cases this caused build to fail.
REAKING CHANGE:
The experimental rollup pass `--experimental-rollup-pass` option has been removed.
Closes#15836
With this change users can now their proxy server via the `HTTPS_PROXY` environment variable. The specified proxy will be used when making requests to inline fonts.
Closes#19401
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.
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.
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.
