question: Understanding how to use IsBrowser

[julienR2]

Hi !

I'm using a 3rd party library ng2-ui-auth to handle the authentication by providers. However since the library create a popup, it use a lot of window element which doesn't exist on server side.

Luckily I actually don't need it at all on server side since the library is used only on the client. So declared the module Ng2UiAuthModule in app.browser.module and wanted to use isBrowser in my component like this:

if (isBrowser) {
  import { AuthService } from 'ng2-ui-auth';
}

However ts states that a import declaration must be in a namespace or module. So after compiling successfully, when I get to the page I encounter "ng2_ui_auth_1 is not defined". Probably because it did get imported because it was not in the module directly isn't it ?

Do you have some advice on this kind of workaround for 3rd party library ? What is the proper way to use IsBrowser to conditionally import a service ?

Thanks for you help !

[PatrickJS]

hey, you're looking for microsoft/TypeScript#7753 3rd party modules can take advantage of this to split code. isBrowser is only meant to be used in application code

[julienR2]

Thanks for the help ! Although I couldn't manage to apply it to my current code.

However I managed it this way.
- Importing normally the 3rd party module in the service
- use the Injector service to get the instance of the 3rd party controlling it with isBrowser

import { AuthService as AuthServiceProvider } from 'ng2-ui-auth';

@Injectable()
export class MyService {
  private authProvider: any;
 
  constructor(
    private injector: Injector
  ) {
    if (isBrowser) {
      this.authProvider = this.injector.get(AuthServiceProvider);
    }
  }
}

I though importing the non universal 3rd party library would be in my service would be a trouble but it doesn't matter. It matter where is imported the library in the modules, so in this case only in browser.module.ts

Hope this can help working around non universal modules !

[MarkPieszak]

Nicely done @julienR2 !
Might be nice to add this concept to the docs since this use-case comes up a lot.

[julienR2]

Thanks :) Indeed this workaround could be useful for a lot of 3rd party library.

I could make a PR updating the doc with this use-case if you judge it necessary !

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}