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.
The `esModuleInterop` option is recommended to be enable by TypeScript and corrects several assumptions TypeScript would otherwise make when importing CommonJS files.
This option change helps ensure compatibility as packages move towards ESM.
Reference: https://www.typescriptlang.org/tsconfig#esModuleInterop
This change removes the usage of the shell execution when spawning the latest CLI version when bootstrapping the update command. The absolute path of the node process is now spawned which removes the need for any shell path resolution. This also removes the need to quote and/or escape command arguments which can be error-prone. Node.js and the OS will now handle any quoting and escaping automatically and without any custom logic.
Unsupported versions of Node.js will now show an unsupported warning when the `ng version` command is executed.
Currently Node.js major versions 12 and 14 are considered supported and tested.
Closes#20879
Prior to performing the initial updated package installation during the `ng update` process, the workspace node modules directory will be removed. This cleaning increases the guarantees that the package manager will hoist packages into the correct locations and avoid peer dependency inconsistencies.
With this change we allow unset a config value to be a JSON.
Example, `ng config -g schematics {}` will remove the entire `schematics` section from the configuration.
With this change we allow unset a config value when the provided value is `undefined`.
Example, `ng config -g schematics undefined` will remove the entire `schematics` section from the configuration.
When the CLI update command's `--force` option is used, the underlying package manager will also be executed with its force option. This behavior is especially important with the advent of npm 7 which will fail installation if any peer dependency version ranges are mismatched.
Previously, the `--project` flag was ignored when gathering and merging the schematics defaults from the angular workspace configuration file.
Closes#20666
With this change we change the package installation to async. This is needed as otherwise during `ng-add` the spinner gets stuck. With this change we also add the spinner in the installation methods.
Previously, we disabled options in the help output multiple times.
Previous output
```
Generates and/or modifies files based on a schematic.
usage: ng generate c <name> [options]
arguments:
schematic
The schematic or collection:schematic to generate.
name
The name of the component.
options:
--change-detection (-c)
The change detection strategy to use in the new component.
--defaults
When true, disables interactive input prompts for options with a default.
--display-block (-b)
Specifies if the style will contain `:host { display: block; }`.
--dry-run (-d)
When true, runs through and reports activity without writing out results.
--entry-component
When true, the new component is the entry component of the declaring NgModule.
--export
When true, the declaring NgModule exports this component.
--flat
When true, creates the new files at the top level of the current project.
--force (-f)
When true, forces overwriting of existing files.
--help
Shows a help message for this command in the console.
--inline-style (-s)
When true, includes styles inline in the component.ts file. Only CSS styles can be included inline. By default, an external styles file is created and referenced in the component.ts file.
--inline-template (-t)
When true, includes template inline in the component.ts file. By default, an external template file is created and referenced in the component.ts file.
--interactive
When false, disables interactive input prompts.
--lint-fix
When true, applies lint fixes after generating the component.
--module (-m)
The declaring NgModule.
--prefix (-p)
The prefix to apply to the generated component selector.
--project
The name of the project.
--selector
The HTML selector to use for this component.
--skip-import
When true, does not import this component into the owning NgModule.
--skip-selector
Specifies if the component should have a selector or not.
--skip-tests
When true, does not create "spec.ts" test files for the new component.
--style
The file extension or preprocessor to use for style files.
--type
Adds a developer-defined type to the filename, in the format "name.type.ts".
--view-encapsulation (-v)
The view encapsulation strategy to use in the new component.
Help for schematic c
Creates a new generic component definition in the given or default project.
arguments:
name
The name of the component.
options:
--change-detection (-c)
The change detection strategy to use in the new component.
--display-block (-b)
Specifies if the style will contain `:host { display: block; }`.
--entry-component
When true, the new component is the entry component of the declaring NgModule.
--export
When true, the declaring NgModule exports this component.
--flat
When true, creates the new files at the top level of the current project.
--inline-style (-s)
When true, includes styles inline in the component.ts file. Only CSS styles can be included inline. By default, an external styles file is created and referenced in the component.ts file.
--inline-template (-t)
When true, includes template inline in the component.ts file. By default, an external template file is created and referenced in the component.ts file.
--lint-fix
When true, applies lint fixes after generating the component.
--module (-m)
The declaring NgModule.
--prefix (-p)
The prefix to apply to the generated component selector.
--project
The name of the project.
--selector
The HTML selector to use for this component.
--skip-import
When true, does not import this component into the owning NgModule.
--skip-selector
Specifies if the component should have a selector or not.
--skip-tests
When true, does not create "spec.ts" test files for the new component.
--style
The file extension or preprocessor to use for style files.
--type
Adds a developer-defined type to the filename, in the format "name.type.ts".
--view-encapsulation (-v)
The view encapsulation strategy to use in the new component.
To see help for a schematic run:
ng generate <schematic> --help
```
New output
```
Generates and/or modifies files based on a schematic.
usage: ng generate c <name> [options]
arguments:
schematic
The schematic or collection:schematic to generate.
name
The name of the component.
options:
--change-detection (-c)
The change detection strategy to use in the new component.
--defaults
Disable interactive input prompts for options with a default.
--display-block (-b)
Specifies if the style will contain `:host { display: block; }`.
--dry-run (-d)
Run through and reports activity without writing out results.
--export
The declaring NgModule exports this component.
--flat
Create the new files at the top level of the current project.
--force (-f)
Force overwriting of existing files.
--help
Shows a help message for this command in the console.
--inline-style (-s)
Include styles inline in the component.ts file. Only CSS styles can be included inline. By default, an external styles file is created and referenced in the component.ts file.
--inline-template (-t)
Include template inline in the component.ts file. By default, an external template file is created and referenced in the component.ts file.
--interactive
Enable interactive input prompts.
--lint-fix
Apply lint fixes after generating the component.
--module (-m)
The declaring NgModule.
--prefix (-p)
The prefix to apply to the generated component selector.
--project
The name of the project.
--selector
The HTML selector to use for this component.
--skip-import
Do not import this component into the owning NgModule.
--skip-selector
Specifies if the component should have a selector or not.
--skip-tests
Do not create "spec.ts" test files for the new component.
--style
The file extension or preprocessor to use for style files.
--type
Adds a developer-defined type to the filename, in the format "name.type.ts".
--view-encapsulation (-v)
The view encapsulation strategy to use in the new component.
To see help for a schematic run:
ng generate <schematic> --help
```
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.
Reading throw #16034 the angular config should be placed in the
`$XDG_CONFIG_HOME/angular/` directory, but if the environmental variable
$XDG_CONFIG_HOME is set the first check of `xdgConfigHome` function will
only put it in the `$XDG_CONFIG_HOME` directory. Also renamed the config
file from `.angular-config.json` to `config.json` when it is in the
`~/.config/angular` directory since it doesn't need to be hidden.
With this change we consider the update schematics are idempotent. When updating from or between prereleases we will execute all migrations for the version.
`tsickle` doesn't be a dependency in users projects, if it is most certain it will cause updates to fail due to mismatching peer dependency on TypeScript.
