AngularJS routes not working in Chrome extension

Question

I have an AngularJS app that works fine in the browser when served by 'grunt serve'. However, trying to run the app as a Chrome extensions fails. The initial page (the '/' route) displays, but when I press a link to '/#/products/add' I get a 'Webpage not found' error.

No webpage was found for the web address: chrome-extension://acekeiblhdhhbgoagmeegclohfncadjg/#/products/add
Error code: ERR_FILE_NOT_FOUND

Why does the first route work, but the second route fails?

My manifest is bare bones currently, but I've tried various permissions (but the fact that the root route is working makes me think that other routes should work).

{
  "manifest_version": 2,

  "name": "My app",
  "description": "Does stuff",
  "version": "1.0",

  "permissions": [
    "<all_urls>"
  ],
  "browser_action": {
    "default_icon": "app/images/icon.png",
    "default_popup": "app/index.html"
  }
}

The app.js file looks like this:

'use strict';

angular.module('myApp', [
  'ngResource',
  'ngSanitize',
  'ngRoute',
  'ngStorage'
])
.config(function ($routeProvider) {
  $routeProvider.
    when('/products', {
      templateUrl: 'views/product_pages/product_list.html',
      controller: 'ProductListCtrl'
    }).
    when('/products/add', {
      templateUrl: 'views/product_pages/product_add.html',
      controller: 'ProductAddCtrl'
    }).
    when('/products/:productId', {
      templateUrl: 'views/product_pages/product_edit.html',
      controller: 'ProductEditCtrl'
    }).
    otherwise({
      redirectTo: '/products'
    });
})
.run(function () {
  // removed for brevity
});

And the product add controller reads as follows:

.controller('ProductAddCtrl', ['$scope', '$location', 'productPageCollection',
function ($scope, $location, productPageCollection) {

  $scope.showError = function(ngModelController, error) {
    return ngModelController.$error[error];
  };

  $scope.processForm = function() {
    productPageCollection.add({ 'name' : $scope.product.name });
    $location.path('/products');
  };
}])

Any ideas?

Answer 1

Your link should point to #/products/add, not /#/products/add. The second option attempts to navigate to the root folder of your extension.