Angular 1 Base href and routing/views/controllers

Question

I am looking to add a base href to my webapp. Currently everything runs correctly when running:

localhost:3000/#/login

But i need to add base href or "charge" -> localhost:3000/charge/#/login

Current index.html

<head>
<base href="charge/" />
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" .... 
</head>

Anuglar Route File

function routerConfig($routeProvider, $locationProvider) {
$routeProvider
  .when('/map', {
    templateUrl: 'app/views/main/main.html',
    controller: 'MainController',
    controllerAs: 'mainCtrl'
  })
  .when('/login', {
    templateUrl: 'app/views/login/login.html',
    controller: 'LoginController',
    controllerAs: 'loginCtrl'
  })
  .when('/list', {
    templateUrl: 'app/views/list/list.html',
    controller: 'ListController',
    controllerAs: 'listCtrl'
  })
  .when('/reporting', {
    templateUrl: 'app/views/reporting/reporting.html',
    controller: 'ReportingController',
    controllerAs: 'reportingCtrl'
  })
  .otherwise({
    redirectTo: '/map'
  });
// $locationProvider.html5Mode(true);
}

Whenever i run my app with the basehref and navigate to localhost:3000/charge/#/login, basically every view, controller, bower component, and the module cannot be found. I have tried editing the router, changing the name of the main app folder but cannot get this to work. I know i am missing something small so any help is greatly appreciated!

My issue seems very similar to Base Href and Angular Routing and Views but i honestly just cannot figure this out.

kauffee000 kauffee000 · Accepted Answer · 2017-07-20T19:00:08

If you're using Chrome and you look in the developer console, look at what the URL for the resources it can't find:

http://localhost:8080/charge/app.js

It is looking at the root of the project, and then for a folder called charge, and then for the resource.

The HTML element specifies the base URL to use for all relative URLs contained within a document. There can be only one element in a document. - MDN

Can you tell us what your directory structure looks like here? If your project files are directly in root, try making a subfolder named "charge" and put all of your files in it.

Example: root > charge > project files

Helpful link: AngularJS: Changing App Path, and the Element

Angular 1 Base href and routing/views/controllers

2 Answers