feat: introduce source maps for templates (#15011)

The main use case for the generated source maps is to give
errors a meaningful context in terms of the original source
that the user wrote.

Related changes that are included in this commit:

* renamed virtual folders used for jit:
  * ng://<module type>/module.ngfactory.js
  * ng://<module type>/<comp type>.ngfactory.js
  * ng://<module type>/<comp type>.html (for inline templates)
* error logging:
  * all errors that happen in templates are logged
    from the place of the nearest element.
  * instead of logging error messages and stacks separately,
    we log the actual error. This is needed so that browsers apply
    source maps to the stack correctly.
  * error type and error is logged as one log entry.

Note that long-stack-trace zone has a bug that 
disables source maps for stack traces,
see https://github.com/angular/zone.js/issues/661.

BREAKING CHANGE:

- DebugNode.source no more returns the source location of a node.  

Closes 14013

packages/compiler/test/output/abstract_emitter_node_only_spec.ts

@@ -9,10 +9,7 @@
 import {ParseLocation, ParseSourceFile, ParseSourceSpan} from '@angular/compiler';
 import {EmitterVisitorContext} from '@angular/compiler/src/output/abstract_emitter';
 import {SourceMap} from '@angular/compiler/src/output/source_map';
-
-const SourceMapConsumer = require('source-map').SourceMapConsumer;
-const b64 = require('base64-js');
-
+import {extractSourceMap, originalPositionFor} from './source_map_util';
 
 export function main() {
   describe('AbstractEmitter', () => {
@@ -47,12 +44,10 @@ export function main() {
         ctx.print(createSourceSpan(fileA, 0), 'fileA-0');
 
         const sm = ctx.toSourceMapGenerator(null, 10).toJSON();
-        const smc = new SourceMapConsumer(sm);
-        expect(smc.originalPositionFor({line: 11, column: 0})).toEqual({
+        expect(originalPositionFor(sm, {line: 11, column: 0})).toEqual({
           line: 1,
           column: 0,
           source: 'a.js',
-          name: null,
         });
       });
 
@@ -109,9 +104,8 @@ function expectMap(
     ctx: EmitterVisitorContext, genLine: number, genCol: number, source: string = null,
     srcLine: number = null, srcCol: number = null) {
   const sm = ctx.toSourceMapGenerator().toJSON();
-  const smc = new SourceMapConsumer(sm);
   const genPosition = {line: genLine + 1, column: genCol};
-  const origPosition = smc.originalPositionFor(genPosition);
+  const origPosition = originalPositionFor(sm, genPosition);
   expect(origPosition.source).toEqual(source);
   expect(origPosition.line).toEqual(srcLine === null ? null : srcLine + 1);
   expect(origPosition.column).toEqual(srcCol);
@@ -134,15 +128,3 @@ function createSourceSpan(file: ParseSourceFile, idx: number) {
   const sourceSpan = new ParseSourceSpan(start, end);
   return {sourceSpan};
 }
-
-export function extractSourceMap(source: string): SourceMap {
-  let idx = source.lastIndexOf('\n//#');
-  if (idx == -1) return null;
-  const smComment = source.slice(idx).trim();
-  const smB64 = smComment.split('sourceMappingURL=data:application/json;base64,')[1];
-  return smB64 ? JSON.parse(decodeB64String(smB64)) : null;
-}
-
-function decodeB64String(s: string): string {
-  return b64.toByteArray(s).reduce((s: string, c: number) => s + String.fromCharCode(c), '');
-}

packages/compiler/test/output/abstract_emitter_spec.ts

@@ -33,7 +33,10 @@ export function main() {
   });
 }
 
-export function stripSourceMap(source: string): string {
+export function stripSourceMapAndNewLine(source: string): string {
+  if (source.endsWith('\n')) {
+    source = source.substring(0, source.length - 1);
+  }
   const smi = source.lastIndexOf('\n//#');
   if (smi == -1) return source;
   return source.slice(0, smi);

packages/compiler/test/output/js_emitter_node_only_spec.ts

@@ -14,9 +14,7 @@ import {ImportResolver} from '@angular/compiler/src/output/path_util';
 import {SourceMap} from '@angular/compiler/src/output/source_map';
 import {ParseLocation, ParseSourceFile, ParseSourceSpan} from '@angular/compiler/src/parse_util';
 
-import {extractSourceMap} from './abstract_emitter_node_only_spec';
-
-const SourceMapConsumer = require('source-map').SourceMapConsumer;
+import {extractSourceMap, originalPositionFor} from './source_map_util';
 
 const someModuleUrl = 'somePackage/somePath';
 
@@ -54,12 +52,11 @@ export function main() {
         const sourceSpan = new ParseSourceSpan(startLocation, endLocation);
         const someVar = o.variable('someVar', null, sourceSpan);
         const sm = emitSourceMap(someVar.toStmt());
-        const smc = new SourceMapConsumer(sm);
 
         expect(sm.sources).toEqual(['in.js']);
         expect(sm.sourcesContent).toEqual([';;;var']);
-        expect(smc.originalPositionFor({line: 1, column: 0}))
-            .toEqual({line: 1, column: 3, source: 'in.js', name: null});
+        expect(originalPositionFor(sm, {line: 1, column: 0}))
+            .toEqual({line: 1, column: 3, source: 'in.js'});
       });
     });
   });

packages/compiler/test/output/js_emitter_spec.ts

@@ -12,7 +12,7 @@ import {JavaScriptEmitter} from '@angular/compiler/src/output/js_emitter';
 import * as o from '@angular/compiler/src/output/output_ast';
 import {ImportResolver} from '@angular/compiler/src/output/path_util';
 
-import {stripSourceMap} from './abstract_emitter_spec';
+import {stripSourceMapAndNewLine} from './abstract_emitter_spec';
 
 const someModuleUrl = 'somePackage/somePath';
 const anotherModuleUrl = 'somePackage/someOtherPath';
@@ -50,7 +50,7 @@ export function main() {
 
     function emitStmt(stmt: o.Statement, exportedVars: string[] = null): string {
       const source = emitter.emitStatements(someModuleUrl, [stmt], exportedVars || []);
-      return stripSourceMap(source);
+      return stripSourceMapAndNewLine(source);
     }
 
     it('should declare variables', () => {

packages/compiler/test/output/source_map_util.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {SourceMap} from '@angular/compiler/src/output/source_map';
+const b64 = require('base64-js');
+const SourceMapConsumer = require('source-map').SourceMapConsumer;
+
+export interface SourceLocation {
+  line: number;
+  column: number;
+  source: string;
+}
+
+export function originalPositionFor(
+    sourceMap: SourceMap, genPosition: {line: number, column: number}): SourceLocation {
+  const smc = new SourceMapConsumer(sourceMap);
+  // Note: We don't return the original object as it also contains a `name` property
+  // which is always null and we don't want to include that in our assertions...
+  const {line, column, source} = smc.originalPositionFor(genPosition);
+  return {line, column, source};
+}
+
+export function extractSourceMap(source: string): SourceMap {
+  let idx = source.lastIndexOf('\n//#');
+  if (idx == -1) return null;
+  const smComment = source.slice(idx).trim();
+  const smB64 = smComment.split('sourceMappingURL=data:application/json;base64,')[1];
+  return smB64 ? JSON.parse(decodeB64String(smB64)) : null;
+}
+
+function decodeB64String(s: string): string {
+  return b64.toByteArray(s).reduce((s: string, c: number) => s + String.fromCharCode(c), '');
+}

packages/compiler/test/output/ts_emitter_node_only_spec.ts

@@ -14,9 +14,7 @@ import {SourceMap} from '@angular/compiler/src/output/source_map';
 import {TypeScriptEmitter} from '@angular/compiler/src/output/ts_emitter';
 import {ParseSourceSpan} from '@angular/compiler/src/parse_util';
 
-import {extractSourceMap} from './abstract_emitter_node_only_spec';
-
-const SourceMapConsumer = require('source-map').SourceMapConsumer;
+import {extractSourceMap, originalPositionFor} from './source_map_util';
 
 const someModuleUrl = 'somePackage/somePath';
 
@@ -59,12 +57,11 @@ export function main() {
         const sourceSpan = new ParseSourceSpan(startLocation, endLocation);
         const someVar = o.variable('someVar', null, sourceSpan);
         const sm = emitSourceMap(someVar.toStmt());
-        const smc = new SourceMapConsumer(sm);
 
         expect(sm.sources).toEqual(['in.js']);
         expect(sm.sourcesContent).toEqual([';;;var']);
-        expect(smc.originalPositionFor({line: 1, column: 0}))
-            .toEqual({line: 1, column: 3, source: 'in.js', name: null});
+        expect(originalPositionFor(sm, {line: 1, column: 0}))
+            .toEqual({line: 1, column: 3, source: 'in.js'});
       });
     });
   });

packages/compiler/test/output/ts_emitter_spec.ts

@@ -12,7 +12,7 @@ import * as o from '@angular/compiler/src/output/output_ast';
 import {ImportResolver} from '@angular/compiler/src/output/path_util';
 import {TypeScriptEmitter} from '@angular/compiler/src/output/ts_emitter';
 
-import {stripSourceMap} from './abstract_emitter_spec';
+import {stripSourceMapAndNewLine} from './abstract_emitter_spec';
 
 const someModuleUrl = 'somePackage/somePath';
 const anotherModuleUrl = 'somePackage/someOtherPath';
@@ -52,7 +52,7 @@ export function main() {
     function emitStmt(stmt: o.Statement | o.Statement[], exportedVars: string[] = null): string {
       const stmts = Array.isArray(stmt) ? stmt : [stmt];
       const source = emitter.emitStatements(someModuleUrl, stmts, exportedVars || []);
-      return stripSourceMap(source);
+      return stripSourceMapAndNewLine(source);
     }
 
     it('should declare variables', () => {