Problem with navigator and Angular Universal

Question

Problem with navigator and Angular Universal

lkurylo opened this issue 4 years ago · comments

I'm trying to set up an Angular Universal and I have a problem with call to navigator in keys.ts:

node .\dist\server.js
D:\repo\Budget\SRC\Trunk\Budget.Api\UI\dist\server.js:300301
var isMac = (navigator.userAgent.indexOf('Mac OS') !== -1);

ReferenceError: navigator is not defined

I tried using domino and MockBrowser as a workaround but with no result.

const MockBrowser = require('mock-browser').mocks.MockBrowser;
    const mock = new MockBrowser();


    global['navigator'] = mock.getNavigator();

Omri commented 4 years ago

closing.

Omri · Answer 1 · Tue Feb 18 2020 20:12:51 GMT+0800 (China Standard Time)

cool use case, however I have never tested this library with Angular Universal, I assume it might have some compatibility issue since I do use some browser API and not Angular adapters to achieve it.
I think supporting it might not be straight forward as it is.
Especially since my limited knowledge of Angular Universal.
I will try to look into it regardless.
Thanks a lot for reporting the issue.
I assume I need to test the environment and if we are running in universal, need to create a mock navigator object, or not run the user agents checks at all.

Omri · Answer 2 · Wed Jul 22 2020 08:20:40 GMT+0800 (China Standard Time)

@lkurylo
Please provide a minimum example in which I can reproduce so I can check various solutions.
Thanks a lot.
will re-open if still relevant.

Miguel Angel Chico · Answer 3 · Tue Jul 28 2020 15:14:04 GMT+0800 (China Standard Time)

Hi @omridevk

I faced the same issue described here.
I created a super simple repository for you to test the problem: https://github.com/miguelchico/basic-angular-cli-universal

Just install dependencies and then:

Execute ng serve for a non-ssr execution (all works fine)
Execute npm run dev:ssr. It will try to start a development server to serve the app (it is ok if you use the dev server, the small issue is the same)

This is the first output error.

I modified the line with issues in node_modules to skip the error and see if there were something else and I found another one:

You can find a bit more information about SSR in the official guide.

I think you might try to use a similar approach than here to solve both issues.

Please let me know if you need anything else to check it.

Omri · Answer 4 · Tue Jul 28 2020 20:18:35 GMT+0800 (China Standard Time)

@miguelchico
Thank you so much for providing this information
I will look into it ASAP and hopefully can provide a solution that will work for both platforms.
Thanks again.

Miguel Angel Chico · Answer 5 · Fri Aug 07 2020 05:30:43 GMT+0800 (China Standard Time)

@omridevk
I just created a quick fix for this. Would you mind to check it?
Thanks.

Omri · Answer 6 · Sat Aug 08 2020 05:04:46 GMT+0800 (China Standard Time)

will clone your repo and test it out. thanks a lot for creating it.

Omri · Answer 7 · Sat Aug 08 2020 06:37:22 GMT+0800 (China Standard Time)

thanks to @miguelchico
will be fixed in next release.

Omri · Answer 8 · Sat Aug 08 2020 07:27:03 GMT+0800 (China Standard Time)

@miguelchico
I have modified some of your code, I hope it is okay :)
Can you please let me know if the issue persist in the latest version (I have added to fix to v7,v8 and v9) to make sure it works with all the Angular LTS versions.

Miguel Angel Chico · Answer 9 · Sat Aug 08 2020 18:11:35 GMT+0800 (China Standard Time)

@omridevk
Tested with version 10.1.12 and all good from my side.
Thank you!