33

I am trying to open a new window when user click on button as follows:

protected assignActity(type: string): void {
    var window = window.open('/#/link');
    this.Service.assignActivity(type).subscribe(res => {
      window.location = '/#/link/' + res;
      console.log(res);
    })
  }

but it's throwing an error:

core.umd.js:3468 TypeError: Cannot read property 'open' of undefined

How to correct it to get it working?

5
  • window.open('some url'); will work but if you want to use angular-universal you'd avoid to manipulate window directly.
    – maxime1992
    Commented Nov 23, 2016 at 9:23
  • so it will possible or not
    – Rhushikesh
    Commented Nov 23, 2016 at 10:34
  • I have that requirement, so if you have any workaround please suggest
    – Rhushikesh
    Commented Nov 23, 2016 at 10:35
  • I'm not used to angular-universal but I've seen that you can access to a variable isBrowser (from what I remember). So use DI to inject this variable in your app so you can use it from anywhere. Then, when you have to use window.open just wrap it like that : if (isBrowser) { window.open('some url) }
    – maxime1992
    Commented Nov 23, 2016 at 10:50
  • @Rhushikesh , I am struggling with popup opening requirement in angular2 application with mvc can you plz provide the sample code how are you opening the browser popup window in your application. Commented Mar 14, 2018 at 6:26

1 Answer 1

53

The reason for window variable being undefined is the fact that you have declared a variable named window again in the local scope.

According to the scoping rules of javascript/typescript, before the global variable is accessed, the local variables value is looked up. Also when you initially declare a variable, it is set to undefined, Hence the error message you receive.

So all you have to do is simply change the variable name in which you capture the opened tab's reference

var newWindow = window.open('some_url');

However this is not the recommended approach as angular2 apps can run in a variety of environments such as mobile or be rendered server side where window object may or may not be available. Not to mention it would be very hard to mock the window object in tests

Instead you can wrap the window object in a service and inject that service into your component. This way you can simply substitute the service implementation according to the environment, using Dependency injection

The service file

@Injectable()
export class WindowRef {
    constructor() {}

    getNativeWindow() {
        return window;
    }
}

The component file

@Component({
  selector : 'demo',
  template : '<div> Demo </div>'
})
class DemoComponent {

   nativeWindow: any
   constructor( private winRef: WindowRef ) { 
       this.nativeWindow = winRef.getNativeWindow();
   }

    protected assignActity(type: string): void {
       var newWindow = this.nativeWindow.open('/#/link');
       this.Service.assignActivity(type).subscribe(res => {

       newWindow.location = '/#/link/' + res;
       console.log(res);
    })
}
2
  • 1
    not working for me, Do i need to call it in provider in module file? Commented Feb 1, 2018 at 11:20
  • @HidaytRahman yes. you need to call it in provider in module file
    – Tharaka
    Commented May 30, 2018 at 8:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.