title: Cannot reach html templateUrl in Angular 1.6
body: <p>I'm creating a simple web application in angular 1.6</p>
  
  <p>I create a state for the url "/" but it seems that angular cannot reach the file don´t know why.</p>
  
  <p>Folder structure is this:</p>
  
  <p><a href="https://i.stack.imgur.com/2p6bP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2p6bP.png" alt="enter image description here"></a></p>
  
  <p>So the html load the app like this:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang=""&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="description" content=""&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
          &lt;title&gt;paykey&lt;/title&gt;
          &lt;link rel="apple-touch-icon" href="apple-touch-icon.png"&gt;
          &lt;!--  --&gt; 
          &lt;link rel="stylesheet" href="styles/main.css"&gt;
  
      &lt;/head&gt;
      &lt;body ng-app="myApp" &gt;
  
          &lt;script src="node_modules/angular/angular.js"&gt;&lt;/script&gt;
          &lt;script src="node_modules/angular-ui-router/release/angular-ui-router.js"&gt;&lt;/script&gt;
          &lt;script src="node_modules/jquery/dist/jquery.js"&gt;&lt;/script&gt;
          &lt;script src="node_modules/bootstrap/dist/js/bootstrap.js"&gt;&lt;/script&gt;
          &lt;div ui-view&gt;&lt;/div&gt;
          &lt;script src="scripts/app.js"&gt;&lt;/script&gt;
          &lt;script src="scripts/controllers/main.js"&gt;&lt;/script&gt;
          &lt;script src="scripts/services/codigo.service.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And the app.js file that has the state is this one:</p>
  
  <pre><code>'use strict';
  
   angular
    .module('myApp', [
      'ui.router',
      '$stateProvider',
      '$urlRouterProvider'
    ])
    .config(function ($stateProvider, $urlRouterProvider) {
  
  
      $urlRouterProvider.otherwise('/');
  
      $stateProvider
        // .state('home')
        .state('main', {
          url: '/',
          templateUrl: 'views/quote-comps.html',
          controller: 'MainT',
          controllerAs: 'main'
        });
  });
  </code></pre>
  
  <p>So debugging it seems that it passes through stateProvider line but the html does not show up. The only thing I see is the background blonde in css, no errors in console.</p>
  
  <p>The quote-comps.html file is this:</p>
  
  <pre><code>   &lt;div ng-controller="MainT" ng-init="init()" style="padding-top: 90px;
  
  
         padding-left: 20px;"&gt;
  
         &lt;div class="bar bar-header disable-user-behavior" &gt;
          &lt;div class="header"&gt;
            &lt;div class="row header-wrapper"&gt;
              &lt;div class="header-content col text" ng-class="currentPage.title!=undefined ? 'text':''"&gt;
         &lt;div ng-if="currentPage.title != undefined"&gt;
  
                &lt;/div&gt;
          &lt;img src="images/ICONOS/Logo_banorte_ICO/Logo_Banortexxxhdpi.png" class="bem_image"&gt;
                 &lt;h5 style="text-align: center; color: white; margin-bottom: 0px;margin-top: 0px; font-size: 12px;"&gt;Bienvenido&lt;/h5&gt;
              &lt;/div&gt;
  
            &lt;/div&gt;
            &lt;div class="header-bar" ng-if="currentPage.name.indexOf('login') &lt; 0 &amp;amp;&amp;amp; currentPage.name.indexOf('activaToken') &lt; 0 &amp;amp;&amp;amp; currentPage.name.indexOf('resynchronize-token') &lt; 0"&gt;
              &lt;div class="clear"&gt;&lt;/div&gt; 
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
  
      &lt;div  style="    margin-top: 52px;
          background-color: #35282B;
          height: 450px;
          overflow: scroll;"&gt;
          &lt;h5 style="text-align: center; color: white; font-size: 16px"&gt;&lt;!--{{operacion.nombreBeneficario}}--&gt;55 1007 0744&lt;/h5&gt;
          &lt;h5 style="text-align: center; color: white; "&gt;Has recibido un pago Banorte Móvil por:&lt;/h5&gt;
          &lt;h3 style="text-align: center; color: white; "&gt;$ {{operacion.importeOperacion}} {{operacion.divisa}}&lt;/h3&gt;
          &lt;p ng-show="finish" style="text-align: center; font-style: bold; color: white;" &gt;&lt;span&gt;¿Qué deseas hacer?&lt;/span&gt;&lt;/p&gt;
  
      &lt;img ng-show="finish2" class="amount-header ss2" src="../images/ICONOS/Exito_ICO/Exitohdpi.png" &gt;
  
      &lt;p ng-show="finish2" class="amount-header textBox4"&gt;¡El deposito fue exitoso!
                      &lt;/p&gt;
  
  
          &lt;div ng-show="finish" class="comparison-box" ng-class="{'comparison-box-open' : arrowUp}"&gt;
              &lt;div class="comparison-header-container" ng-click="openMore('first')"&gt;
                  &lt;span&gt;  &lt;img style="width: 30px; display:inline;" src="../images/ICONOS/Depositarlo_ICO/Depositarlo.svg"&gt;  &lt;/img&gt;&lt;/span&gt;
                  &lt;span class="comparison-header comboBox"&gt;Depositarlo&lt;/span&gt;
                  &lt;img class="arrow" src="images/down_arrow.svg" ng-class="{'rotate180' : arrowUp, 'rotate360' : !arrowUp}"&gt;
                  &lt;!-- &lt;img style="float: right; padding-right: 10px; width: 30px; margin-top: 4px; display: none;" src="images/up_arrow.svg"&gt; --&gt;
              &lt;/div&gt;
              &lt;div class="amounts-container"&gt;
                  &lt;div&gt;
                      &lt;p style="display: inline;" class="amount-header textBox" ng-class="{'show' : arrowUp &amp;&amp; container, 'hide' : !arrowUp}"&gt;Ingresa:&lt;/p&gt;
                      &lt;input style="display: inline; text-align: center" class="amount-header inputIngresa" ng-class="{'show' : arrowUp &amp;&amp; container, 'hide' : !arrowUp}" placeholder="Cuenta banorte, tarjeta o CLABE"&gt;
                  &lt;/div&gt;
                  &lt;span class="comboBox2"&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="amounts-container"&gt;
                  &lt;div&gt;
                      &lt;p style="display: inline;" class="amount-header textBox" ng-class="{'show' : arrowUp &amp;&amp; container, 'hide' : !arrowUp}"&gt;Banco:&lt;/p&gt;
                      &lt;input style="display: inline; text-align: center" class="amount-header inputIngresa" ng-class="{'show' : arrowUp &amp;&amp; container, 'hide' : !arrowUp}" placeholder="Cuenta banorte, tarjeta o CLABE"&gt;
                  &lt;/div&gt;
                  &lt;span class="comboBox2"&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="wizard-full"&gt;
                  &lt;!--&lt;a href="#/form1"&gt;&lt;button class="btn btn-primary btnSeg seg"&gt; Depositar &lt;/button&gt;&lt;/a&gt; --&gt;
              &lt;/div&gt;
              &lt;button class="btn cus2" type="submit" ng-click="cancel()"&gt;Depositar&lt;/button&gt;
          &lt;/div&gt;
          &lt;div ng-show="finish" class="comparison-box seg" ng-class="{'comparison-box-open' : arrowUp2}" style=""&gt;
              &lt;div class="comparison-header-container" ng-click="openMore('second')"&gt;
                  &lt;span&gt;  &lt;img style="width: 30px; display:inline;" src="../images/ICONOS/Depositarlo_ICO/Depositarlo.svg"&gt;  &lt;/img&gt;&lt;/span&gt;
                  &lt;span class="comparison-header comboBox"&gt;Cobrarlo en un cajero&lt;/span&gt;
                  &lt;img class="arrow" src="images/down_arrow.svg" ng-class="{'rotate180' : arrowUp2, 'rotate360' : !arrowUp2}" ng-click="restauraE()"&gt;
                  &lt;!-- &lt;img style="float: right; padding-right: 10px; width: 30px; margin-top: 4px; display: none;" src="images/up_arrow.svg"&gt; --&gt;
              &lt;/div&gt;
              &lt;div class="amounts-container"&gt;
                  &lt;div&gt;
                      &lt;p ng-show="mostrarQuieres" class="amount-header textBox" ng-class="{'show' : arrowUp2 &amp;&amp; container, 'hide' : !arrowUp2}"&gt;¿Quieres generar tu código de referencia para retirar el efectivo en cajero automático?
                      &lt;/p&gt;
                      &lt;span&gt;
            &lt;img ng-show="mostrarAcude" class="amount-header ss1" src="../images/ICONOS/Exito_ICO/Exitohdpi.png" &gt;
            &lt;/span&gt;
                      &lt;div ng-show="mostrarAcude" class="amount-header textbox2" ng-class="{'show' : arrowUp2 &amp;&amp; container, 'hide' : !arrowUp2}"&gt;Acude a cualquier cajero Banorte, selecciona la opcion retiro de efectivo y captura o escanea este código para retirar tu efectivo
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="wizard-full"&gt;
                  &lt;!--&lt;button class="btn btn-primary btnSeg2 seg" ng-click="getCode()"&gt; Generar referencia &lt;/button&gt; --&gt;
                   &lt;button class="btn btn-primary mGenT" type="submit" ng-click="generarTrans()"&gt;Generar transferencia&lt;/button&gt;
              &lt;/div&gt;
              &lt;div ng-show="mostrar"&gt;{{codigoBarras}}
                  &lt;io-barcode code="123" type="CODE128B"&gt;&lt;/io-barcode&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div ng-show="mostrar" class="wizard-full"&gt;
              &lt;button class="btn btn-primary mGenT" type="submit" ng-click="generarTrans()"&gt; d &lt;/button&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  
  
  
        &lt;div class="footer"&gt;
        "2017  Derechos reservados."&lt;/div&gt;
  
        &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/DMeKe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DMeKe.png" alt="enter image description here"></a></p>
  
  <p>dependencies:</p>
  
  <pre><code>  "dependencies": {
  "@uirouter/angularjs": "^1.0.11",
  "angular": "^1.6.6",
  "bootstrap": "^3.3.7",
  "jquery": "^3.2.1"
  </code></pre>
  
  <p>},</p>