title: Issues importing ArcGIS Javascript API resources and loading dojo
body: <p>I am using the ArcGIS Javascript API to add some functionality (a search widget) to an existing web app using AngularJS and JSP. I am having issues resolving a pathname for the esri/dijit/Search package, as it attempts a pathname on our local server instead of the online API and produces a 404 error.</p>
  
  <p><strong>EDIT</strong> I am seeing now that if I reference the online ArcGIS Javascript API, I have a local file that receives the 404 error. Not referencing it, of course, causes issues for the esri/dijit/Search file. I am focusing now on configuring this so that I can resolve both pathnames. Updated code is below in edit section.</p>
  
  <p>I have an app.js with the require function:</p>
  
  <pre><code>'use strict';
  
  var mapApp=angular.module('org.ours.app.map', ['ngRoute','org.ours.app.map.controllers']);
  
  mapApp.config(['$routeProvider', function($routeProvider,StudentController) {
      $routeProvider.when('/', { controller: 'MapController'});
      $routeProvider.otherwise({redirectTo: '/'});
  }]);
  
  require([
      "esri/map",
      "dojo/domReady!",
      "esri/toolbars/navigation",
      "esri/toolbars/draw",
      "esri/layers/ArcGISDynamicMapServiceLayer",
      "esri/tasks/IdentifyParameters",
      "esri/tasks/IdentifyResult",
      "esri/tasks/IdentifyTask",
      "esri/layers/GraphicsLayer",
      "esri/dijit/InfoWindow",
      "esri/dijit/Search",
      "esri/layers/FeatureLayer",
      "esri/InfoTemplate"
    ], function () {
      var lScope=angular.element(document.getElementById('mapDiv')).scope();
      lScope.onReady.apply(lScope,arguments);
  });
  </code></pre>
  
  <p>The controller for the Search widget (adapted from an online ArcGIS sample):</p>
  
  <pre><code>'use strict';
  
  mapAppControllers.controller('SearchController', function($rootScope, $scope) {
      $scope.$parent.searchScope=$scope;
      var me=$scope;
      var ALL;
      angular.extend($scope,{
          init:function(Map, Search, FeatureLayer, InfoTemplate, pMap){
              me.map=pMap;
              me.search = new Search({
                 enableButtonMode: true, //this enables the search widget to display as a single button
                 enableLabel: false,
                 enableInfoWindow: true,
                 showInfoWindowOnSelect: false,
                 map: map
              }, "search");
  
              me.sources = search.get("sources");
  
              sources.push({
                 featureLayer: new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/US_Senators/FeatureServer/0"),
                 searchFields: ["Name"],
                 displayField: "Name",
                 exactMatch: false,
                 name: "Senator",
                 outFields: ["*"],
                 placeholder: "Senator name",
                 maxResults: 6,
                 maxSuggestions: 6,
  
                 //Create an InfoTemplate
  
                 infoTemplate: new InfoTemplate("Senator information", "Name: ${Name}&lt;/br&gt;State: ${State}&lt;/br&gt;Party Affiliation: ${Party}&lt;/br&gt;Phone No: ${Phone_Number}&lt;br&gt;&lt;a href=${Web_Page} target=_blank ;'&gt;Website&lt;/a&gt;"),
  
                 enableSuggestions: true,
                 minCharacters: 0
              });
  
              //Set the sources above to the search widget
              search.set("sources", sources);
  
              search.startup();
  
          }
      })
  });
  </code></pre>
  
  <p>I then have an index.jsp with a few map elements including the Search widget (on the bottom) that I am attempting to add. I've referenced the online ArcGIS Javascript API here, but I am not sure it's in the right place. I am also wondering if there may be another package that is rerouting the /esri/dijit/Search file.</p>
  
  <p>This version creates a 404 error that looks for the file in <a href="http://ouserver/esri/dijit/Search" rel="nofollow noreferrer">http://ouserver/esri/dijit/Search</a>:</p>
  
  <pre><code>&lt;%@ page contentType="text/html;charset=UTF-8" language="java" %&gt;&lt;!doctype html&gt;
  &lt;html ng-app="org.ours.app.map" class="map-viewport"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;link rel="stylesheet" href="js/arcgis/esri/css/esri.css"&gt;
    &lt;link rel="stylesheet" href="css/bootstrap/bootstrap.css"&gt;
    &lt;link rel="stylesheet" href="css/bootstrap/bootstrap-theme.css"&gt;
  
    &lt;link rel="stylesheet" href="css/map.css"&gt;
  
    &lt;script src="js/arcgis/dojo/dojo.js" data-dojo-config="async: true"&gt;&lt;/script&gt;
    &lt;script src="js/angularjs/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/angularjs/i18n/angular-locale_fr-fr.js"&gt;&lt;/script&gt;
    &lt;script src="js/angularjs/angular-animate.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/angularjs/angular-route.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/bootstrap/ui-bootstrap-tpls-1.1.2.min.js"&gt;&lt;/script&gt;
  
  
    &lt;script src="js/utils/ColorsUtil.js"&gt;&lt;/script&gt;
  
    &lt;script src="js/controllers.js"&gt;&lt;/script&gt;
  
    &lt;script src="js/controllers/Attributes.js"&gt;&lt;/script&gt;
    &lt;script src="js/controllers/Results.js"&gt;&lt;/script&gt;
    &lt;script src="js/controllers/Identify.js"&gt;&lt;/script&gt;
    &lt;script src="js/controllers/Toolbar.js"&gt;&lt;/script&gt;
    &lt;script src="js/controllers/MapService.js"&gt;&lt;/script&gt;
    &lt;script src="js/controllers/Map.js"&gt;&lt;/script&gt;
    &lt;script src="js/controllers/Body.js"&gt;&lt;/script&gt;
    &lt;script src="js/controllers/Search.js"&gt;&lt;/script&gt;
  
    &lt;script src="js/app.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body ng-controller="BodyController" class="map-body"&gt;
  
  &lt;div style="display: none" ng-controller="IdentifyController"&gt;&lt;/div&gt;
  
  
  
  &lt;div id="mapDiv" ng-controller="MapController"&gt;
    &lt;script type="text/ng-template" id="infoWindowTemplate.html"&gt;
      &lt;div style="max-height: 300px;overflow-y: auto;overflow-x: hidden"&gt;
        &lt;table cellpadding="2"&gt;
          &lt;tbody&gt;
          &lt;tr ng-repeat="attribute in resultsScope.popover.attributes" ng-class="$index%2==1?'map-attributes-even':''" &gt;
            &lt;td style="font-weight: bold" &gt;{{attribute.label}}&lt;/td&gt;
            &lt;td style="padding-left: 5px" uib-tooltip="{{attribute.value}}"&gt;{{attribute.value}}&lt;/td&gt;
          &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/script&gt;
    &lt;div id="popoverPosition"
         popover-title="{{resultsScope.popover.title}}"
         uib-popover-template="resultsScope.popover.templateUrl"
         popover-is-open="resultsScope.popover.isOpen"
    &gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="map-toolbar"  ng-controller="ToolbarController" id="toolbar"&gt;
    &lt;div class="btn-group"&gt;
      &lt;label class="btn btn-primary" ng-click="onMapActionClick('prev')" ng-disabled="navModel.prev" uib-tooltip="Vue précédente" tooltip-placement="bottom"&gt;&lt;i class="glyphicon glyphicon-circle-arrow-left"&gt;&lt;/i&gt;&lt;/label&gt;
      &lt;label class="btn btn-primary" ng-model="mapTool" uib-btn-radio="'pan'" uib-tooltip="Déplacer" tooltip-placement="bottom"&gt;&lt;i class="glyphicon glyphicon-move"&gt;&lt;/i&gt;&lt;/label&gt;
      &lt;label class="btn btn-primary" ng-click="onMapActionClick('next')" ng-disabled="navModel.next" uib-tooltip="Vue suivante" tooltip-placement="bottom"&gt;&lt;i class="glyphicon glyphicon-circle-arrow-right"&gt;&lt;/i&gt;&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="btn-group"&gt;
      &lt;label class="btn btn-primary" ng-model="mapTool" uib-btn-radio="'zoomout'" uib-tooltip="Dézoomer" tooltip-placement="bottom"&gt;&lt;i class="glyphicon glyphicon-zoom-out"&gt;&lt;/i&gt;&lt;/label&gt;
      &lt;label class="btn btn-primary" ng-click="onMapActionClick('full')" uib-tooltip="Vue globale" tooltip-placement="bottom"&gt;&lt;i class="glyphicon glyphicon-fullscreen"&gt;&lt;/i&gt;&lt;/label&gt;
      &lt;label class="btn btn-primary" ng-model="mapTool" uib-btn-radio="'zoomin'" uib-tooltip="Zoomer" tooltip-placement="bottom"&gt;&lt;i class="glyphicon glyphicon-zoom-in"&gt;&lt;/i&gt;&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="btn-group"&gt;
      &lt;label class="btn btn-primary" ng-model="mapTool" uib-btn-radio="'identify'" uib-tooltip="Identifier" tooltip-placement="bottom"&gt;&lt;i class="glyphicon glyphicon-info-sign"&gt;&lt;/i&gt;&lt;/label&gt;
    &lt;/div&gt;
  
    &lt;div class="btn-group" style="display: inline-block;width:400px" ng-controller="MapServiceController"&gt;
      &lt;script type="text/ng-template" id="serviceLyerTemplate.html"&gt;
        &lt;a&gt;
          &lt;span ng-bind-html="match.label | uibTypeaheadHighlight:query | BoldLayersOptions:match"&gt;&lt;/span&gt;
        &lt;/a&gt;
      &lt;/script&gt;
      &lt;div style="display: inline-block;" &gt;
        &lt;input type="text" ng-model="serviceSelected" placeholder="Selectionner un service" uib-typeahead="service as service.name for service in services | filter:{name:$viewValue}"
               typeahead-template-url="serviceLyerTemplate.html" class="form-control" typeahead-show-hint="true" typeahead-min-length="0" style="display: inline-block;"
               typeahead-on-select="onServiceSelect($model)" typeahead-select-on-blur="true"&gt;
      &lt;/div&gt;
      &lt;div style="display: inline-block;width:50%"&gt;
        &lt;input type="text" ng-model="layerSelected" placeholder="Selectionner une couche" uib-typeahead="layer as layer.name for layer in layers | filter:{name:$viewValue}"
               typeahead-template-url="serviceLyerTemplate.html" class="form-control" typeahead-show-hint="true" typeahead-min-length="0" style="display: inline-block;"
               typeahead-on-select="onLayerSelect($model)" typeahead-select-on-blur="true"
        &gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div class="map-messagebar"&gt;
    &lt;uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)" style="width: 600px"&gt;{{alert.msg}}&lt;/uib-alert&gt;
  &lt;/div&gt;
  
  &lt;label class="btn btn-success map-identify" ng-model="resultsScope.visible" uib-btn-checkbox ng-click="attributesScope.visible=$event.ctrlKey?resultsScope.visible:attributesScope.visible"&gt;&lt;i class="glyphicon glyphicon-info-sign"&gt;&lt;/i&gt;&lt;/label&gt;
  &lt;label class="btn btn-success map-show-attributes" ng-model="attributesScope.visible" uib-btn-checkbox ng-click="resultsScope.visible=$event.ctrlKey?attributesScope.visible:resultsScope.visible"&gt;&lt;i class="glyphicon glyphicon-list-alt"&gt;&lt;/i&gt;&lt;/label&gt;
  &lt;button class="btn btn-success map-reset" ng-click="reset()"&gt;&lt;i class="glyphicon glyphicon-remove-sign"&gt;&lt;/i&gt;&lt;/button&gt;
  
  
  
  &lt;div class="panel panel-primary map-results animate-hide" id="resultsDiv" ng-controller="ResultsController" ng-show="visible"&gt;
    &lt;div class="panel-heading"&gt;&lt;i class="glyphicon glyphicon-info-sign"&gt;&lt;/i&gt; Résultats&lt;i class="pull-right glyphicon glyphicon-chevron-left" ng-click="visible=!visible"&gt;&lt;/i&gt;&lt;/div&gt;
    &lt;div class="panel-body map-results-body" &gt;
      &lt;uib-accordion close-others="oneAtATime" style="width: 100%;height: 100%"&gt;
        &lt;uib-accordion-group ng-repeat="layer in layers" is-open="layer.isFirstOpen" class="panel panel-success"&gt;
          &lt;uib-accordion-heading&gt;&lt;i class="glyphicon glyphicon-play" ng-style="layer.style"&gt;&lt;/i&gt; {{layer.name}}&lt;/uib-accordion-heading&gt;
          &lt;label class="btn btn-link btn-default map-result" ng-model="result.visible" ng-click="show(result)" ng-repeat="result in layer.results" uib-btn-checkbox&gt;
            {{result.displayValue}}
            &lt;i class="pull-right glyphicon glyphicon-fullscreen" ng-click="zoom(result,$event)"&gt;&lt;/i&gt;
            &lt;i class="pull-right glyphicon glyphicon-list-alt" ng-click="attributesScope.visible=true;attributesScope.show(result,$event)" style="margin-right:5px"&gt;&lt;/i&gt;
          &lt;/label&gt;
        &lt;/uib-accordion-group&gt;
      &lt;/uib-accordion&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="panel panel-primary map-attributes" id="attributesDiv" ng-controller="AttributesController" ng-show="visible"&gt;
    &lt;div class="panel-heading"&gt;&lt;i class="glyphicon glyphicon-list-alt"&gt;&lt;/i&gt; Attributs&lt;i class="pull-right glyphicon glyphicon-chevron-right" ng-click="visible=!visible"&gt;&lt;/i&gt;&lt;/div&gt;
    &lt;div class="panel-body map-attributes-body"&gt;
      &lt;table cellpadding="2"&gt;
        &lt;tbody&gt;
        &lt;tr ng-repeat="attribute in attributes" ng-class="$index%2==1?'map-attributes-even':''" &gt;&lt;td style="font-weight: bold"&gt;{{attribute.label}}&lt;/td&gt;&lt;td style="padding-left: 5px"&gt;{{attribute.value}}&lt;/td&gt;&lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="https://js.arcgis.com/3.17/"&gt;&lt;/script&gt;
  
  &lt;div ng-controller="SearchController" id="search"&gt;
    &lt;h1&gt; This is a test &lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>There are many other files in the package. I'm new to this, so I am open to suggestions on where to look. This is the file structure:</p>
  
  <p><a href="https://i.stack.imgur.com/2X1Ed.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2X1Ed.png" alt="enter image description here"></a></p>
  
  <p><strong>EDIT</strong> When moving the ArcGIS API reference to the top of index.jsp, I now have issues resolving dojo_fr.js (on local server). How can I configure this so that both are resolved?</p>
  
  <p>This version creates a 404 error looking for the file in <a href="https://js.arcgis.com/3.17/dojo/nls/dojo_fr.js" rel="nofollow noreferrer">https://js.arcgis.com/3.17/dojo/nls/dojo_fr.js</a>:</p>
  
  <pre><code>&lt;%@ page contentType="text/html;charset=UTF-8" language="java" %&gt;&lt;!doctype html&gt;
  &lt;html ng-app="pf.pde.app.map" class="map-viewport"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;link rel="stylesheet" href="js/arcgis/esri/css/esri.css"&gt;
    &lt;link rel="stylesheet" href="css/bootstrap/bootstrap.css"&gt;
    &lt;link rel="stylesheet" href="css/bootstrap/bootstrap-theme.css"&gt;
  
    &lt;link rel="stylesheet" href="css/map.css"&gt;
  
    &lt;script src="https://js.arcgis.com/3.17/"&gt;&lt;/script&gt;
  
    &lt;script src="js/arcgis/dojo/dojo.js" data-dojo-config="async: true"&gt;&lt;/script&gt;
    &lt;script src="js/angularjs/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/angularjs/i18n/angular-locale_fr-fr.js"&gt;&lt;/script&gt;
    &lt;script src="js/angularjs/angular-animate.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/angularjs/angular-route.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/bootstrap/ui-bootstrap-tpls-1.1.2.min.js"&gt;&lt;/script&gt;
  
  
    &lt;script src="js/utils/ColorsUtil.js"&gt;&lt;/script&gt;
  
    &lt;script src="js/controllers.js"&gt;&lt;/script&gt;
  
    &lt;script src="js/controllers/Attributes.js"&gt;&lt;/script&gt;
    &lt;script src="js/controllers/Results.js"&gt;&lt;/script&gt;
    &lt;script src="js/controllers/Identify.js"&gt;&lt;/script&gt;
    &lt;script src="js/controllers/Toolbar.js"&gt;&lt;/script&gt;
    &lt;script src="js/controllers/MapService.js"&gt;&lt;/script&gt;
    &lt;script src="js/controllers/Map.js"&gt;&lt;/script&gt;
    &lt;script src="js/controllers/Body.js"&gt;&lt;/script&gt;
    &lt;script src="js/controllers/Search.js"&gt;&lt;/script&gt;
  
    &lt;script src="js/app.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body ng-controller="BodyController" class="map-body"&gt;
  
  &lt;div style="display: none" ng-controller="IdentifyController"&gt;&lt;/div&gt;
  
  
  
  &lt;div id="mapDiv" ng-controller="MapController"&gt;
    &lt;script type="text/ng-template" id="infoWindowTemplate.html"&gt;
      &lt;div style="max-height: 300px;overflow-y: auto;overflow-x: hidden"&gt;
        &lt;table cellpadding="2"&gt;
          &lt;tbody&gt;
          &lt;tr ng-repeat="attribute in resultsScope.popover.attributes" ng-class="$index%2==1?'map-attributes-even':''" &gt;
            &lt;td style="font-weight: bold" &gt;{{attribute.label}}&lt;/td&gt;
            &lt;td style="padding-left: 5px" uib-tooltip="{{attribute.value}}"&gt;{{attribute.value}}&lt;/td&gt;
          &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/script&gt;
    &lt;div id="popoverPosition"
         popover-title="{{resultsScope.popover.title}}"
         uib-popover-template="resultsScope.popover.templateUrl"
         popover-is-open="resultsScope.popover.isOpen"
    &gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="map-toolbar"  ng-controller="ToolbarController" id="toolbar"&gt;
    &lt;div class="btn-group"&gt;
      &lt;label class="btn btn-primary" ng-click="onMapActionClick('prev')" ng-disabled="navModel.prev" uib-tooltip="Vue précédente" tooltip-placement="bottom"&gt;&lt;i class="glyphicon glyphicon-circle-arrow-left"&gt;&lt;/i&gt;&lt;/label&gt;
      &lt;label class="btn btn-primary" ng-model="mapTool" uib-btn-radio="'pan'" uib-tooltip="Déplacer" tooltip-placement="bottom"&gt;&lt;i class="glyphicon glyphicon-move"&gt;&lt;/i&gt;&lt;/label&gt;
      &lt;label class="btn btn-primary" ng-click="onMapActionClick('next')" ng-disabled="navModel.next" uib-tooltip="Vue suivante" tooltip-placement="bottom"&gt;&lt;i class="glyphicon glyphicon-circle-arrow-right"&gt;&lt;/i&gt;&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="btn-group"&gt;
      &lt;label class="btn btn-primary" ng-model="mapTool" uib-btn-radio="'zoomout'" uib-tooltip="Dézoomer" tooltip-placement="bottom"&gt;&lt;i class="glyphicon glyphicon-zoom-out"&gt;&lt;/i&gt;&lt;/label&gt;
      &lt;label class="btn btn-primary" ng-click="onMapActionClick('full')" uib-tooltip="Vue globale" tooltip-placement="bottom"&gt;&lt;i class="glyphicon glyphicon-fullscreen"&gt;&lt;/i&gt;&lt;/label&gt;
      &lt;label class="btn btn-primary" ng-model="mapTool" uib-btn-radio="'zoomin'" uib-tooltip="Zoomer" tooltip-placement="bottom"&gt;&lt;i class="glyphicon glyphicon-zoom-in"&gt;&lt;/i&gt;&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="btn-group"&gt;
      &lt;label class="btn btn-primary" ng-model="mapTool" uib-btn-radio="'identify'" uib-tooltip="Identifier" tooltip-placement="bottom"&gt;&lt;i class="glyphicon glyphicon-info-sign"&gt;&lt;/i&gt;&lt;/label&gt;
    &lt;/div&gt;
  
    &lt;div class="btn-group" style="display: inline-block;width:400px" ng-controller="MapServiceController"&gt;
      &lt;script type="text/ng-template" id="serviceLyerTemplate.html"&gt;
        &lt;a&gt;
          &lt;span ng-bind-html="match.label | uibTypeaheadHighlight:query | BoldLayersOptions:match"&gt;&lt;/span&gt;
        &lt;/a&gt;
      &lt;/script&gt;
      &lt;div style="display: inline-block;" &gt;
        &lt;input type="text" ng-model="serviceSelected" placeholder="Selectionner un service" uib-typeahead="service as service.name for service in services | filter:{name:$viewValue}"
               typeahead-template-url="serviceLyerTemplate.html" class="form-control" typeahead-show-hint="true" typeahead-min-length="0" style="display: inline-block;"
               typeahead-on-select="onServiceSelect($model)" typeahead-select-on-blur="true"&gt;
      &lt;/div&gt;
      &lt;div style="display: inline-block;width:50%"&gt;
        &lt;input type="text" ng-model="layerSelected" placeholder="Selectionner une couche" uib-typeahead="layer as layer.name for layer in layers | filter:{name:$viewValue}"
               typeahead-template-url="serviceLyerTemplate.html" class="form-control" typeahead-show-hint="true" typeahead-min-length="0" style="display: inline-block;"
               typeahead-on-select="onLayerSelect($model)" typeahead-select-on-blur="true"
        &gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div class="map-messagebar"&gt;
    &lt;uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)" style="width: 600px"&gt;{{alert.msg}}&lt;/uib-alert&gt;
  &lt;/div&gt;
  
  &lt;label class="btn btn-success map-identify" ng-model="resultsScope.visible" uib-btn-checkbox ng-click="attributesScope.visible=$event.ctrlKey?resultsScope.visible:attributesScope.visible"&gt;&lt;i class="glyphicon glyphicon-info-sign"&gt;&lt;/i&gt;&lt;/label&gt;
  &lt;label class="btn btn-success map-show-attributes" ng-model="attributesScope.visible" uib-btn-checkbox ng-click="resultsScope.visible=$event.ctrlKey?attributesScope.visible:resultsScope.visible"&gt;&lt;i class="glyphicon glyphicon-list-alt"&gt;&lt;/i&gt;&lt;/label&gt;
  &lt;button class="btn btn-success map-reset" ng-click="reset()"&gt;&lt;i class="glyphicon glyphicon-remove-sign"&gt;&lt;/i&gt;&lt;/button&gt;
  
  
  
  &lt;div class="panel panel-primary map-results animate-hide" id="resultsDiv" ng-controller="ResultsController" ng-show="visible"&gt;
    &lt;div class="panel-heading"&gt;&lt;i class="glyphicon glyphicon-info-sign"&gt;&lt;/i&gt; Résultats&lt;i class="pull-right glyphicon glyphicon-chevron-left" ng-click="visible=!visible"&gt;&lt;/i&gt;&lt;/div&gt;
    &lt;div class="panel-body map-results-body" &gt;
      &lt;uib-accordion close-others="oneAtATime" style="width: 100%;height: 100%"&gt;
        &lt;uib-accordion-group ng-repeat="layer in layers" is-open="layer.isFirstOpen" class="panel panel-success"&gt;
          &lt;uib-accordion-heading&gt;&lt;i class="glyphicon glyphicon-play" ng-style="layer.style"&gt;&lt;/i&gt; {{layer.name}}&lt;/uib-accordion-heading&gt;
          &lt;label class="btn btn-link btn-default map-result" ng-model="result.visible" ng-click="show(result)" ng-repeat="result in layer.results" uib-btn-checkbox&gt;
            {{result.displayValue}}
            &lt;i class="pull-right glyphicon glyphicon-fullscreen" ng-click="zoom(result,$event)"&gt;&lt;/i&gt;
            &lt;i class="pull-right glyphicon glyphicon-list-alt" ng-click="attributesScope.visible=true;attributesScope.show(result,$event)" style="margin-right:5px"&gt;&lt;/i&gt;
          &lt;/label&gt;
        &lt;/uib-accordion-group&gt;
      &lt;/uib-accordion&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="panel panel-primary map-attributes" id="attributesDiv" ng-controller="AttributesController" ng-show="visible"&gt;
    &lt;div class="panel-heading"&gt;&lt;i class="glyphicon glyphicon-list-alt"&gt;&lt;/i&gt; Attributs&lt;i class="pull-right glyphicon glyphicon-chevron-right" ng-click="visible=!visible"&gt;&lt;/i&gt;&lt;/div&gt;
    &lt;div class="panel-body map-attributes-body"&gt;
      &lt;table cellpadding="2"&gt;
        &lt;tbody&gt;
        &lt;tr ng-repeat="attribute in attributes" ng-class="$index%2==1?'map-attributes-even':''" &gt;&lt;td style="font-weight: bold"&gt;{{attribute.label}}&lt;/td&gt;&lt;td style="padding-left: 5px"&gt;{{attribute.value}}&lt;/td&gt;&lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  &lt;div ng-controller="SearchController" id="search"&gt;
    &lt;h1&gt; This is a test &lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>UPDATE</strong> I'm trying to do the dojoConfig, but I am still not getting it (see how it currently is below). There are other things that are keeping the page from loading as well. When these things are eliminated, the page loads and the rest works :</p>
  
  <p>-ArcGIS API online reference (404 error on dojo_fr.js)
  -requiring esri/Search/dijit (404 error on Search.js if ArcGIS API is not referenced the way I've done it below)</p>
  
  <pre><code>  &lt;script src="https://js.arcgis.com/3.17/"&gt;&lt;/script&gt;
  
    &lt;!-- First dojoConfig --&gt;
       &lt;script type="text/javascript"&gt;
       var dojoConfig = {
          packages: [
              {
                  location: '/js/arcgis',
                  name: 'arcgis'
              }
          ]
       };
    &lt;/script&gt;
  
    &lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"&gt;&lt;/script&gt;
  
    &lt;script src="js/arcgis/dojo/dojo.js" data-dojo-config="async: true"&gt;&lt;/script&gt;
  </code></pre>