build(docs-infra): always specify a landing file for StackBlitz projects (#34553)

The StackBlitz API (which we use to generate StackBlitz projects on the
fly, when a user clicks on a live example link in the docs) allows
specifying the file to open in the editor by passing a query param. If
no file is specified, StackBlitz opens a default one. In the past, it
used to be `main.ts` and nowadays it seems to be `app.component.ts`.

StackBlitz builder, the tool that we use to generate the StackBlitz
projects, allows specifying the primary file by setting the `file`
property in the corresponding `stackblitz.json`.

Previously, if the `file` property was not set, StackBlitz builder would
not specify a file, thus falling back on StackBlitz's default behavior.
This was not great, because the default behavior may change unexpectedly
is the future to something that is less useful for our users.

This commit change StackBlitz builder to always specify a primary file.
If no file is specified in `stackblitz.json`, the builder will look
for the first file that exists in the example from a list of predefined
files.

Partially addresses #22357.

PR Close #34553

aio/content/examples/accessibility/stackblitz.json

@@ -5,6 +5,5 @@
     "!**/*.js",
     "!**/*.[1,2].*"
   ],
-  "file": "src/app/app.component.ts",
   "tags": ["Accessibility"]
 }

aio/content/examples/animations/stackblitz.json

@@ -5,5 +5,6 @@
     "!**/*.js",
     "!**/*.[1,2,3].*"
   ],
+  "file": "src/app/app.component.ts",
   "tags": ["animations"]
 }

aio/content/examples/architecture/stackblitz.json

@@ -5,5 +5,5 @@
     "!**/*.js",
     "!**/*.[1].*"
   ],
-  "file": "src/app/app.module.ts"
+  "file": "src/app/hero-list.component.html"
 }

aio/content/examples/attribute-directives/stackblitz.json

@@ -5,5 +5,6 @@
     "!**/*.js",
     "!**/*.[1,2,3].*"
   ],
+  "file": "src/app/highlight.directive.ts",
   "tags": ["attribute", "directive"]
 }

aio/content/examples/component-styles/stackblitz.json

@@ -6,5 +6,6 @@
     "!**/*.native.*",
     "!**/*.[1].*"
   ],
+  "file": "src/app/hero-app.component.ts",
   "tags": ["CSS"]
 }

aio/content/examples/dependency-injection-in-action/stackblitz.json

@@ -5,5 +5,6 @@
     "!**/*.js",
     "!**/*.[1].*"
   ],
+  "file": "src/app/app.component.ts",
   "tags":["cookbook"]
 }

aio/content/examples/dependency-injection/stackblitz.json

@@ -6,5 +6,6 @@
     "!**/*.[0,1,2,3,4].*",
     "!**/dummy.module.ts"
   ],
+  "file": "src/app/app.component.ts",
   "tags": ["dependency", "di"]
 }

aio/content/examples/displaying-data/stackblitz.json

@@ -6,5 +6,6 @@
     "!**/app-ctor.component.ts",
     "!**/*.[1,2,3].*"
   ],
+  "file": "src/app/app.component.ts",
   "tags": ["Template"]
 }

aio/content/examples/docs-style-guide/second.stackblitz.json

@@ -1,8 +1,11 @@
 {
   "description": "Second authors style guide stackblitz (non-executing)",
   "files": [
-    "src/index.2.html"
+    "src/main.2.ts",
+    "src/index.2.html",
+    "src/styles.css"
   ],
   "main": "src/index.2.html",
+  "file": "src/index.html",
   "tags": ["author", "style guide"]
 }

aio/content/examples/dynamic-component-loader/stackblitz.json

@@ -4,5 +4,6 @@
     "!**/*.d.ts",
     "!**/*.js"
   ],
+  "file": "src/app/app.component.ts",
   "tags":["cookbook component"]
 }

aio/content/examples/dynamic-form/stackblitz.json

@@ -5,5 +5,6 @@
     "!**/*.js",
     "!**/*.[1].*"
   ],
+  "file": "src/app/app.component.ts",
   "tags":["cookbook"]
 }

aio/content/examples/elements/stackblitz.json

@@ -5,5 +5,6 @@
     "!**/*.js",
     "!**/*.[1].*"
   ],
+  "file": "src/app/popup.service.ts",
   "tags":["cookbook"]
 }

aio/content/examples/form-validation/stackblitz.json

@@ -4,5 +4,6 @@
     "!**/*.d.ts",
     "!**/*.js",
     "!**/*.[1].*"
-  ]
+  ],
+  "file": "src/app/app.component.ts"
 }

aio/content/examples/forms-overview/stackblitz.json

@@ -3,5 +3,6 @@
   "files":[
     "!**/*.d.ts",
     "!**/*.js"
-  ]
+  ],
+  "file": "src/app/app.component.ts"
 }

aio/content/examples/forms/stackblitz.json

@@ -3,5 +3,6 @@
   "files":[
     "!**/*.d.ts",
     "!**/*.js"
-  ]
+  ],
+  "file": "src/app/hero-form/hero-form.component.html"
 }

aio/content/examples/getting-started-v0/stackblitz.json

@@ -5,5 +5,6 @@
     "!**/*.js",
     "!**/*.[0-9].*"
   ],
+  "file": "src/app/app.component.ts", 
   "tags": ["Angular", "getting started", "tutorial"]
 }

aio/content/examples/getting-started/stackblitz.json

@@ -5,5 +5,6 @@
     "!**/*.js",
     "!**/*.[0-9].*"
   ],
+  "file": "src/app/product-list/product-list.component.html",
   "tags": ["Angular", "getting started", "tutorial"]
 }

aio/content/examples/hierarchical-dependency-injection/stackblitz.json

@@ -4,5 +4,6 @@
     "!**/*.d.ts",
     "!**/*.js"
   ],
+  "file": "src/app/app.component.ts", 
   "tags": ["dependency", "injection"]
 }

aio/content/examples/http/stackblitz.json

@@ -3,10 +3,10 @@
   "files":[
     "!**/*.d.ts",
     "!**/*.js",
-
     "!src/testing/*.*",
     "!src/index-specs.html",
     "!src/main-specs.ts"
   ],
+  "file": "src/app/app.component.ts", 
   "tags": ["http"]
 }

aio/content/examples/lazy-loading-ngmodules/stackblitz.json

@@ -5,6 +5,6 @@
     "!**/*.js",
     "!**/*.[1,2].*"
   ],
-  "file": "src/app/app.component.ts",
+  "file": "src/app/app-routing.module.ts",
   "tags": ["lazy loading"]
 }

aio/content/examples/ngmodules/stackblitz.json

@@ -5,6 +5,6 @@
     "!**/*.js",
     "!**/*.[1,2].*"
   ],
-  "file": "src/app/app.component.ts",
+  "file": "src/app/app.module.ts",
   "tags": ["NgModules"]
 }

aio/content/examples/reactive-forms/stackblitz.json

@@ -11,5 +11,6 @@
     "!src/app/main-final.ts",
     "!src/index-final.html"
   ],
+  "file": "src/app/app.component.ts",
   "tags": ["reactive", "forms"]
 }

aio/content/examples/router/stackblitz.json

@@ -7,5 +7,6 @@
     "!src/app/crisis-list/*.*",
     "!src/app/hero-list/*.*"
   ],
-  "tags": ["router"]
+  "tags": ["router"],
+  "file": "src/app/app-routing.module.ts"
 }

aio/content/examples/security/stackblitz.json

@@ -4,5 +4,6 @@
     "!**/*.d.ts",
     "!**/*.js"
   ],
+  "file": "src/app/app.component.ts",
   "tags": ["security"]
 }

aio/content/examples/set-document-title/stackblitz.json

@@ -5,5 +5,6 @@
 		"!**/*.js",
 		"!**/*.[1].*"
 	],
+	"file": "src/app/app.component.ts", 
 	"tags": [ "cookbook" ]
 }

aio/content/examples/structural-directives/stackblitz.json

@@ -5,6 +5,7 @@
     "!**/*.js",
     "!src/app/scrap.txt"
   ],
+  "file": "src/app/app.component.ts",
   "tags": [
     "structural", "directives", "template", "ngIf",
     "ngSwitch", "ngFor"

aio/content/examples/toh-pt0/stackblitz.json

@@ -5,5 +5,6 @@
     "!**/*.js",
     "!**/*.[1].*"
   ],
+  "file": "src/app/app.component.ts",
   "tags": ["tutorial", "tour", "heroes"]
 }

aio/content/examples/toh-pt1/stackblitz.json

@@ -6,5 +6,6 @@
     "!**/*.[1].*",
     "!**/dummy.module.ts"
   ],
+  "file": "src/app/heroes/heroes.component.html",
   "tags": ["tutorial", "tour", "heroes"]
 }

aio/content/examples/toh-pt2/stackblitz.json

@@ -5,5 +5,6 @@
     "!**/*.js",
     "!**/*.[1].*"
   ],
+  "file": "src/app/heroes/heroes.component.html",
   "tags": ["tutorial", "tour", "heroes"]
 }

aio/content/examples/toh-pt3/stackblitz.json

@@ -5,5 +5,6 @@
     "!**/*.js",
     "!**/*.[1].*"
   ],
+  "file": "src/app/heroes/heroes.component.html",
   "tags": ["tutorial", "tour", "heroes"]
 }

aio/content/examples/toh-pt4/stackblitz.json

@@ -5,5 +5,6 @@
     "!**/*.js",
     "!**/*.[1,2].*"
   ],
+  "file": "src/app/hero.service.ts",
   "tags": ["tutorial", "tour", "heroes"]
 }

aio/content/examples/toh-pt5/stackblitz.json

@@ -5,5 +5,6 @@
     "!**/*.js",
     "!**/*.[0,1,2,3].*"
   ],
+  "file": "src/app/app-routing.module.ts",
   "tags": ["tutorial", "tour", "heroes", "router"]
 }

aio/content/examples/toh-pt6/stackblitz.json

@@ -5,5 +5,6 @@
     "!**/*.js",
     "!**/*.[1,2].*"
   ],
+  "file": "src/app/hero.service.ts",
   "tags": ["tutorial", "tour", "heroes", "http"]
 }