angular / angular-cli

Previously in `update-8` test we used the Angular CLI in node_modules which caused incorrect result.

We now don't run `ng update @angular/core --next` or `ng update @angular/core`. This is due to our bumping strategy, which causes a period were `@angular/cli@latest` (v12.0.0) `@angular/core@latest` (v11.2.x) are of different major/minor version on the local NPM server. This causes `ng update` to fail.

NB: `ng update @angula/cli` will still cause `@angular/core` packages to be updated.

Uses the new shared RBE platform from the dev-infra package.

We introduced a shared Bazel platform for remote execution builds
using Google cloud. Previously we used `bazel_toolchains` for
providing the platform w/ additional CPP and Java toolchains

`bazel_toolchains` no longer provides default toolchains with the
latest version, but provides a tool (linux and windows only) for
generating toolchain/platforms, which then need to be checked
into the repository. This is quite inconvenient and cumbersome
(especially with no macOS support), so we just provided our own
platform and CPP toolchain within `@angular/dev-infra-private`. This is
more simple than all the effort we'd need to make the toolchain
generation tool work (while it would also increase the amount
of checked-in sources significantly; with more unused toolchains
for CPP or Java)

See: angular/angular#41767.

…roject`

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.

…ptimizations

CSS declaration orders matters in some cases. This optimization is currently causing broken CSS output.

Closes #20693

…gration in safe workspaces

Removal of `emitDecoratorMetadata` might cause runtime errors on projects which don't use the Angular Compiler to compile TypeScript code and therefore dependent on Decorators metadata during runtime.  One such example of these builders is `@nrwl/jest`.

With this change we configure the header/header rule to be fixable.

This change is needed so that new/modified E2E tests get formatted.

During a build, the number of iterations over both the TypeScript program's source files and Webpack's modules has been reduced. Both of these collections can contain a significant number of elements especially in larger applications.

This change adjusts the Angular required files rebuilding logic to not block on each individual file's Webpack module rebuild. Now all required Webpack modules are discovered then rebuilt asynchrounously and only blocked on the full list of rebuilds. The promise-based Webpack rebuild function is also now only created if a rebuild is required.

… help output

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
```

closes: #20667

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.

`tslint` is now replaced as the linter for the repository and `eslint` is used in its place.
The eslint configuration maintains the existing behavioral rules as well as adding many recommended rules from both `eslint` and `@typescript-eslint` via their respective exported recommended configurations. By leveraging the recommended configurations, the repository's configuration has also been simplified. Development scripts and unit tests also can now have specific rule overrides which reduces the amount of manually introduced disabling comments throughout the code.

This resolution is needed as otherwise if webpack versions are not on the exact version the compilation will fail.

Example of such errors;
```
packages/angular_devkit/build_angular/src/webpack/configs/common.ts:219:7 - error TS2345: Argument of type 'CopyPlugin' is not assignable to parameter of type '{ apply(compiler: Compiler): void; }'.
  Types of property 'apply' are incompatible.
    Type '(compiler: import("/home/circleci/ng/node_modules/@types/copy-webpack-plugin/node_modules/webpack/types").Compiler) => void' is not assignable to type '(compiler: import("/home/circleci/ng/node_modules/webpack/types").Compiler) => void'.
      Types of parameters 'compiler' and 'compiler' are incompatible.
        Type 'import("/home/circleci/ng/node_modules/webpack/types").Compiler' is not assignable to type 'import("/home/circleci/ng/node_modules/@types/copy-webpack-plugin/node_modules/webpack/types").Compiler'.
          The types of 'hooks.shouldEmit' are incompatible between these types.
            Type 'import("/home/circleci/ng/node_modules/tapable/tapable").SyncBailHook<[import("/home/circleci/ng/node_modules/webpack/types").Compilation], boolean, import("/home/circleci/ng/node_modules/tapable/tapable").UnsetAdditionalOptions>' is not assignable to type 'import("/home/circleci/ng/node_modules/tapable/tapable").SyncBailHook<[import("/home/circleci/ng/node_modules/@types/copy-webpack-plugin/node_modules/webpack/types").Compilation], boolean, import("/home/circleci/ng/node_modules/tapable/tapable").UnsetAdditionalOptions>'.

219       new CopyWebpackPlugin({
          ~~~~~~~~~~~~~~~~~~~~~~~
220         patterns: copyWebpackPluginPatterns,
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
221       }),
    ~~~~~~~~
```

Currently, the Renovate PRs will run the full E2E suit on WIndows because `CIRCLE_PR_NUMBER` is not defined for PRs which are opened from non forked repos. Instead we replace it with `CIRCLE_PULL_REQUEST` which is always defined.

Also, such non forked PRs will cause uploading of Bazel result in remote cache. This is now disabled.

Example runs:
https://app.circleci.com/pipelines/github/angular/angular-cli/15228/workflows/4bf31046-3317-4422-bf57-5156eef69259/jobs/245137

With this change add several new validations;

- Validate NgBot Configuration
- Validate Circular Dependencies
- Validate Code Formatting, now also formats and checks Bazel files.

With this change we use `ng-dev ts-circular-deps` to detect circular dependencies so that all repos in Angular org use the same tool.