Nested template in Revel not loading properly

When I call a nested template, {{template "partials/mirror.html" .}}, it throws this error:

results.go:232: Template Execution Error (in App/index.html): html/template:App/index.html: "\"" in attribute name: " class\"quote-component\" id=\"quot"

If I create a controller specifically for the template App/index.html is calling, like this:

package controllers

import "github.com/revel/revel"

type Mirror struct {
    *revel.Controller
}

func (m Mirror) Index() revel.Result {
    return m.Render()
}

I still get:

results.go:232: Template Execution Error (in Mirror/index.html): html/template:Mirror/index.html: "\"" in attribute name: " class\"quote-component\" id=\"quot"

Here are the contents of mirror.html:

<!-- AUTH STATES -->
<section class="auth-states">

  <!-- FACE DETECTED W/IN RANGE -->
  {{template "partials/faceClose.html" .}}

  <!-- USER DETECTED -->
  {{template "partials/userDetected.html" .}}

  <!-- NON USER DETECTED -->
  {{template "partials/nonUserDetected.html" .}}

  <!-- TIME OUT LOGS USER OUT -->
  {{template "partials/loggingOut.html" .}}

</section>

<div class="clear eyelevel">

  <!-- WEATHER-->
  {{template "partials/weather.html" .}}

  <!-- TIMELY CONTENT: TIMESTAMP AND ALERTS -->
  <div class="timely-content">

    <!-- TIMESTAMP -->
    {{template "partials/timestamp.html" .}}

   <!-- EMOTION -->
   {{template "partials/emotion.html" .}}

  </div>

</div>
<img id="shot-preview"/>

<!-- LOW PRIORITY CONTENT -->
<section class="low-pri-content auth-content">

  <h2 class="logged-in-stamp">
    Here's the scoop, <span id="logged-in-name"></span>:
  </h2>

  {{template "partials/traffic.html" .}}
  {{template "partials/stocks.html" .}}
  {{template "partials/newsFeed.html" .}}


</section>

<div id="video-hidden" aria-hidden="true">
  <video id="cameraPreview" class="cameraPreview"></video>
</div>

<script src="https://code.jquery.com/jquery-2.2.1.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.11.2/moment.min.js"></script>
<script src="/public/js/weather.js"></script>
<script src="/public/js/stock.js"></script>
<script src="/public/js/news.js"></script>
<script src="/public/js/traffic.js"></script>
<script src="/public/js/mirror.js"></script>
<script src="/public/js/authenticate.js"></script>

The structure of the app follows the Revel recommendations, the project itself is just migrating this project from Node to Go using Revel.

My question is: what does that error message mean? It always loads the top 4 lines of the mirror.html file, regardless of what the top 4 lines are.

Solution

The error is not in mirror.html but in index.html:

results.go:232: Template Execution Error (in Mirror/index.html): html/template:Mirror/index.html: "\"" in attribute name: " class\"quote-component\" id=\"quot"

You simply left out an equal sign '=' when specifying the class attribute of some element, for example you wrote:

<span class"quote-component" id="quot">...

See this simple example to verify:

const templ = `<html><body>
        <span class"quote-component" id="quot">Bad syntax</span>
        </body></html>`

t := template.Must(template.New("").Parse(templ))
err := t.Execute(os.Stdout, nil)
fmt.Println(err)

Output: almost identical to yours (try it on the Go Playground):

html/template: "\"" in attribute name: " class\"quote-component\" id=\"quot"