From e99d72161257bfad0de8a8eb42e9f41aa4e2d90d Mon Sep 17 00:00:00 2001
From: Victor Berchet <victor@suumit.com>
Date: Tue, 10 Jan 2017 19:07:03 -0800
Subject: [PATCH] feat(compiler): Add a `enableLegacyTemplate` option to
 support `<template>`

When the `enableLegacyTemplate` is set to `false`, `<template>` tags and the
`template` attribute are no more used to define angular templates but are
treated as regular tag and attribute.

The default value is `true`.

In order to define a template, you have to use the `<ng-template>` tag.

This option applies to your application and all the libraries it uses. That is
you should make sure none of them rely on the legacy way to defined templates
when this option is turned off (`false`).
---
 modules/@angular/compiler-cli/src/codegen.ts  |  3 +-
 .../compiler/src/aot/compiler_factory.ts      |  3 +-
 .../compiler/src/aot/compiler_options.ts      |  1 +
 modules/@angular/compiler/src/config.ts       | 15 ++++--
 .../compiler/src/jit/compiler_factory.ts      |  4 +-
 .../src/template_parser/template_parser.ts    | 21 ++++----
 .../template_parser/template_parser_spec.ts   | 49 ++++++++++++++++++-
 modules/@angular/core/src/linker/compiler.ts  |  4 +-
 tools/@angular/tsc-wrapped/src/options.ts     |  3 ++
 tools/public_api_guard/core/typings/core.d.ts |  1 +
 10 files changed, 85 insertions(+), 19 deletions(-)

diff --git a/modules/@angular/compiler-cli/src/codegen.ts b/modules/@angular/compiler-cli/src/codegen.ts
index 0a418b7a72..b1ad00d02a 100644
--- a/modules/@angular/compiler-cli/src/codegen.ts
+++ b/modules/@angular/compiler-cli/src/codegen.ts
@@ -75,7 +75,8 @@ export class CodeGenerator {
       debug: options.debug === true,
       translations: transContent,
       i18nFormat: cliOptions.i18nFormat,
-      locale: cliOptions.locale
+      locale: cliOptions.locale,
+      enableLegacyTemplate: options.enableLegacyTemplate !== false,
     });
     return new CodeGenerator(options, program, tsCompilerHost, aotCompiler, ngCompilerHost);
   }
diff --git a/modules/@angular/compiler/src/aot/compiler_factory.ts b/modules/@angular/compiler/src/aot/compiler_factory.ts
index b5da6f1f2d..8283ff4741 100644
--- a/modules/@angular/compiler/src/aot/compiler_factory.ts
+++ b/modules/@angular/compiler/src/aot/compiler_factory.ts
@@ -61,7 +61,8 @@ export function createAotCompiler(compilerHost: AotCompilerHost, options: AotCom
     defaultEncapsulation: ViewEncapsulation.Emulated,
     logBindingUpdate: false,
     useJit: false,
-    useViewEngine: options.useViewEngine
+    useViewEngine: options.useViewEngine,
+    enableLegacyTemplate: options.enableLegacyTemplate !== false,
   });
   const normalizer = new DirectiveNormalizer(
       {get: (url: string) => compilerHost.loadResource(url)}, urlResolver, htmlParser, config);
diff --git a/modules/@angular/compiler/src/aot/compiler_options.ts b/modules/@angular/compiler/src/aot/compiler_options.ts
index 331b319c71..adafef9916 100644
--- a/modules/@angular/compiler/src/aot/compiler_options.ts
+++ b/modules/@angular/compiler/src/aot/compiler_options.ts
@@ -12,4 +12,5 @@ export interface AotCompilerOptions {
   i18nFormat?: string;
   translations?: string;
   useViewEngine?: boolean;
+  enableLegacyTemplate?: boolean;
 }
diff --git a/modules/@angular/compiler/src/config.ts b/modules/@angular/compiler/src/config.ts
index 9d14435c78..db9d65aa3c 100644
--- a/modules/@angular/compiler/src/config.ts
+++ b/modules/@angular/compiler/src/config.ts
@@ -23,22 +23,28 @@ export const USE_VIEW_ENGINE = new InjectionToken<boolean>('UseViewEngine');
 export class CompilerConfig {
   public renderTypes: RenderTypes;
   public defaultEncapsulation: ViewEncapsulation;
-  private _genDebugInfo: boolean;
-  private _logBindingUpdate: boolean;
+  // Whether to support the `<template>` tag and the `template` attribute to define angular
+  // templates. They have been deprecated in 4.x, `<ng-template>` should be used instead.
+  public enableLegacyTemplate: boolean;
   public useJit: boolean;
   public useViewEngine: boolean;
   public missingTranslation: MissingTranslationStrategy;
 
+  private _genDebugInfo: boolean;
+  private _logBindingUpdate: boolean;
+
   constructor(
       {renderTypes = new DefaultRenderTypes(), defaultEncapsulation = ViewEncapsulation.Emulated,
-       genDebugInfo, logBindingUpdate, useJit = true, missingTranslation, useViewEngine}: {
+       genDebugInfo, logBindingUpdate, useJit = true, missingTranslation, useViewEngine,
+       enableLegacyTemplate}: {
         renderTypes?: RenderTypes,
         defaultEncapsulation?: ViewEncapsulation,
         genDebugInfo?: boolean,
         logBindingUpdate?: boolean,
         useJit?: boolean,
         missingTranslation?: MissingTranslationStrategy,
-        useViewEngine?: boolean
+        useViewEngine?: boolean,
+        enableLegacyTemplate?: boolean,
       } = {}) {
     this.renderTypes = renderTypes;
     this.defaultEncapsulation = defaultEncapsulation;
@@ -47,6 +53,7 @@ export class CompilerConfig {
     this.useJit = useJit;
     this.missingTranslation = missingTranslation;
     this.useViewEngine = true;
+    this.enableLegacyTemplate = enableLegacyTemplate !== false;
   }
 
   get genDebugInfo(): boolean {
diff --git a/modules/@angular/compiler/src/jit/compiler_factory.ts b/modules/@angular/compiler/src/jit/compiler_factory.ts
index 3c4b576e5a..bf194184da 100644
--- a/modules/@angular/compiler/src/jit/compiler_factory.ts
+++ b/modules/@angular/compiler/src/jit/compiler_factory.ts
@@ -104,7 +104,6 @@ export const COMPILER_PROVIDERS: Array<any|Type<any>|{[k: string]: any}|any[]> =
   AnimationParser,
 ];
 
-
 @CompilerInjectable()
 export class JitCompilerFactory implements CompilerFactory {
   private _defaultOptions: CompilerOptions[];
@@ -136,7 +135,8 @@ export class JitCompilerFactory implements CompilerFactory {
             // from the app providers
             defaultEncapsulation: opts.defaultEncapsulation,
             logBindingUpdate: opts.useDebug,
-            missingTranslation: opts.missingTranslation, useViewEngine
+            missingTranslation: opts.missingTranslation, useViewEngine,
+            enableLegacyTemplate: opts.enableLegacyTemplate,
           });
         },
         deps: [USE_VIEW_ENGINE]
diff --git a/modules/@angular/compiler/src/template_parser/template_parser.ts b/modules/@angular/compiler/src/template_parser/template_parser.ts
index df2b9ac9f0..97c87ae369 100644
--- a/modules/@angular/compiler/src/template_parser/template_parser.ts
+++ b/modules/@angular/compiler/src/template_parser/template_parser.ts
@@ -273,7 +273,7 @@ class TemplateParseVisitor implements html.Visitor {
     let hasInlineTemplates = false;
     const attrs: AttrAst[] = [];
     const isTemplateElement = isTemplate(
-        element,
+        element, this.config.enableLegacyTemplate,
         (m: string, span: ParseSourceSpan) => this._reportError(m, span, ParseErrorLevel.WARNING));
 
     element.attrs.forEach(attr => {
@@ -285,7 +285,7 @@ class TemplateParseVisitor implements html.Visitor {
       let prefixToken: string|undefined;
       let normalizedName = this._normalizeAttributeName(attr.name);
 
-      if (normalizedName == TEMPLATE_ATTR) {
+      if (this.config.enableLegacyTemplate && normalizedName == TEMPLATE_ATTR) {
         this._reportError(
             `The template attribute is deprecated. Use an ng-template element instead.`,
             attr.sourceSpan, ParseErrorLevel.WARNING);
@@ -905,16 +905,19 @@ function isEmptyExpression(ast: AST): boolean {
 
 // `template` is deprecated in 4.x
 function isTemplate(
-    el: html.Element, reportDeprecation: (m: string, span: ParseSourceSpan) => void): boolean {
+    el: html.Element, enableLegacyTemplate: boolean,
+    reportDeprecation: (m: string, span: ParseSourceSpan) => void): boolean {
   const tagNoNs = splitNsName(el.name)[1];
   // `<ng-template>` is an angular construct and is lower case
   if (tagNoNs === NG_TEMPLATE_ELEMENT) return true;
   // `<template>` is HTML and case insensitive
   if (tagNoNs.toLowerCase() === TEMPLATE_ELEMENT) {
-    reportDeprecation(
-        `The <template> element is deprecated. Use <ng-template> instead`, el.sourceSpan);
-    return true;
-  }
+    if (enableLegacyTemplate && tagNoNs.toLowerCase() === TEMPLATE_ELEMENT) {
+      reportDeprecation(
+          `The <template> element is deprecated. Use <ng-template> instead`, el.sourceSpan);
+      return true;
+    }
 
-  return false;
-}
+    return false;
+  }
+}
\ No newline at end of file
diff --git a/modules/@angular/compiler/test/template_parser/template_parser_spec.ts b/modules/@angular/compiler/test/template_parser/template_parser_spec.ts
index c8129bd88b..8ad9c6a2a7 100644
--- a/modules/@angular/compiler/test/template_parser/template_parser_spec.ts
+++ b/modules/@angular/compiler/test/template_parser/template_parser_spec.ts
@@ -5,6 +5,7 @@
  * 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 {CompilerConfig} from '@angular/compiler';
 import {CompileAnimationEntryMetadata, CompileDiDependencyMetadata, CompileDirectiveMetadata, CompileDirectiveSummary, CompilePipeMetadata, CompilePipeSummary, CompileProviderMetadata, CompileTemplateMetadata, CompileTokenMetadata, CompileTypeMetadata, tokenReference} from '@angular/compiler/src/compile_metadata';
 import {DomElementSchemaRegistry} from '@angular/compiler/src/schema/dom_element_schema_registry';
 import {ElementSchemaRegistry} from '@angular/compiler/src/schema/element_schema_registry';
@@ -44,8 +45,13 @@ export function main() {
   function commonBeforeEach() {
     beforeEach(() => {
       console = new ArrayConsole();
-      TestBed.configureCompiler({providers: [{provide: Console, useValue: console}]});
+      TestBed.configureCompiler({
+        providers: [
+          {provide: Console, useValue: console},
+        ],
+      });
     });
+
     beforeEach(inject([TemplateParser], (parser: TemplateParser) => {
       const someAnimation = new CompileAnimationEntryMetadata('someAnimation', []);
       const someTemplate = new CompileTemplateMetadata({animations: [someAnimation]});
@@ -2023,6 +2029,47 @@ The pipe 'test' could not be found ("{{[ERROR ->]a | test}}"): TestComp@0:2`);
       });
     });
   });
+
+  describe('Template Parser - opt-out `<template>` support', () => {
+    beforeEach(() => {
+      TestBed.configureCompiler({
+        providers: [{
+          provide: CompilerConfig,
+          useValue: new CompilerConfig({enableLegacyTemplate: false}),
+        }],
+      });
+    });
+
+    commonBeforeEach();
+
+    it('should support * directives', () => {
+      expect(humanizeTplAst(parse('<div *ngIf>', [ngIf]))).toEqual([
+        [EmbeddedTemplateAst],
+        [DirectiveAst, ngIf],
+        [BoundDirectivePropertyAst, 'ngIf', 'null'],
+        [ElementAst, 'div'],
+      ]);
+    });
+
+    it('should support <ng-template>', () => {
+      expect(humanizeTplAst(parse('<ng-template>', []))).toEqual([
+        [EmbeddedTemplateAst],
+      ]);
+    });
+
+    it('should treat <template> as a regular tag', () => {
+      expect(humanizeTplAst(parse('<template>', []))).toEqual([
+        [ElementAst, 'template'],
+      ]);
+    });
+
+    it('should not special case the template attribute', () => {
+      expect(humanizeTplAst(parse('<p template="ngFor">', []))).toEqual([
+        [ElementAst, 'p'],
+        [AttrAst, 'template', 'ngFor'],
+      ]);
+    });
+  });
 }
 
 function humanizeTplAst(
diff --git a/modules/@angular/core/src/linker/compiler.ts b/modules/@angular/core/src/linker/compiler.ts
index e3fd13fb9d..2c0bcf613e 100644
--- a/modules/@angular/core/src/linker/compiler.ts
+++ b/modules/@angular/core/src/linker/compiler.ts
@@ -7,7 +7,6 @@
  */
 
 import {Injectable, InjectionToken} from '../di';
-import {stringify} from '../facade/lang';
 import {MissingTranslationStrategy} from '../i18n/tokens';
 import {ViewEncapsulation} from '../metadata';
 import {Type} from '../type';
@@ -99,6 +98,9 @@ export type CompilerOptions = {
   defaultEncapsulation?: ViewEncapsulation,
   providers?: any[],
   missingTranslation?: MissingTranslationStrategy,
+  // Whether to support the `<template>` tag and the `template` attribute to define angular
+  // templates. They have been deprecated in 4.x, `<ng-template>` should be used instead.
+  enableLegacyTemplate?: boolean,
 };
 
 /**
diff --git a/tools/@angular/tsc-wrapped/src/options.ts b/tools/@angular/tsc-wrapped/src/options.ts
index 1381391c92..44505c122f 100644
--- a/tools/@angular/tsc-wrapped/src/options.ts
+++ b/tools/@angular/tsc-wrapped/src/options.ts
@@ -78,6 +78,9 @@ interface Options extends ts.CompilerOptions {
 
   // Whether to embed debug information in the compiled templates
   debug?: boolean;
+
+  // Whether to enable support for <template> and the template attribute (true by default)
+  enableLegacyTemplate?: boolean;
 }
 
 export default Options;
diff --git a/tools/public_api_guard/core/typings/core.d.ts b/tools/public_api_guard/core/typings/core.d.ts
index 0aff9d25be..7a1d0d9695 100644
--- a/tools/public_api_guard/core/typings/core.d.ts
+++ b/tools/public_api_guard/core/typings/core.d.ts
@@ -234,6 +234,7 @@ export declare type CompilerOptions = {
     defaultEncapsulation?: ViewEncapsulation;
     providers?: any[];
     missingTranslation?: MissingTranslationStrategy;
+    enableLegacyTemplate?: boolean;
 };
 
 /** @stable */