Pannellum: Use in Angular2?

[johnathandinh]

Has anyone tried to use this in Angular2 via dependency injection? Looking for guidance on how to lazy load it...

I am currently initializing the plugin through the Window object, via Window as a provider to NgModule. Unfortunately, this requires it to load on App start and not at time of call.

[mpetroff]

I've never used Angular, but maybe someone else can help.

[khanhvu161188]

@johnathandinh

1. in angular-cli.json
   add vendor/pannellum/pannellum.js in "scripts"
   add vendor/pannellum/pannellum.css in "styles"
2. in component:
   add declare var pannellum: any;
   and use like normal

 pannellum.viewer('panoramaContainer', {
      "type": "equirectangular",
      "panorama": photourl,
      "autoLoad": true,
      "compass": true
    });

[johnathandinh]

@khanhvu161188 So if I add it to the vendors, it won't get instantiated in the background on load?

[Khurshid11]

@khanhvu161188
Thanks, it works perfectly for me.

[mpetroff]

Since this seems to be resolved, I'm closing the issue.

[esanya]

Hi,

I would like to integrate pannellum into an angular6 app.
I did:
-cd myangular projekt root
-npm i pannellum

This adds pannellum into package.json, but not into angular.json (there is no angular-cli.json now).

With the setup above, the pannellum integration does not work.

import * as pannelllum from pannellum works, but I'm not sure how could I instantiate some pannellum object to work with (viewer)...

Could you help?
Thx,
Regards
Sandor

[alegroSandermann]

Hi, I would also know how to use it in angular 8. Can't get it work.

[johnathandinh]

@esanya @alegroSandermann
Implemented into a pano.component.ts like so.....

@Component({
  selector: 'ng-pano',
  templateUrl: './pano.component.html',
})
export class PanoComponent implements OnInit, OnChanges, OnDestroy {
  private pano

  ngOnInit() {
    this.pano = window.pannellum.viewer(element, config)
  }

  ngOnChanges(changes) {
    // Couldn't get Pannellum to update the image without destroying, I don't remember why.
    this.pano.destroy()
    this.pano = window.pannellum.viewer(element, config)
  }

  ngOnDestroy() {
    this.pano.destroy()
  }
}

[alegroSandermann]

If I implement this I get the message:
Property 'nativeWindow' does not exist on type 'Window & typeof globalThis'.

[johnathandinh]

If I implement this I get the message:
Property 'nativeWindow' does not exist on type 'Window & typeof globalThis'.

Sorry, nativeWindow should not exist. I've edited it out of my snippet. Have you initiated pannellum in the component? That needs to be declared to exist in your window scope.

[alegroSandermann]

I did declare var window: any; after the import. This eliminates the error but it does also not work
And what I have seen, the import import * as pannellum from 'pannellum/build/pannellum.js'; has never been used

[johnathandinh]

I did declare var window: any; after the import. This eliminates the error but it does also not work
And what I have seen, the import import * as pannellum from 'pannellum/build/pannellum.js'; has never been used

What does not work specifically? Please share a snippet.

Right, I've removed that also from the snippet. Are you still seeing that?

[alegroSandermann]

This is my component ts file:
`import { Component, OnInit, OnChanges, OnDestroy } from '@angular/core';

declare var window: any;

@Component({
selector: 'app-landingpage',
templateUrl: './landingpage.component.html',
styleUrls: ['./landingpage.component.css']
})

export class LandingpageComponent implements OnInit, OnChanges, OnDestroy {
private pano;

constructor() { }

ngOnInit() {
this.pano = window.pannellum.viewer('panoramaContainer',
{
"type": "equirectangular",
"panorama": "https://pannellum.org/images/alma.jpg"
});
}

ngOnChanges(changes) {
// Couldn't get Pannellum to update the image without destroying, I don't remember why.
this.pano.destroy()
this.pano = window.pannellum.viewer('panoramaContainer',
{
"type": "equirectangular",
"panorama": "https://pannellum.org/images/alma.jpg"
});
}

ngOnDestroy() {
this.pano.destroy()
}

}`

The console says:
ERROR TypeError: Cannot read property 'viewer' of undefined at LandingpageComponent.ngOnInit (landingpage.component.ts:20) at checkAndUpdateDirectiveInline (core.js:31910) at checkAndUpdateNodeInline (core.js:44367) at checkAndUpdateNode (core.js:44306) at debugCheckAndUpdateNode (core.js:45328) at debugCheckDirectivesFn (core.js:45271) at Object.eval [as updateDirectives] (LandingpageComponent_Host.ngfactory.js? [sm]:1) at Object.debugUpdateDirectives [as updateDirectives] (core.js:45259) at checkAndUpdateView (core.js:44271) at callViewAction (core.js:44637)

[johnathandinh]

Oh, you still have to init pannellum.

1. in angular-cli.json
   add vendor/pannellum/pannellum.js in "scripts"
   add vendor/pannellum/pannellum.css in "styles"
2. in component:
   add declare var pannellum: any;
   and use like normal

 pannellum.viewer('panoramaContainer', {
      "type": "equirectangular",
      "panorama": photourl,
      "autoLoad": true,
      "compass": true
    });

[alegroSandermann]

I have no angular-cli.json, just an angular.json

I added the script and css but get the same error message at the console.

[jakubmank]

I have no angular-cli.json, just an angular.json

I added the script and css but get the same error message at the console.

From Angular 6 version angular-cli.json has been replaced with angular.json

[saifkhan-786]

Hi I have successfully used it in Angular 11
step 1 install npm i pannellum
step 2 add "./node_modules/pannellum/build/pannellum.js" inside script in angular.json
step 3 add "./node_modules/pannellum/build/pannellum.css" inside styles in angular.json
step 4 declare var pannellum: any; in your component
step 5 pannellum.viewer('panoramaContainer', {
"type": "equirectangular",
"panorama": "../assets/Willpearson-004.jpg",
"autoLoad": true,
"compass": true
}); in your component.
step 6
"<div id="panoramaContainer"></div>" in html template
and add css #panoramaContainer {
width: 600px;
height: 400px;
}

its done``

[saifkhan-786]

I have no angular-cli.json, just an angular.json
I added the script and css but get the same error message at the console.

From Angular 6 version angular-cli.json has been replaced with angular.json

Hi I have successfully used it in Angular 11
step 1 install npm i pannellum
step 2 add "./node_modules/pannellum/build/pannellum.js" inside script in angular.json
step 3 add "./node_modules/pannellum/build/pannellum.css" inside styles in angular.json
step 4 declare var pannellum: any; in your component
step 5 pannellum.viewer('panoramaContainer', {
"type": "equirectangular",
"panorama": "../assets/Willpearson-004.jpg",
"autoLoad": true,
"compass": true
}); in your component.
step 6
"

" in html template
and add css #panoramaContainer {
width: 600px;
height: 400px;
}

its done``

[almiavicas]

declare var pannellum: any; is necessary for angular v11. You should include this line of code in your components, just after your imports.

The comments from @khanhvu161188 and @saifkhan-786 explain everything you need to make it work.