build: pretty print example module (angular#14264)

* In order to debug the example data for the tests on `material.angular.io`, I had to look into the `example-module.ts` output, but it was nearly impossible to read because we don't pretty print the auto-generated code.

Author: devversion

tools/example-module/example-module.template

@@ -21,7 +21,8 @@ export interface LiveExample {
 }
 
 export const EXAMPLE_COMPONENTS: {[key: string]: LiveExample} = ${exampleComponents};
-export const EXAMPLE_LIST = ${exampleList}
+
+export const EXAMPLE_LIST = ${exampleList};
 
 @NgModule({
   declarations: EXAMPLE_LIST,

tools/example-module/generate-example-module.ts

@@ -26,7 +26,7 @@ function inlineExampleModuleTemplate(parsedData: ExampleMetadata[]): string {
   const quotePlaceholder = '◬';
   const exampleList = parsedData.reduce((result, data) => {
     return result.concat(data.component).concat(data.additionalComponents);
-  }, [] as string[]).join(',');
+  }, [] as string[]);
 
   const exampleComponents = parsedData.reduce((result, data) => {
     result[data.id] = {
@@ -44,8 +44,8 @@ function inlineExampleModuleTemplate(parsedData: ExampleMetadata[]): string {
 
   return fs.readFileSync(require.resolve('./example-module.template'), 'utf8')
     .replace('${exampleImports}', exampleImports)
-    .replace('${exampleComponents}', JSON.stringify(exampleComponents))
-    .replace('${exampleList}', `[${exampleList}]`)
+    .replace('${exampleComponents}', JSON.stringify(exampleComponents, null, 2))
+    .replace('${exampleList}', `[\n  ${exampleList.join(',\n  ')}\n]`)
     .replace(new RegExp(`"${quotePlaceholder}|${quotePlaceholder}"`, 'g'), '');
 }