Angular7で開発中のことです。以下のようなエラーが出ました。
「Uncaught ReferenceError: global is not defined」。
殺意が芽生えますが、いったん落ち着いて対処法を検討してみました。
僕のプロフィールはこちら
目次
僕の環境
OS：Windows10
Angularバージョン：7
「Uncaught ReferenceError: global is not defined」エラーとは？
僕の場合だと、「Angular×Cognito」の処理を実装するために、以下に記載のライブラリを入れておかしくなりました。
・amazon-cognito-identity-js
・aws-sdk
「Uncaught ReferenceError: global is not defined」エラーの内容
実際に出たエラーの内容です。
|
1 2 3 4 5 6 7 8 9 10 11 |
Uncaught ReferenceError: global is not defined at Object../node_modules/buffer/index.js (index.js:43) at __webpack_require__ (bootstrap:78) at Object../node_modules/aws-sdk/lib/browserHashUtils.js (browserHashUtils.js:1) at __webpack_require__ (bootstrap:78) at Object../node_modules/aws-sdk/lib/browserHmac.js (browserHmac.js:1) at __webpack_require__ (bootstrap:78) at Object../node_modules/aws-sdk/lib/browserCryptoLib.js (browserCryptoLib.js:1) at __webpack_require__ (bootstrap:78) at Object../node_modules/aws-sdk/lib/browser_loader.js (browser_loader.js:4) at __webpack_require__ (bootstrap:78) |
「Uncaught ReferenceError: global is not defined」に対処するには
「global is not defined」を直訳すると、「globalが定義されていない」となります。
つまり、globalをどこかしらに定義してあげればよいわけですね。
globalってなんだよ。
「polyfills.ts」に「global」を定義する
Angularアプリのルートに「polyfills.ts」というファイルがあります。
このファイルの最後に「(window as any).global = window;」を記載します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
/** * 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/guide/browser-support */ /*************************************************************************************************** * 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'; /** * If the application will be indexed by Google Search, the following is required. * Googlebot uses a renderer based on Chrome 41. * https://developers.google.com/search/docs/guides/rendering **/ // import 'core-js/es6/array'; /** 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'; /** * Web Animations `@angular/platform-browser/animations` * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). **/ // 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 */ // "global is not defined"対応 (window as any).global = window; |
これでエラーが消えます。ちゃんちゃん。
「Buffer is not defined」と出たら
ついでですが、「Buffer is not defined」というエラーが出ることもあります。
これも同じく「polyfills.ts」の最後にBufferを定義してあげれば解決します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
/** * 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/guide/browser-support */ /*************************************************************************************************** * 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'; /** * If the application will be indexed by Google Search, the following is required. * Googlebot uses a renderer based on Chrome 41. * https://developers.google.com/search/docs/guides/rendering **/ // import 'core-js/es6/array'; /** 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'; /** * Web Animations `@angular/platform-browser/animations` * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). **/ // 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 */ // "global is not defined"の対応 (window as any).global = window; // "Buffer is not defined"の対応 global.Buffer = global.Buffer || require('buffer').Buffer; |
これで完璧。
おすすめ本
Angularの勉強をするならこの2冊がおすすめです！
まとめ
Angularはバージョンがコロコロ変わるせいで、よからぬエラーが出たりしますね。
殺意しか生まれませんが、落ち着いて考えたらそんなに難しいことでもありません。
今回も2行ほどしか追加してないですからね。
日々勉強です。