fix(compiler): clone templates before compiling them

This is needed as the compiler changes templates during compilation
and we are caching templates in the `TemplateLoader`.

Closes angular#1058

Author: tbosch

modules/angular2/src/render/dom/compiler/compiler.js

@@ -47,7 +47,10 @@ export class Compiler {
   _compileTemplate(viewDef: ViewDefinition, tplElement):Promise<ProtoViewDto> {
     var subTaskPromises = [];
     var pipeline = new CompilePipeline(this._stepFactory.createSteps(viewDef, subTaskPromises));
-    var compileElements = pipeline.process(tplElement, viewDef.componentId);
+    // we need to clone the template element as we modify it
+    // and it might be given to use again as the TemplateLoader
+    // uses an internal cache.
+    var compileElements = pipeline.process(DOM.clone(tplElement), viewDef.componentId);
 
     var protoView = compileElements[0].inheritedProtoView.build();
 

modules/angular2/test/render/dom/compiler/compiler_common_tests.js

@@ -95,6 +95,34 @@ export function runCompilerCommonTests() {
       });
     }));
 
+    it('should not modify the cached url template', inject([AsyncTestCompleter], (async) => {
+      var urlData = MapWrapper.createFromStringMap({
+        'someUrl': '<div>a</div>'
+      });
+      var log = [];
+      var logAndModifyCompileStep = (parent, current, control) => {
+        var tagName = DOM.tagName(current.element).toUpperCase();
+        if (tagName == 'DIV') {
+          ListWrapper.push(log, DOM.getInnerHTML(current.element));
+          DOM.setInnerHTML(current.element, '');
+        }
+      };
+      var compiler = createCompiler(logAndModifyCompileStep, urlData);
+      PromiseWrapper.all([
+        compiler.compile(new ViewDefinition({
+          componentId: 'someId',
+          absUrl: 'someUrl'
+        })),
+        compiler.compile(new ViewDefinition({
+          componentId: 'someId',
+          absUrl: 'someUrl'
+        }))
+      ]).then( (_) => {
+        expect(log).toEqual(['a', 'a']);
+        async.done();
+      });
+    }));
+
     it('should report loading errors', inject([AsyncTestCompleter], (async) => {
       var compiler = createCompiler(EMPTY_STEP, MapWrapper.create());
       PromiseWrapper.catchError(compiler.compile(new ViewDefinition({
@@ -172,10 +200,15 @@ var EMPTY_STEP = (parent, current, control) => {
 };
 
 class FakeTemplateLoader extends TemplateLoader {
-  _urlData: Map<string, string>;
+  _urlData: Map<string, any>;
   constructor(urlData) {
     super(null, new UrlResolver());
-    this._urlData = urlData;
+    this._urlData = MapWrapper.create();
+    // Important: create the template elements only once,
+    // as this is the behavior of the real template loader.
+    MapWrapper.forEach(urlData, (content, url) => {
+      MapWrapper.set(this._urlData, url, DOM.createTemplate(content));
+    });
   }
 
   load(template: ViewDefinition) {
@@ -186,7 +219,7 @@ class FakeTemplateLoader extends TemplateLoader {
     if (isPresent(template.absUrl)) {
       var content = MapWrapper.get(this._urlData, template.absUrl);
       if (isPresent(content)) {
-        return PromiseWrapper.resolve(DOM.createTemplate(content));
+        return PromiseWrapper.resolve(content);
       }
     }