AngularJS Uncaught TypeError: Cannot read property 'replace' of undefined

Question

When my angular application starts, it immediately raises an error at Line 4414 of Angular.js (v1.4.3). It seems to be having trouble loading a service during the initialization (bootstrapping) stage. When I hit F5 to continue, the _Layout.chtml is loaded. However, the ui-view isn't loaded from the Index.cshtml. That indicates the Home controller isn't executed, so the $scope isn't populated. It should have been in "Home" ui-state, but it did not going in to that state with url "http://localhost/myApp/". Thanks for your help.

From Chrome console

trimEmptyHash@ angular.js: 11267
$get@ angular.js: 12096
invoke@ angular.js: 4450(anonymous
  function)@ angular.js: 4268
getService@ angular.js: 4409
invoke@ angular.js: 4441(anonymous
  function)@ angular.js: 4268
getService@ angular.js: 4409
invoke@ angular.js: 4441(anonymous
  function)@ angular.js: 4268
getService@ angular.js: 4409
invoke@ angular.js: 4441(anonymous
  function)@ angular.js: 4272
forEach@ angular.js: 336
createInjector@ angular.js: 4272
doBootstrap@ angular.js: 1630
bootstrap@ angular.js: 1651
angularInit@ angular.js: 1545(anonymous
  function)@ angular.js: 28359
jQuery.Callbacks.fire@ jquery - 2.1.4.js: 3099
jQuery.Callbacks.self.fireWith@ jquery - 2.1.4.js: 3211
jQuery.extend.ready@ jquery - 2.1.4.js: 3417
completed@ jquery - 2.1.4.js: 3433

Here is the callstack and breakpoint

When click any dropdown in the menu renderded by _layout.cshtml, I got "Unable to get property 'split' of undefined or null reference". It think the URL is "undefined".

Here is my App.js

/// <reference path="E:\Work\App\AngularSPA\AngularSPA\Views/TasksEndedTable .cshtml" />

'use strict';

angular.module('App', ['ui.router', 'App.controllers', 'App.filters', 'App.services', 'ui.bootstrap'])

// Gets executed during the provider registrations and configuration phase. Only providers and constants can be
// injected here. This is to prevent accidental instantiation of services before they have been fully configured.
.config(['$stateProvider', '$locationProvider',
  function($stateProvider, $locationProvider) {

    // UI States, URL Routing & Mapping. For more info see: https://github.com/angular-ui/ui-router
    // ------------------------------------------------------------------------------------------------------------

    $stateProvider
      .state('home', {
        url: '/',
        templateUrl: 'views/index',
        controller: 'HomeCtrl'
      })
      .state('about', {
        url: '/about',
        templateUrl: 'views/about',
        controller: 'AboutCtrl'
      })
      .state('contacts', {
        url: '/contacts',
        templateUrl: 'views/contacts',
        controller: 'ContactsCtrl'
      })
      .state('login', {
        url: '/login',
        templateUrl: 'views/login',
        controller: 'LoginCtrl'
      })
      .state('preferences', {
        url: '/preferences',
        templateUrl: 'views/preferences',
        controller: 'PreferenceCtrl'
      })
      .state('uiGrid', {
        url: '/uigrid',
        templateUrl: 'views/uigrid.cshtml',
        controller: 'UIGridCtrl'
      })
      // Task routes -----------------------------
      .state('taskList', {
        url: '/:listType',
        templateUrl: 'views/tasksList.cshtml',
        controller: 'TaskCtrl'
      })
      .state('taskSearchForm', {
        url: '/taskSearch/:formType',
        templateUrl: 'views/taskSearch.cshtml',
        controller: 'TaskSearchCtrl'
      })
      .state('taskEdit', {
        url: '/taskEdit/:id',
        templateUrl: 'views/taskEdit.cshtml',
        controller: 'TaskEditCtrl'
      })
      .state('taskAdd', {
        url: '/taskAdd',
        templateUrl: 'views/taskAdd.cshtml',
        controller: 'TaskAddCtrl'
      })

    // User routes -----------------------------
    .state('users', {
        url: '/users',
        tempalteUrl: 'views/users',
        controller: 'UserCtrl',
      })
      .state('addUser', {
        url: '/addUser',
        tempalteUrl: 'views/userAdd',
        controller: 'UserAddCtrl',
      })

    // Otherwise routes -----------------------------
    .state('otherwise', {
      url: '*path',
      templateUrl: 'views/404',
      controller: 'Error404Ctrl'
    });

    $locationProvider.html5Mode(true);

  }
])

.run(['$templateCache', '$rootScope', '$state', '$stateParams',
  function($templateCache, $rootScope, $state, $stateParams) {

    // <ui-view> contains a pre-rendered template for the current view
    // caching it will prevent a round-trip to a server at the first page load
    var view = angular.element('#ui-view');
    $templateCache.put(view.data('tmpl-url'), view.html());

    // Allows to retrieve UI Router state information from inside templates
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;

    $rootScope.$on('$stateChangeSuccess',
      function(event, toState) {

        // Sets the layout name, which can be used to display different layouts (header, footer etc.)
        // based on which page the user is located
        $rootScope.layout = toState.layout;
      });
  }
]);

Answer 1

Make sure your IIS Application name is all in lowercase. (might have to remove it and recreate it, if not)

So that it matches what you see when you view source to look at the base tag for your app.

<base href="http://case/sensitivepath" />

That it matches what is in IIS (Like ..\wwwroot\sensitivepath )

Best to check all your route case issues too.