typescript Angular 7：未捕获的 ReferenceError：添加包时未定义全局

Angular 7: Uncaught ReferenceError: global is not defined when adding package

提问by 3xGuy

I am building an Angular 7 app, and when i add a package npm install dragula --saveand import this into the pollyfills.tsfile i get this error:

我正在构建一个 Angular 7 应用程序，当我添加一个包npm install dragula --save并将其导入pollyfills.ts文件时，我收到此错误：

index.js:2 Uncaught ReferenceError: global is not defined at Object../node_modules/custom-event/index.js (index.js:2) at webpack_require(bootstrap:83) at Object../node_modules/crossvent/src/crossvent.js (crossvent.js:3) at webpack_require(bootstrap:83) at Object../node_modules/dragula/dragula.js (dragula.js:4) at webpack_require(bootstrap:83) at Module../src/polyfills.ts (polyfills.ts:1) at webpack_require(bootstrap:83) at Object.1 (polyfills.ts:92) at webpack_require(bootstrap:83)

index.js:2 Uncaught ReferenceError: global is not defined at Object../node_modules/custom-event/index.js (index.js:2) at webpack_require(bootstrap:83) at Object../node_modules/crossvent/src /crossvent.js (crossvent.js:3) at webpack_require(bootstrap:83) at Object../node_modules/dragula/dragula.js (dragula.js:4) at webpack_require(bootstrap:83) at Module../src /polyfills.ts (polyfills.ts:1) at webpack_require(bootstrap:83) at Object.1 (polyfills.ts:92) at webpack_require(bootstrap:83)

When I googled it everyone says to add this (window as any).global = window;to pollyfills.tsI have done this and I still get the error. I also ready to delete the node_modules folder and npm iI have done this as well.

当我搜索它时，每个人都说要将其添加(window as any).global = window;到pollyfills.ts我已完成此操作，但仍然出现错误。我也准备删除 node_modules 文件夹，npm i我也这样做了。

I do not know what else to do here. can anyone please tell me some sugestions or at least explain why this would happen?

我不知道在这里还能做什么。谁能告诉我一些建议或至少解释为什么会发生这种情况？

This may not be relevant but I'm going to add it as well. There is another error which wasnt there before I imported them into pollyfills.ts

这可能不相关，但我也会添加它。在我将它们导入之前还有另一个错误不存在pollyfills.ts

accordion-group.component.ts:9 Uncaught ReferenceError: global is not defined at Module../src/app/components/accordion/accordion-group.component.ts (accordion-group.component.ts:9) at webpack_require(bootstrap:83) at Module../src/app/components/accordion/accordion.module.ts (accordion.component.ts:10) at webpack_require(bootstrap:83) at Module../src/app/shared/shared.module.ts (window.extensions.ts:15) at webpack_require(bootstrap:83) at Module../src/app/app.module.ts (app.constants.ts:17) at webpack_require(bootstrap:83) at Module../src/main.ts (main.ts:1) at webpack_require(bootstrap:83)

Accordion-group.component.ts:9 Uncaught ReferenceError: global is not defined at Module../src/app/components/accordion/accordion-group.component.ts (accordion-group.component.ts:9) at webpack_require( bootstrap:83) at Module../src/app/components/accordion/accordion.module.ts (accordion.component.ts:10) at webpack_require(bootstrap:83) at Module../src/app/shared/shared .module.ts (window.extensions.ts:15) at webpack_require(bootstrap:83) at Module../src/app/app.module.ts (app.constants.ts:17) at webpack_require(bootstrap:83)在模块 ../src/main.ts (main.ts:1) at webpack_require(bootstrap:83)

回答by kris_IV

I had a similar problem few weeks ago, and I solve it when I change few setts in polyfills.ts now It look like:

几周前我遇到了类似的问题，现在当我更改 polyfills.ts 中的一些设置时我解决了它看起来像：

/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
 */

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
// import 'core-js/es6/parse-int';
// import 'core-js/es6/parse-float';
// import 'core-js/es6/number';
// import 'core-js/es6/math';
// import 'core-js/es6/string';
// import 'core-js/es6/date';
// import 'core-js/es6/array';
// import 'core-js/es6/regexp';
// import 'core-js/es6/map';
// import 'core-js/es6/weak-map';
// import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js';  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following for the Reflect API. */
// import 'core-js/es6/reflect';


/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';


/**
 * Required to support Web Animations `@angular/platform-browser/animations`.
 * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
 **/
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

/**
 * By default, zone.js will patch all possible macroTask and DomEvents
 * user can disable parts of macroTask/DomEvents patch by setting following flags
 */

 // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
 // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
 // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames

 /*
 * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
 * with the following flag, it will bypass `zone.js` patch for IE/Edge
 */
// (window as any).__Zone_enable_cross_context_check = true;

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.



/***************************************************************************************************
 * APPLICATION IMPORTS
 */

(window as any)['global'] = window;

Try with this setts and let me know.

尝试使用此设置并告诉我。

Look also in your app.module.ts- did you import Dragula in good way?

也看看您的app.module.ts- 您是否以良好的方式导入 Dragula？

@NgModule({
    declarations: [
        ...
    ],
    imports: [
        ...
        DragulaModule.forRoot(),
        ...
    ],
    exports: [
        ...
    ],
    providers: [
       ...    ],
    bootstrap: [AppComponent]
})

Please note that this should be a main app.module.tsfor your app, not any child or lazy loaded module.

请注意，这应该是app.module.ts您应用的主模块，而不是任何子模块或延迟加载模块。

回答by MammothDevelopper

In my vision the best solution is to add this code in your index.html for testing

在我看来，最好的解决方案是将此代码添加到 index.html 中以进行测试

<script>
  if (global === undefined) {
    var global = window;
  }
</script>

And this code to build for production (install domino ... with npm install first)

以及为生产构建的这段代码（安装多米诺骨牌......首先使用 npm install）

const domino = require('domino');
const fs = require('fs');
const path = require('path');
const template = fs
  .readFileSync(path.join('dist/browser', 'index.html'))
  .toString();
const window = domino.createWindow(template);

// Ignite UI browser objects abstractions
(global as any).window = window;
(global as any).document = window.document;
(global as any).Event = window.Event;
(global as any).KeyboardEvent = window.KeyboardEvent;
(global as any).MouseEvent = window.MouseEvent;
(global as any).FocusEvent = window.FocusEvent;
(global as any).PointerEvent = window.PointerEvent;
(global as any).HTMLElement = window.HTMLElement;
(global as any).HTMLElement.prototype.getBoundingClientRect = () => {
    return {
      left: '',
      right: '',
      top: '',
      bottom: ''
  };
};

// If using IgxIconService to register icons
(global as any).XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;

// Other optional depending on your application configuration
(global as any).object = window.object;
(global as any).navigator = window.navigator;
(global as any).localStorage = window.localStorage;
(global as any).DOMTokenList = window.DOMTokenList;