build: use mjs files for ng-dev configuration (#32309)

* build: use mjs files for ng-dev configuration

In preperation for ng-dev requiring mjs files for configuration, switch over our usage

* ci: set up validation of the ng-dev configuration on CI

(cherry picked from commit 8e8314c)

Author: josephperrott

.github/workflows/ci.yml

@@ -24,6 +24,8 @@ jobs:
         uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@95e3a0ede6dfa1aedd34b03918ad72b18f87e5ae
       - name: Install node modules
         run: pnpm install --frozen-lockfile
+      - name: Validate ng-dev config
+        run: pnpm ng-dev config validate
       - name: Checking package externals
         run: |
           bazel build //:package_externals

.github/workflows/pr.yml

@@ -22,6 +22,8 @@ jobs:
         uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@95e3a0ede6dfa1aedd34b03918ad72b18f87e5ae
       - name: Install node modules
         run: pnpm install --frozen-lockfile
+      - name: Validate ng-dev config
+        run: pnpm ng-dev config validate
       - name: Checking package externals
         run: |
           bazel build //:package_externals

.ng-dev/caretaker.mts renamed to .ng-dev/caretaker.mjs

@@ -1,7 +1,9 @@
-import {CaretakerConfig} from '@angular/ng-dev';
-
-/** The configuration for `ng-dev caretaker` commands. */
-export const caretaker: CaretakerConfig = {
+/**
+ * The configuration for `ng-dev caretaker` commands.
+ *
+ * @type { import("@angular/ng-dev").CaretakerConfig }
+ */
+export const caretaker = {
   githubQueries: [
     {
       name: 'Merge Queue',

.ng-dev/commit-message.mts renamed to .ng-dev/commit-message.mjs

@@ -1,9 +1,9 @@
-import {CommitMessageConfig} from '@angular/ng-dev';
-
 /**
  * The configuration for `ng-dev commit-message` commands.
+ *
+ * @type { import("@angular/ng-dev").CommitMessageConfig }
  */
-export const commitMessage: CommitMessageConfig = {
+export const commitMessage = {
   maxLineLength: Infinity,
   minBodyLength: 0,
   minBodyLengthTypeExcludes: ['docs'],

.ng-dev/config.mts renamed to .ng-dev/config.mjs

@@ -0,0 +1,11 @@
+/**
+ * Configuration for the `ng-dev format` command.
+ *
+ * @type { import("@angular/ng-dev").FormatConfig }
+ */
+export const format = {
+  buildifier: true,
+  prettier: {
+    matchers: ['**/*.{js,ts,mts,mjs,json}'],
+  },
+};

.ng-dev/format.mjs

@@ -0,0 +1,12 @@
+/**
+ * Github configuration for the `ng-dev` command. This repository is used as
+ * remote for the merge script and other utilities like `ng-dev pr rebase`.
+ *
+ * @type { import("@angular/ng-dev").GithubConfig }
+ */
+export const github = {
+  owner: 'angular',
+  name: 'components',
+  mainBranchName: 'main',
+  useNgDevAuthService: true,
+};

.ng-dev/format.mts

@@ -1,10 +1,10 @@
-import {PullRequestConfig} from '@angular/ng-dev';
-
 /**
- * Configuration for the pull request commands in `ng-dev`. This includes the
- * setup for the merge command.
+ * Configuration for the merge tool in `ng-dev`. This sets up the labels which
+ * are respected by the merge script (e.g. the target labels).
+ *
+ * @type { import("@angular/ng-dev").PullRequestConfig }
  */
-export const pullRequest: PullRequestConfig = {
+export const pullRequest = {
   // By default, the merge script merges locally with `git cherry-pick` and autosquash.
   // This has the downside of pull requests showing up as `Closed` instead of `Merged`.
   // In the components repository, since we don't use fixup or squash commits, we can