使用Angular CLI+UniteGallery时遇g_ugFunctions未定义问题求助

Hey Adrian, let's work through that g_ugFunctions is not defined error you're facing with UniteGallery in your Angular 5 app. I've dealt with similar jQuery-dependent library issues in older Angular versions before, so here are targeted fixes to try:

UniteGallery relies entirely on jQuery, and manual imports in main.ts can sometimes mess up the execution order. Instead of importing UniteGallery files in main.ts, use your project's angular-cli.json (since you're on CLI 1.7.4) to load dependencies in the right sequence:

1. Open angular-cli.json and find the scripts array under the apps section
2. Add jQuery first, followed by UniteGallery core and its theme:

   "scripts": [
     "../node_modules/jquery/dist/jquery.min.js",
     "../node_modules/unitegallery/dist/js/unitegallery.js",
     "../node_modules/unitegallery/dist/themes/tiles/ug-theme-tiles.js"
   ]
   

3. Remove the UniteGallery import lines from main.ts—the CLI will handle loading these globally in the correct order.

TypeScript doesn't recognize UniteGallery's global g_ugFunctions by default, which triggers the error. Fix this by adding a type declaration:

1. If you don't already have one, create a typings.d.ts file in your src/ folder
2. Add this line to the file:

   declare var g_ugFunctions: any;
   

This tells TypeScript that the variable exists in the global scope, eliminating compilation errors.

Even with correct loading, Angular's component lifecycle might run before UniteGallery's global variables are fully mounted. Use the AfterViewInit hook and a safety check to ensure everything is ready:

import { AfterViewInit, Component } from '@angular/core';
// Make sure jQuery is typed if needed
declare var jQuery: any;

@Component({
  selector: 'app-gallery',
  templateUrl: './gallery.component.html'
})
export class GalleryComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    // Wait for g_ugFunctions to be available before initializing
    const initGallery = () => {
      if (typeof g_ugFunctions !== 'undefined') {
        jQuery('#your-gallery-id').unitegallery();
      } else {
        setTimeout(initGallery, 50);
      }
    };
    
    initGallery();
  }
}

Double-check that your plugin correctly exposes jQuery to the global scope, since UniteGallery expects it there:

// provider-plugin.ts
import * as $ from 'jquery';

// Attach jQuery to window so UniteGallery can find it
window['jQuery'] = $;
window['$'] = $;

Ensure this file is imported before any jQuery-dependent code in main.ts (which it already is in your setup).

Give these steps a try in order—most likely the loading order or global variable declaration is the root cause here.

内容的提问来源于stack exchange，提问作者Adrian