Angular8:”global is not defined”の回避策

概要

  • Angular8で以下のエラーにハマった際の解消法を解説します

    1
    ”global is not defined”
  • 上記のエラーについて

    • Angularでグローバルオブジェクトを参照する外部ライブラリを利用している環境で発生する事象
    • 今回はAngularとAWS間のAPI連携機能を実装した際に発生
  • 環境の詳細

    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
    Angular CLI: 8.3.24
    Node: 10.16.3
    OS: win32 x64
    Angular: 8.2.14
    ... animations, common, compiler, compiler-cli, core, forms
    ... language-service, platform-browser, platform-browser-dynamic
    ... router

    Package Version
    -----------------------------------------------------------
    @angular-devkit/architect 0.803.24
    @angular-devkit/build-angular 0.803.24
    @angular-devkit/build-optimizer 0.803.24
    @angular-devkit/build-webpack 0.803.24
    @angular-devkit/core 8.3.24
    @angular-devkit/schematics 8.3.24
    @angular/cdk 8.2.3
    @angular/cli 8.3.24
    @angular/material 8.2.3
    @ngtools/webpack 8.3.24
    @schematics/angular 8.3.24
    @schematics/update 0.803.24
    rxjs 6.4.0
    typescript 3.5.3
    webpack 4.39.2

解決策

  • pollyfills.tsに設定が必要
    • 所在
      • “pj-name”\srcの配下
    • 以下を追記すると解決します
      // "global is not defined"の対応
      (window as any).global = window;

解説

  • polyfillとは
    • JavaScriptのversion間の互換性を補うもの
    • 利用したい機能に未対応のブラウザでも使えるように、同等の機能をJavaScriptで供給できる
  • pollyfills.ts
    • Angularにおけるpolyfillの設定ファイル
    • 例えば、Angularで開発したAPをIEでも動かしたい時には設定が必要
      • Angularは”デフォルトではIEに未対応”です
@EventEmitter @Input @Output @ViewChild ACM AMP API Gateway AR AR.js AR.js Studio AWS AWS Amplify AWS Budgets AWS Cost Explorer AWS SDK for JavaScript AddThis Adobe XD Alexa Amazon CloudWatch Amazon Honycode Amazon SNS Android Angular Angular Material AngularFire AppSync Augury C CDN CI/CD Cloud Craft Cloud9 CloudFormation CloudFront CloudTrail Cognito Cost Anomaly Detection Cubase ai Cubasis LE DTM Disqus DynamoDB Elgato HD 60S Firebase Firebase Hosting Former2 Github Github Actions Github.com GithubEnterprise GithubPages Google Chrome Google Cloud Shell GraphQL Hexo Hosting IAM Ionic JSON JavaScript LadioCast Logging LowCode MFA MS Authentication MacBook Pro 16 Mind Node NETDUETTO Netflix Party Netlify Network NoCode Observable PO PdM Promise RPA ReactiveForm Recognition Route53 S3 SAM(Serverless Application Model) SAR SSL SYNCROOM Schematics ScrumInc Serverless Service Siri Sitemap Spark AR Steinberg UR44C Teams Touch Cast Studio Treetable TypeScript UI UI Bakery WAF WAFv2 WEB Page Dev WEB会議 WebAR WebSocketAPI Webhook Windows Power Automate Wireshark aot async/await aws config cloud9 display.land draw.io e2e test filter() forkJoin() google search console hexo-generator-amp iOS iPad Pro iPhone icarus map() mat input mat tree mat-checkbox mat-input mat-selection-list mmhmm ngFor plantUML popIn Aladdin2 then() vscode ”global is not defined” らくがきAR アジャイル アジャイル開発 クロスプラットフォーム ショートカット スクラム スクラム開発 テレワーク ファイル操作 ブラウザ型IDE プロダクトオーナー プロダクトマネージャー プロトタイピング リモートセッション 共同開発 双方向データバインディング 待ち合わせ処理 認定スクラムマスター 静的WEB Hosting 静的WEBサイトHosting
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×