Previously, when using an older version of the Angular CLI, during `ng update`, we download the temporary `latest` version to run the update. The ensured that when running that the runner used to run the update contains the latest bug fixes and improvements.
This however, can be problematic in some cases. Such as when there are API breaking changes, when running a relatively old schematic with the latest CLI can cause runtime issues, especially since those schematics were never meant to be executed on a CLI X major versions in the future.
With this change, we improve the logic to determine which version of the Angular CLI should be used to run the update.
Below is a summarization of this.
- When using the `--next` command line argument, the `@next` version of the CLI will be used to run the update.
- When updating an `@angular/` or `@nguniversal/` package, the target version will be used to run the update. Example: `ng update @angular/core@12`, the update will run on most recent patch version of `@angular/cli` of that major version `@12.2.6`.
- When updating an `@angular/` or `@nguniversal/` and no target version is specified. Example: `ng update @angular/core` the update will run on most latest version of the `@angular/cli`.
- When updating a third-party package, the most recent patch version of the installed `@angular/cli` will be used to run the update. Example if `13.0.0` is installed and `13.1.1` is available on NPM, the latter will be used.
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"
}
}
...
}
```
Node.js v16 will be entering an LTS state prior to the release of Angular v13 which allows Node.js v16 to be marked as officially supported by the Angular CLI. The initial bootstrapping check now adds Node.js v16 to the output message in the event of an unsupported Node.js version.
NOTE: Prior to the final v13 release, the Node.js v16 minor should be updated to the actual LTS version once available.
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.
The CLI contains a helper class instance that provides the version of the executing CLI. By using this helper throughtout the code, repeat `require` calls are no longer necessary.
All TypeScript files have been updated to pass the new eslint-based linting checks. eslint compatible disabling comments have also been added in place of the previous tslint comments.
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": {...}
}
}
```
With this change we remove the dependency on the unmaintained universal-analytics package. We also solve several package deprecation warnings when creating a new workspace.
Closes#16952
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.
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.
