我正在构建Angular 7应用程序,当我添加一个软件包npm install dragula --save
并将其导入pollyfills.ts
文件时,出现此错误:
index.js:2未捕获的ReferenceError:未定义全局 在Object ../ node_modules / custom-event / index.js(index.js:2) 位于 webpack_require (引导程序:83) 在Object ../ node_modules / crossvent / src / crossvent.js(crossvent.js:3) 位于 webpack_require (引导程序:83) 在Object ../ node_modules / dragula / dragula.js(dragula.js:4) 位于 webpack_require (引导程序:83) 在Module ../ src / polyfills.ts(polyfills.ts:1) 位于 webpack_require (引导程序:83) 在Object.1(polyfills.ts:92) 在 webpack_require (bootstrap:83)
当我用google搜索它时,每个人都说要将此(window as any).global = window;
添加到pollyfills.ts
中,我已经做到了,但仍然收到错误消息。我还准备删除node_modules文件夹,并且npm i
也已经完成。
我不知道还能在这里做什么。谁能告诉我一些建议或至少说明为什么会这样?
这可能无关紧要,但我也要添加它。在将它们导入pollyfills.ts
accordion-group.component.ts:9未捕获的ReferenceError:全局不是 定义的 在Module ../ src / app / components / accordion / accordion-group.component.ts (accordion-group.component.ts:9) 位于 webpack_require (引导程序:83) 在Module ../ src / app / components / accordion / accordion.module.ts(accordion.component.ts:10) 位于 webpack_require (引导程序:83) 在Module ../ src / app / shared / shared.module.ts(window.extensions.ts:15) 位于 webpack_require (引导程序:83) 在Module ../ src / app / app.module.ts(app.constants.ts:17) 位于 webpack_require (引导程序:83) 在Module ../ src / main.ts(main.ts:1) 在 webpack_require (bootstrap:83)
答案 0 :(得分:10)
也可以通过添加来解决
(window as any).global = window;
到您的polyfills.ts
。
参考:https://github.com/angular/angular-cli/issues/9827#issuecomment-386154063
答案 1 :(得分:6)
几个星期前,我遇到了类似的问题,现在我在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
中查找-您是否以良好的方式导入了Dragula?
@NgModule({
declarations: [
...
],
imports: [
...
DragulaModule.forRoot(),
...
],
exports: [
...
],
providers: [
... ],
bootstrap: [AppComponent]
})
请注意,这应该是您应用的主要app.module.ts
,而不是任何子模块或延迟加载的模块。
答案 2 :(得分:2)
在我看来,最好的解决方案是将此代码添加到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;
答案 3 :(得分:0)
您是否为浏览器配置了自定义driver.page_source
?很有可能在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.
中删除-解决了该问题。
答案 4 :(得分:0)
我也收到了“全局未定义”错误。我所要做的就是添加
<script>
global = globalThis // fix for "global not defined" error
</script>
到 \src\index.html(angular 的主 HTML 文件)。但它是不同的包,我在浏览器控制台中收到错误消息,所以这可能无济于事。