fix(compiler): Pretty print object instead of [Object object] (#22689)

The 'stringify' function prints an object as [Object object] which
is not very helpful in many cases, especially in a diagnostics
message. This commit changes the behavior to pretty print an object.

PR Close #22689

Author: Keen Yee Liau

packages/compiler/src/util.ts

@@ -163,6 +163,8 @@ export interface OutputContext {
   importExpr(reference: any, typeParams?: o.Type[]|null, useSummaries?: boolean): o.Expression;
 }
 
+const MAX_LENGTH_STRINGIFY = 100;
+
 export function stringify(token: any): string {
   if (typeof token === 'string') {
     return token;
@@ -184,14 +186,27 @@ export function stringify(token: any): string {
     return `${token.name}`;
   }
 
-  const res = token.toString();
+  let res;
+  try {
+    res = JSON.stringify(token);
+  } catch {
+    res = token.toString();
+  }
 
   if (res == null) {
     return '' + res;
   }
 
   const newLineIndex = res.indexOf('\n');
-  return newLineIndex === -1 ? res : res.substring(0, newLineIndex);
+  if (0 < newLineIndex) {
+    res = res.substring(0, newLineIndex);
+  }
+
+  if (MAX_LENGTH_STRINGIFY < res.length) {
+    res = res.substring(0, MAX_LENGTH_STRINGIFY) + '...';
+  }
+
+  return res;
 }
 
 /**

packages/compiler/test/metadata_resolver_spec.ts

@@ -409,7 +409,7 @@ import {TEST_COMPILER_PROVIDERS} from './test_bindings';
 
          expect(() => { resolver.getNgModuleMetadata(InvalidModule); })
              .toThrowError(
-                 `Unexpected value '[object Object]' imported by the module 'InvalidModule'. Please add a @NgModule annotation.`);
+                 `Unexpected value '{"ngModule":true}' imported by the module 'InvalidModule'. Please add a @NgModule annotation.`);
        }));
   });
 

packages/compiler/test/util_spec.ts

@@ -7,7 +7,8 @@
  */
 
 import {fakeAsync} from '@angular/core/testing/src/fake_async';
-import {SyncAsync, escapeRegExp, splitAtColon, utf8Encode} from '../src/util';
+
+import {SyncAsync, escapeRegExp, splitAtColon, stringify, utf8Encode} from '../src/util';
 
 {
   describe('util', () => {
@@ -75,5 +76,23 @@ import {SyncAsync, escapeRegExp, splitAtColon, utf8Encode} from '../src/util';
             ([input, output]: [string, string]) => { expect(utf8Encode(input)).toEqual(output); });
       });
     });
+
+    describe('stringify', () => {
+      it('should pretty print an Object', () => {
+        const result = stringify({hello: 'world'});
+        expect(result).toBe('{"hello":"world"}');
+      });
+
+      it('should truncate large object', () => {
+        const result = stringify({
+          selector: 'app-root',
+          preserveWhitespaces: false,
+          templateUrl: './app.component.ng.html',
+          styleUrls: ['./app.component.css']
+        });
+        expect(result).toBe(
+            '{"selector":"app-root","preserveWhitespaces":false,"templateUrl":"./app.component.ng.html","styleUrl...');
+      });
+    });
   });
-}
+}