我正在构建一个Angular 7应用程序，当我添加一个包npm install dragula --save并将其导入pollyfills.ts文件时，我会收到以下错误：
index.js:2未捕获引用错误：未定义全局在对象/node_modules/custom-event/index.js(index.js:2)在webpack_require(引导程序：83)在对象/node_modules/crosvent/src/crosvent.js(crossvent.js:3)在webpack_require(引导程序：83)在对象/node_modules/dragula/dragula.js(dragula.js:4)在webpack_require(引导程序：83)在模块/src/polyfills.ts(polyfills:ts:1)在webpack_require(引导程序：83)在Object.1(polyfills.ts:92)webpack_require(引导程序：83)
当我在谷歌上搜索时，每个人都说要将这个(window as any).global = window;添加到pollyfills.ts，我已经这样做了，但我仍然会收到错误。我还准备删除node_modules文件夹和npm i。
我不知道在这里还能做什么。有人能告诉我一些建议吗？或者至少解释一下为什么会发生这种情况？
这可能不相关，但我也会添加它。在我将它们导入pollyfills.ts之前，还有另一个错误
手风琴组.组件.ts:9未捕获引用错误：全局不是定义在模块/src/app/components/acordion/acordion-group.component.ts(手风琴组。组件。ts:9)在webpack_require(引导程序：83)在模块/src/app/components/acordion.module.ts(手风琴组件ts:10)在webpack_require(引导程序：83)在模块/src/app/shared/shared.module.ts(window.extensions.ts:15)在webpack_require(引导程序：83)在模块/src/app/app.module.ts(app.constants.ts:17)在webpack_require(引导程序：83)在模块/src/main.ts(main.ts:1)webpack_require(引导程序：83)
也可以通过添加来解决
(window as any).global = window;
到您的polyfills.ts。
参考编号：https://github.com/angular/angular-cli/issues/9827#issuecomment-386154063
几周前我遇到了一个类似的问题，现在我在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;
试试这个套装，让我知道。
看看你的app.module.ts——你进口德拉古拉的方式好吗？
@NgModule({
declarations: [
...
],
imports: [
...
DragulaModule.forRoot(),
...
],
exports: [
...
],
providers: [
... ],
bootstrap: [AppComponent]
})
请注意，这应该是应用程序的主app.module.ts，而不是任何子模块或懒惰加载模块。
在我看来，最好的解决方案是在index.html中添加此代码以测试
<script>
if (global === undefined) {
var global = window;
}
</script>
这段代码是为生产而构建的(安装domino…先安装npm)
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;
我在一个angular项目中遇到了同样的问题，我尝试了一些事情。我终于解决了这个问题。我们只需要在index.html文件中添加一行代码。检查下面的代码。
<!-- your index.html -->
<script>
var global = global || window
</script>
您有针对浏览器的自定义webpack配置吗？最有可能在angular.json中这样声明：
...
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./webpack.browser.config.js"
},
...
那么webpack.browser.config.js可能看起来是这样的：
const dotenv = require("dotenv-webpack");
const webpackConfig = {
node: { global: true, fs: "empty" }, // Fix: "Uncaught ReferenceError: global is not defined", and "Can't resolve 'fs'".
output: {
libraryTarget: "umd", // Fix: "Uncaught ReferenceError: exports is not defined".
},
plugins: [new dotenv()],
target: "node",
};
module.exports = webpackConfig; // Export all custom Webpack configs.
从其配置target: "node"中删除-它解决了问题。
我也得到了"全局未定义"；错误我所要做的就是添加
<script>
global = globalThis // fix for "global not defined" error
</script>
到\src\index.html(angular的主html文件)。但它是不同的软件包，我在浏览器控制台中收到了错误，所以这可能没有帮助。