Not load a JS file for a specific path

Question

I have a website by mean-stack.

Normally, all my external references are listed in index.html

I realize that one external JS library (e.g., https://cdnjs.cloudflare.com/troublelibrary.js) I am using has some conflit with a part of my website. So a workaround I am looking for is to NOT load it for a specific path https://www.myexample.com/specific.

Does anyone know how to achieve this in the routing?

Edit 1: (see the full question here)

Actually, the library that has conflit is history.js. My initial code which loads it all the time is as follows. As a result https://localhost:3000/home in a browser is always https://localhost:3000/home (i.e., will not add # because of history.js)

<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
<script src="https://cdn.rawgit.com/devote/HTML5-History-API/master/history.js"></script>

Then, if I try the following code, as Ben suggests:

<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
<script>
    var newScript = document.createElement('script');
    newScript.src = 'https://cdn.rawgit.com/devote/HTML5-History-API/master/history.js';
    document.head.appendChild(newScript);
    console.log(window.location.href)
</script>

I realize that for the first time of loading https://localhost:3000/home will not change. But, if I refresh the browser, it can change to https://localhost:3000/#/home.

So appending the script is not exactly the same as a direct reference, does anyone know why?

So if you are on a certain page, a script does not get loaded? And I assume you are using a single page angular application? — Ben Rondeau, Sep 16 '17 at 03:14
Sorry, I do NOT want to load a script if I open that certain page; for other pages, the script can be loaded in the very beginning. I am using a single page angular application. — SoftTimur, Sep 16 '17 at 03:47
Can the user navigate directly to the trouble page without going to the homepage (or any other page) first? Or do they have to go to a certain page (like the home page) before they can get to the trouble page? — Ben Rondeau, Sep 16 '17 at 03:59
Don't worry about it. It will be me who use that certain page, and I will not navigate to other pages from there; normally users are unlikely to go to that certain page. — SoftTimur, Sep 16 '17 at 04:02
Okay. If a user navigates to that page first, you can not load the script (easy solution). But if they go to a different page first and then navigate to the trouble page, you will need to delete the object created by the conflicting library since it will already be loaded from the previous page. You will then need to reload it on other pages. A conditional using `window.location` which loads/deletes the script based on your URL should work. — Ben Rondeau, Sep 16 '17 at 04:06
Users will not navigate to the trouble page. It is me who will use it. Can you give the solution of "you can not load the script (easy solution)"? — SoftTimur, Sep 16 '17 at 04:08
What Ben has suggested in comments above seems to be the right way to achieve the "workaround" that you are trying. But I'll suggest, first explain what conflict you are facing on the specific page and try to fix it. Provide details of the error and we will see if there is any way to avoid it instead of using a workaround. That will be the right thing to do. — Vivek Athalye, Sep 18 '17 at 03:20
Here is [the conflit](https://stackoverflow.com/questions/46248920/conflit-of-displaydialogasync-and-html5-history-api), and [here](https://stackoverflow.com/questions/46251383/difference-between-including-a-reference-and-appending-a-reference) is how I cannot make Ben's suggestion always work in my case. — SoftTimur, Sep 18 '17 at 03:22

score 3 · Answer 1 · answered Sep 21 '17 at 16:34

I see your problem in a different perspective. You mentioned that you use the history.js to avoid # on the URL. But you do not need history.js to do that. I think you understood your problem in the wrong way. There is an inbuilt Angular functionality to get rid off # paths. Because # is used to keep track of the relative path on any route. If we want we can override that default functionality.

But if you use this approach the server should responsible to redirect the user to index or home page on any application route since Angular handle all the routing in the application.

First you should add

<base href="/" />

in your HTML file.

Then you should enable HTML5 Mode inside Angular application as follows.

$locationProvider.html5Mode(true);

By adding these two attributes you can get rid off the # path and this is the recommended way.

Following is a complete example.

var app = angular.module("app", ["ngRoute"]);


app.controller("MainController", function($scope){
});


//Add route handler
app.config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {
    
    $routeProvider
        .when('/', {
            template: '<h1>Home</h1>',
            reloadOnSearch: true
        })
        .when('/about', {
            template: '<h1>About</h1>',
            reloadOnSearch: true           
        }).otherwise({
        redirectTo: '/'
    });

    // This will remove hash bang from the routes   
    $locationProvider.html5Mode(true);
    
}]);

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular-route.js"></script>
  
  <base href="/" />
  
</head>

<body>

  <div>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </div>
  
  <div ng-app="app" ng-controller="MainController">
     <ng-view></ng-view>
  </div>
  
</body>

</html>

As you can see on the above example when you click on the about link the server responds with not found on /about. This means the # bang is removed.

Thank you for this... But I'am aware of html5 mode, and the problem is I need `office.js` in my application (in most of the pages, but not in `specific`), which disables html5 somehow, see [here](https://stackoverflow.com/a/42703406/702977), so the only workaround I know is to add `history.js` after `office.js`. — SoftTimur, Sep 21 '17 at 19:49

score 2 · Answer 2 · answered Sep 16 '17 at 04:18

2

This is one way to do it:

if(window.location.href !== 'https://url.com/path/to/trouble/page'){
    var newScript = document.createElement('script');
    newScript.src = 'https://url.com/path/to/script';
    document.head.appendChild(newScript);
}

Add this to the <head> of the document. It will not load the trouble script on the page you specify in the if statement. Make sure not to load the trouble script anywhere else on the page as well.

answered Sep 16 '17 at 04:18

Ben Rondeau

2,983
1
15
21

There is some bug sometimes, it is not exactly as a direct reference. Please see the edit in my OP. – SoftTimur Sep 16 '17 at 04:54
What about using `if(window.location.href !== 'https://localhost:3000/home' && window.location.href !== 'https://localhost:3000/#/home' )`? – Ben Rondeau Sep 16 '17 at 05:09
You did not understand what I mean... `home` is not the specific page, when loading `home`, `history.js` should be added. My initial code (with direct reference) works well, whereas if I add `history.js` in your way, it does not always work well. So my conclusion is that your way of `appending` is not exactly the same as a direct reference. I don't know why. – SoftTimur Sep 16 '17 at 05:12

score 1 · Answer 3 · answered Sep 22 '17 at 14:22

1

you can do lazy loading of script in angular

 <script type="text/javascript" ng-src="{{exUrl1}}"></script>

and somewhere in your code (based on whatever logic you want)

 $rootScope.exUrl1 = $sce.trustAsResourceUrl(confserver.example.url);

answered Sep 22 '17 at 14:22

harishr

17,807
9
78
125

Thank you, it is indeed a way of late loading... If for most of my pages, I need to load `history.js`, I guess I need to write `` in the template of these pages. But the problem is, if we load `history.js` late like this, `history.js` will not fix the hash problem. My tests show that `history.js` has its effect only when it is in `index.html`. That's why I tend to leave `history.js` in `index.html`, but kind of disable it for the `/specific` page. – SoftTimur Sep 22 '17 at 15:25
so try to set it on by default and remove it only if you don't need it.. – harishr Sep 23 '17 at 15:18
The question is how to set it on by default (and make sure `history.js` works) and remove it when needed. – SoftTimur Sep 24 '17 at 01:16

Not load a JS file for a specific path

3 Answers3