Difficulty in utilizing gettext for parsing the .po translation file

When attempting to utilize ngx-translate with the .po loader, a warning is triggered during compile time:

WARNING in ./node_modules/encoding/lib/iconv-loader.js 9:12-34
Critical dependency: the request of a dependency is an expression

The warning specifically points to this line of code:

const po = gettext.po.parse(contents, 'utf-8');

Upon runtime, an error is encountered causing the application to fail:

index.js:43 Uncaught ReferenceError: global is not defined
    at Object../node_modules/buffer/index.js (index.js:43)
    at __webpack_require__ (bootstrap:79)
    at Object../node_modules/iconv-lite/lib/index.js (index.js:5)
    at __webpack_require__ (bootstrap:79)
    at Object../node_modules/encoding/lib/encoding.js (encoding.js:3)
    at __webpack_require__ (bootstrap:79)
    at Object../node_modules/gettext-parser/lib/poparser.js (poparser.js:1)
    at __webpack_require__ (bootstrap:79)
    at Object../node_modules/gettext-parser/index.js (index.js:1)
    at __webpack_require__ (bootstrap:79)

Despite searching online and on stack overflow, a solution to this issue remains elusive.

Are there any alternatives to gettext for parsing .po files, or is there a way to resolve this and make it work?

angulartypescriptgettext

Answer №1

Follow these steps to quickly resolve the issue by adding the following code snippet in index.html:

 <script>
    var global = global || window;
    var Buffer = Buffer || [];
    var process = process || {
       env: { DEBUG: undefined },
       version: []
    };
  </script>

A BETTER SOLUTION

Step 1: Add the script to package.json

"postinstall": "node patch-iconv.js && node patch-ng-devkit.js"

Step 2: Create a file in the same directory as package.json and name it "patch-iconv.js" with the provided content:

// IIFE
(function() {

  'use strict';

  // node
  var fs = require('fs');
  var path = require('path');

  // Patch encoding module due to iconv issues -> make it use iconv-lite
  (function() {
    // Code snippet for patching encoding module
  })();


  })(this);

Step 3: Create another file in the same directory as package.json named "patch-ng-devkit.js" with the provided content:

const fs = require('fs');
const f = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js';

// Code snippet for modifying webpack configuration

Step 4: Run the command

npm run postinstall

Finish the process, rebuild, and your issue should be resolved

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible for an Angular App to function as an authenticated user for a real-time database?

Just a question, no code included. I want to restrict access to reading from RTDB only to authenticated users. However, I don't want every user to have to sign up individually. Instead, I would like to have one login tied to the angular app that auto ...

angularfirebasefirebase-realtime-databasefirebase-authentication

What is the method for gathering an array of emitted values from Observable.from?

So I'm working with Rxjs and have a bunch of code: return Observable.from(input_array) .concatMap((item)=>{ //This section emits an Observable.of<string> for each item in the input array }) .sc ...

angularasynchronousrxjsreactive-programmingobservable

Steps for building a custom component using MUI as a foundation

My current approach: import React from "react"; import {useHistory} from "react-router-dom"; import {Button, ButtonProps} from "@mui/material"; type Props = { label?: string } & ButtonProps; export const NavBackButton = ...

reactjstypescriptmaterial-ui

Typescript causing issues with Material-UI theme.mixins.toolbar functionality

Currently, I am utilizing Material-UI to develop a React and Typescript website. The experience has been positive overall, but I am facing a specific issue. I have been trying to implement one of the code examples from their documentation, but unfortunatel ...

reactjstypescriptmaterial-ui

Exploring Angular's Parsing Function ($parse)

Currently, I am working on an AngularJS component that takes a string template as input and compiles it using the following code snippet. Later, I use this compiled template to render different items: this.$parse(template); While trying to achieve someth ...

angularjsangular

Struggling to grasp the syntax of RxJS filter

Trying to wrap my head around a filter expression in an Ionic/Angular project. Here's the code snippet: private userId$ = this.authService.currentUserAuth$.pipe( filter(user => !!user), map((user) => user.uid) ); The authservice is of ...

angularionic-frameworkrxjs

Stop the inclusion of the scrollbar in the mat-drawer-inner-container within the Angular mat-drawer Component

Background Story: Working on designing a screen layout that includes the use of a mat-drawer to display a custom component. The challenge arises when the custom component gets nested inside a div (with class="mat-drawer-inner-container") automatically adde ...

cssangularangular-materialmat-drawer

Ways to capture targeted requests

Utilizing NestJS and Angular 2, I have noticed that both frameworks have a similar approach when it comes to working with Interceptors. I am currently looking for the best practice to identify specific requests in order to perform additional tasks. When d ...

javascriptangulartypescriptnestjs

Encountering an issue while trying to execute the command "ionic cordova build android --prod --release

Currently, I am facing an issue while trying to build my apk for deployment on the Play Store. The error message is causing a time constraint and I urgently need to resolve it. Any help or suggestions regarding this matter would be greatly appreciated. ...

androidcordovatypescriptionic-frameworkproduction

What is the reason for encountering the error message "Property 'floatThead' does not exist on type 'JQuery<any>' when trying to use floatThead in Angular/TypeScript?

For my project, I am incorporating the third-party jQuery library called https://github.com/mkoryak/floatThead. To work with Bootstrap and jQuery, I have installed them using NPM through the command line. Additionally, I have used NPM to install floatThea ...

jqueryangulartypescriptdomnpm

Exploring JSON object nesting

I need to extract specific objects (fname, lname, etc.) from the data received in node.js from an Angular front-end. { body: { some: { fname: 'Fuser', lname: 'Luser', userName: 'userDEMO', pas ...

angularjsjsonangular

Searching through all values can be done by following these steps

Need help with implementing a search feature that can search all values in Angular2. Here's the current code snippet: import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'filter' }) export class FilterPipe implem ...

angulartypescript

Each time the Angular children component is reloaded, the user is redirected to localhost:4200

In my Angular project, I encounter an issue with route parameters in children components. While navigating to these child components from the parent is seamless, reloading the child component causes the application to redirect to localhost:4200 and display ...

javascriptangularangular-ui-router

Typedoc does not create documentation for modules that are imported

Whenever I generate documentation with TypeDoc, I am encountering an issue where imported files come up empty. If I add a class to the file specified in entryPoints, I get documentation for that specific class. However, the imported files show no document ...

node.jstypescriptimportdocumentationtypedoc

Challenges when implementing tooltip in bootstrap using Angular and TypeScript

Looking to enhance my website with a tooltip using Bootstrap in Angular. Reference link: https://getbootstrap.com/docs/4.0/components/tooltips/ The issue at hand: Current tooltip appearance: https://i.sstatic.net/MJlCg.png Desired tooltip outcome: ht ...

htmlangularbootstrap-4tooltipangular-ui-bootstrap

Learn the art of generating multiple dynamic functions with return values and executing them concurrently

I am currently working on a project where I need to dynamically create multiple functions and run them in parallel. My starting point is an array that contains several strings, each of which will be used as input for the functions. The number of functions ...

javascripttypescript

Having trouble solving the problem. Implementing a 3D glTF model using threejs and Angular

I've been struggling for quite some time now to grasp the concept of three.js and how to incorporate 3D models into it using Angular. Despite looking through the documentation and searching everywhere, I just can't seem to pinpoint where I' ...

angularthree.jsgltf

Issue with calling function from props in React is not being resolved

There seems to be an issue with the function not being called when passed into a functional component. While the onSubmit function is triggered, the login(email, password) function inside the Login component is never executed. Despite placing console.log s ...

javascriptreactjstypescript

Tips for typing a destructured object key in TypeScript

Assuming I have a query parameter from the router in my Next.js app const { query: { id }, } = useRouter(); The value of { id } is currently string | string[] | undefined. I want to send it as a parameter to another function, and I am certain that ...

typescriptnext.js

When the file is active on a local machine, the bot commands run smoothly. However, these commands do not execute on a remote

Lately, while working on coding a discord bot using discord.js, I came across an issue. Whenever I run my bot on my local machine, all the commands work perfectly fine. However, after committing and pushing the code to GitHub, and then allowing buddy.works ...

javascripttypescriptdiscord.js