I have a very weird issue with AngularJS app. I'm dynamically trying to apply the base href tag to specific routes alone for the purpose of loading JS files dynamically inside those route templates. For this reason I have come up with a solution.
CONTROLLER
$scope.baseHrefDynamic = 'test/' + $rootScope.testActive + '/';
$ocLazyLoad.load('test/' + $rootScope.testActive + '/c2runtime.js');
Here I need the c2runtime.js file to be loaded from a location outside the app so I have used OCLAZYLOAD to load it after the base href is dynamically set. This is because the c2runtime.js file has a data.js file which is loaded dynamically only and it loads based upon the project's absolute path. In my HTML I have the following markup
HTML
<html>
<base href="{{baseHrefDynamic}}">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
Actual problem
The Issue i'm facing is that the route after loading the template sets the base href perfectly for the first time, data.js inside the c2runtime.js loads perfectly based on the base href path. However when I press the back button and click the route link again, the base href is not set. (The c2runtime.js's data.js loads from the project absolute path rather than the base href's). What can possibly be wrong here?
The base href works perfectly at first route change but doesn't work when I go back and come to the same route again.
we can use local storage instead of $rootScope for set item
when you call baseHrefDynamic before getting value from the local storage.