Regression bug: Angular version not compatible with project

[Triloworld]

Details

It was before: #1885

Moment of error

This commit introduce regression: d0c9c4c

Solution

This is answer to problem: https://stackoverflow.com/a/50448475/5768332

Affected version:

I found out now and details are on screen:

Tested and working:

All automation failed to catch error in few minor version.

[mrwigster]

+1 for this issue.
I can't find a solution to fix it in my setup (Gulp + browsersync + npm)

[LittlestYardMonkey]

TLDR; Angular Module Packages need to be upgraded

angular-sanitize, angular-route, and angular-touch in the browser-sync-ui package need to be upgraded to version 1.8.2 because the 1.4.8 versions are not compatible with angular 1.8.2. More details below.

---

I have a Gulp + browser-sync + npm setup as well.

I noticed a few things in regards to this error.

1. The angular package under browser-sync-ui was bumped up from ~1.4.8 to ^1.8.2 in the commit d0c9c4c

2. The packages angular-sanitize, angular-route, and angular-touch are modules for angular. (kind of like peer dependencies?)

3. The three packages mentioned above were not bumped up to ^1.8.2

4. angular and the 3 other packages are from the same repository.

If you look at the pre-transpiled app.js file causing problems it is requiring the old modules to use with a newer version of angular.
https://github.com/BrowserSync/browser-sync/blob/325c7751cb583272fb69c56846dede9cf22c2d53/packages/browser-sync-ui/src/scripts/app.js

I think the problem is that angular-sanitize@~1.4.8 depends on the lowercase method in angular@~1.4.8. angular-sanitize was updated at some point to use the private accessor $$lowercase. I cloned the repository and did the following commands to update those packages, install and build and it's working for me. note: building fails for me on windows, this was done on wsl2 Ubuntu@20.04

#bash console example

#Clone the Repository
foo@bar:~/source/repos$ git clone https://github.com/BrowserSync/browser-sync.git

#cd to browser-sync-ui package
foo@bar:~/source/repos$ cd ./browser-sync/packages/browser-sync-ui

#update package.json devDependencies with a text editor
foo@bar:~/source/repos/browser-sync/packages/browser-sync-ui$ vim package.json
#"angular-sanitize":  "^1.8.2", 
#"angular-touch": "^1.8.2",
#"angular-route": "^1.8.2",

#cd back into the repository root, install packages and build
foo@bar:~/source/repos/browser-sync/packages/browser-sync-ui$ cd ../..
foo@bar:~/source/repos/browser-sync$ npm install
foo@bar:~/source/repos/browser-sync$ npm run-script build

I hope this helps.

@mrwigster If you want to quickly and temporarily fix browser-sync-ui you can patch it with patch-package -
https://www.mariokandut.com/how-to-patch-an-npm-dependency/

The error occurs in the file path/to/your/project/node_modules/browser-sync-ui/public/js/app.js

it's a mess to read it but if you search $$lowercase: you should be able to find the angular's api exposure, (an object hash). Add a lowercase property to the object and then assign it the same value that $$lowercase is assigned to.

// browser-sync-ui/public/js/app.js
{
  //several other api exposures 
  $$lowercase:x,
  lowercase:x, // <- add this
 //several more api exposures 
}

Once the fix is made for browser-sync, patch-package should be able to notify you about updates made to that file and then you can get rid of the temporary fix.

Edited - 11/17/2021

[shakyShane]

Fixed in browser-sync-client@2.27.8 :)