Error when several instances with different root configurations

[Jonnyprof]

It happens to me in version 6.1.5, but I guess it happens too in the lastest version, because isPlatformBrowser function (the main problem) has the same code. I'll try to explain it as best as possible.

When you register several instances, they can reuse IntersectionObserver with findEntry function.

ng-in-viewport/projects/ng-in-viewport/src/lib/in-viewport.service.ts

Line 49 in 97a772d

const foundedEntry = this.findEntry(config.root, config.hash);

The error occurs because config.hash is always false because isPlatformBrowser returns always false.

Let's go step by step:
1- Hash is calculated in InViewportConfig contructor calling a static function.

ng-in-viewport/projects/ng-in-viewport/src/lib/in-viewport-config.ts

Line 117 in 97a772d

this._hash = InViewportConfig.hash({

2- Static hash function calls toBase64 static function.

ng-in-viewport/projects/ng-in-viewport/src/lib/in-viewport-config.ts

Lines 104 to 106 in 97a772d

	private static hash(input: object): string {
	return toBase64(InViewportConfig.stringify(input));
	}

3- toBase64 depends on isPlatformBrowser.

ng-in-viewport/projects/ng-in-viewport/src/lib/in-viewport-config.ts

Lines 43 to 47 in 97a772d

	export function toBase64(input: string): string {
	return !isPlatformBrowser()
	? toBase64Node(input)
	: toBase64Browser(input);
	}

4- isPlatformBrowser always return false, because this === window is always false.

ng-in-viewport/projects/ng-in-viewport/src/lib/in-viewport-config.ts

Lines 35 to 38 in 97a772d

	export function isPlatformBrowser() {
	try {
	return typeof window !== 'undefined' && this === window;
	} catch (e) {

5- As isPlatformBrowser is false we call toBase64Node. This function returns always false because of typeof global !== 'undefined'

ng-in-viewport/projects/ng-in-viewport/src/lib/in-viewport-config.ts

Lines 49 to 52 in 97a772d

	export function toBase64Node(input: string): string {
	try {
	return typeof global !== 'undefined' && global.Buffer.from(input).toString('base64');
	} catch (e) {

6- So this._hash is always false

ng-in-viewport/projects/ng-in-viewport/src/lib/in-viewport-config.ts

Line 117 in 97a772d

this._hash = InViewportConfig.hash({

If we have 2 instances, the first one has a rootMargin = '0px 0px 0px 0px'; and the second one rootMargin = '100px 0px 0px 0px';. When register the instances in the service, both uses same IntersectionObserver because both have same hash (false) and same root.

ng-in-viewport/projects/ng-in-viewport/src/lib/in-viewport.service.ts

Line 49 in 97a772d

const foundedEntry = this.findEntry(config.root, config.hash);

and the second one not works with the correct margin, so don't work as expected.

[k3nsei]

@Jonnyprof could you tell more about your environment? Because I don't see a way how isPlatformBrowser would return false in any browser? this in function which isn't an instance and isn't bound function should always return Window instance.

And can you prepare some example on stackblitz by forking this project https://stackblitz.com/edit/ng-in-viewport-example?embed=1&file=src/main.ts

[Jonnyprof]

Sorry, I didn't notice your reply.
I don't understand your question, sorry for my english. It happens with angular dev-server (ng serve) or in a web server with production build.
I've created a fork of your stackblitz where you can see (debugging or adding a logPoint) that your function isPlatformBrowser is false. You can see it here https://stackblitz.com/edit/ng-in-viewport-example-6cpco8.
I've attached a screenshot too.

I'm logging config.hash console.log('hash:', config.hash, 'rootMargin:', config.rootMargin); and it returns always false in a webserver environment but not in stackblitz because there global is defined. global is undefined normally in a browser environment. I've attached a screenshot.

You can download the stackblitz code and run it on a webserver and hash will be always false.
I've done more tests in a fork of your repository (https://github.com/Jonnyprof/ng-in-viewport/tree/hash-false) on branch hash-false and hash is always false (console.log too).

I hope this help.

[k3nsei]

I will switch to btoa as now node.js lts have that function in its global scope.

[k3nsei]

@all-contributors please add @Jonnyprof for bug

[allcontributors]

@k3nsei

I've put up a pull request to add @Jonnyprof! 🎉

[k3nsei]

Should be fixed in v15.0.0

[Jonnyprof]

Great, thanks! Tell me if you need some testing help.

[k3nsei]

@Jonnyprof You can install it and test if it works for you. As it was complete rewrite of library, it's now have 100% coverage. But unit tests are not real world scenarios. So it would be beneficial to see if it works in real app.