AngularJS App Works With Live Server But Not In Debug Mode In Vscode

Question

I have a demo app, as in this image, very simple app with all js and html files in the root project directory, and lib contains the dependencies:

If I go to index.html in vscode and right-click -> open with live server then the app is served and the app works normally at http://192.168.1.2:5500/index.html.

However if I go to index.html and press f5 then a new chrome instance launches but some of the app files are not "loaded/detected" and I get this error:

angular.js:138 Uncaught Error: [$injector:modulerr] Failed to instantiate module counterApp due to:
  TypeError: Cannot read properties of undefined (reading 'apply')
      at http://192.168.1.2:5500/lib/redux.js:695:22
      at http://192.168.1.2:5500/lib/redux.js:695:22
      at Object.createStore (http://192.168.1.2:5500/lib/redux.js:147:16)
      at http://192.168.1.2:5500/index.js:16:25
      at Object.invoke (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.js:5208:19)
      at runInvokeQueue (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.js:5097:35)
      at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.js:5107:11
      at forEach (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.js:388:20)
      at loadModules (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.js:5087:5)
      at createInjector (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.js:5004:19)
  https://errors.angularjs.org/1.8.3/$injector/modulerr?p0=counterApp&p1=TypeError%3A%20Cannot%20read%20properties%20of%20undefined%20(reading%20'apply')%0A%20%20%20%20at%20http%3A%2F%2F192.168.1.2%3A5500%2Flib%2Fredux.js%3A695%3A22%0A%20%20%20%20at%20http%3A%2F%2F192.168.1.2%3A5500%2Flib%2Fredux.js%3A695%3A22%0A%20%20%20%20at%20Object.createStore%20(http%3A%2F%2F192.168.1.2%3A5500%2Flib%2Fredux.js%3A147%3A16)%0A%20%20%20%20at%20http%3A%2F%2F192.168.1.2%3A5500%2Findex.js%3A16%3A25%0A%20%20%20%20at%20Object.invoke%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.8.3%2Fangular.js%3A5208%3A19)%0A%20%20%20%20at%20runInvokeQueue%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.8.3%2Fangular.js%3A5097%3A35)%0A%20%20%20%20at%20https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.8.3%2Fangular.js%3A5107%3A11%0A%20%20%20%20at%20forEach%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.8.3%2Fangular.js%3A388%3A20)%0A%20%20%20%20at%20loadModules%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.8.3%2Fangular.js%3A5087%3A5)%0A%20%20%20%20at%20createInjector%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.8.3%2Fangular.js%3A5004%3A19)
      at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.js:138:12
      at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.js:5127:15
      at forEach (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.js:388:20)
      at loadModules (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.js:5087:5)
      at createInjector (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.js:5004:19)
      at doBootstrap (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.js:1963:20)
      at bootstrap (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.js:1984:12)
      at angularInit (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.js:1869:5)
      at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.js:36595:5
      at HTMLDocument.trigger (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.js:3587:5)

You can see that the errors are coming from lib/redux.js:695:22 i.e. from the redux library that is included in my app via

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.js"></script>
    <!-- Redux -->
    <script src="lib/redux.js"></script>
    <!-- NgRedux -->
    <script src="lib/ng-redux.js"></script>

This is launch.json:

    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://192.168.1.2:5500/index.html",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

I tried the answers here, and the different config options here but no luck.

This was working before, but I tried to attach the debugger to the running chrome instance, but it didn't work so I reverted the changes, but since then I have this problem.

So what is happening and how to solve it?

p.s.: I can provide code if needed for more context.

score 0 · Accepted Answer · answered Aug 19 '22 at 15:54

Ok this one was tricky, after a complete day stuck at this error, I discovered the cause by mistake. I am using redux devtools, and I installed their extension in google chrome. I add support to devtools like this:

const rootEnhancer = Redux.compose(some enhancers here..., window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
// Then I use this enhancer in the store

The problem was that in my normal chrome, I have the devtools installed, thats why live server was not giving errors, but when I launch vscode in debug mode, it is launching a fresh chrome instance that does not have devtools installed, thats why this line was causing the error.

So the solution is either to remove redux devtools from this line, or find a way(which I couldn't figure out yet) to attach the debugger to the current chrome instance which has redux devtools extension installed.

AngularJS App Works With Live Server But Not In Debug Mode In Vscode

1 Answers1