Angular open component in new tab without bootstrapping whole app

Question

In my Angular 10 app I would like to open component in new browser tab. I would like to do that without bootstrapping whole app and creating another app instance.

I found article Open Angular components dynamically in new browser tab without bootstrapping the whole app again which describes exactly what I need.

But there are some issues - it's not working correctly. In Chrome incognito mode it works fine but in Chrome in normal mode or Firefox doesn't work. It opens new tab for few miliseconds and closes itself. On other computer it works fine in Firefox but doesn't work at all in Chrome.

My question is it possible to achieve that with some soluction or hack and allow it to work in any or most browsers? I wouldn't like to create multiple instances because it will be difficult to communicate and keep one state of app.

Answer 1

Practical Solution / Detection

The problem is pop-up blocking, which is a general javascript problem and not only angular related. A solution is to detect when pop-ups are blocked/closed and to inform the user.

I did a very rough implementation. I modified the popout.services.ts file and added a detection to see if the window is open and/or exists.

I added the detectPopBlocker method that is executed 2 seconds after the intial window.open is called. Please note that the original code waiting 1 second in order to send the data to the new window instance.

Project: https://stackblitz.com/edit/portal-simple-yyyffj?file=src/app/services/popout.service.ts

openPopoutModal(data) {
    const windowInstance = this.openOnce(
      "assets/modal/popout.html",
      "MODAL_POPOUT"
    );

    // Wait for window instance to be created
    setTimeout(() => {
      this.createCDKPortal(data, windowInstance);
    }, 1000);

    setTimeout(() => {
      this.detectPopupBlocker(windowInstance);
    }, 2000);
  }

   detectPopupBlocker(windowInstance) {
    if (
      !windowInstance ||
      windowInstance.closed ||
      typeof windowInstance.closed == "undefined"
    ) {
      alert(
        "This site relies on a new browser windows to diplsay data. It seems the windows has been closed." +
          "Please disable any pop-up blockers or other such software for  the specific site. "
      );
    }
  }

Theory

The problem is not your code but instead it is related to ad/popup blocking.

I tried the example in a browser without ad-blocking and it worked fine. I also tried it in a chrome browser with an Adblock extension and saw the behavior you mention (the popup window opened and closed immediately).

It notified me that one advert was blocked.

So, as I did above, I implemented one of the simple pop-up blocker detectors (maybe even simple javascript based) in order to display a message when this happens.

There are a variety of resources that show how to do this, for example:

• How can I detect if a browser is blocking a popup?
• https://stackoverflow.com/a/1089792/1688441

Answer 2

This issue is not 100% related with angular but with web patterns. Most of the newest browsers already have some sort of ad blocker or anti analytics tracking capabilities.

You have to add your domain as "safe/authorized" to be able to open a new tab.

My suggestion is to add a adblocker detector and inform the users that they should add the domain to a whitelist for a,b,c reasons.

Depending on the type of users this could work, since it seems to be an internal app. Also opening a new tab with content that is not possible to navigate or refresh is not very friendly but it always depends on the use case.