Angular 10.2 compilation error: Issue encountered while generating localized bundles - "Unable to access property 'value' as it is undefined"

My Angular project was initially built on version 10.0.11.

After updating the project to version 10.2 using npm update, I encountered several 

Unable to fully load [...] for source-map flattening: Circular source file mapping dependency
errors during the build process.

To resolve this, I executed the following commands:

rm -rf node_modules package-lock.json
npm install

Despite resolving the initial issue, I am still facing difficulties with the build process. Upon completion, I receive the following error:

[...]
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.
Generating localized bundles...
Localized bundle generation failed: Cannot read property 'value' of undefined
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6306074e02131323534d534d53">[email protected]</a> build-prod-da: `ng build --prod --configuration=production-da`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2742430a465757671709170917">[email protected]</a> build-prod-da script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /home/jde/.npm/_logs/2021-02-10T12_06_55_122Z-debug.log

I have been unable to identify the root cause of this issue. According to the "Angular update guide," transitioning from version 10.0 to 10.2 should have been straightforward.

The log file contains the following information:

{...

angular.json

{...

package.json

{...
angulartypescriptangular-clinpm-updateangular-localize

Answer №1

To resolve the issue, all you need to do is modify the target setting in the tsconfig.ts file from es2015 to es5.

This simple change should correct the error.

Answer №2

ng build --single-bundle --configuration production --localize --deploy-url http://localhost:8080/

In the angular.json file

projects>xyz>architect>build>configurations

Prior to modification: "sourceMap": false

✖ Failed to generate localized bundles. Unable to access properties of undefined (reading 'includes')

Upon modification removed sourceMap property / "sourceMap": true

Localized bundle creation in progress...Success

Answer №3

After much consideration, I made the decision to upgrade my system to Angular 11.

Following the upgrade, I took the necessary steps to reinstall all packages for a clean slate. Despite this effort, there were still some packages that needed updating, so I turned to ncu (npm-check-updates) to address the issue...

rm -rf node_modules package-lock.json
npm install
ncu -u
npm install

Upon completion of these steps, the issue was resolved. It seems likely that the problem stemmed from a mismatch in package versions or a compatibility issue with Angular 10.2.4.

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

Angular7: Utilizing ElementRef to Access DOM Elements

Looking to access ElementRef within child nodes. Here is the template: <div #charts *ngFor="let tag of _tags"> <jqxBulletChart style="margin-left: 10px; float: left;" [width]='50' [height]='350' [barSize]=&a ...

javascriptangulartypescriptfrontend

Having trouble with reactjs and typescript? Getting the error message that says "Type 'string' is not assignable to type 'never'"?

When trying to setState with componentDidMount after an axios request is completed, you may encounter the error message Type 'string' is not assignable to type 'never'. Below is the code snippet: import * as React from 'react&apos ...

javascriptreactjstypescript

The useState hook in React Native doesn't seem to function properly on Android when using Expo

I am attempting to have a user join a room in socket.io. The event sent from my react-native client looks like this: export default function App() { const [username, setUsername] = useState('') const [room, setRoom] = useState('') ...

typescriptreact-nativesocket.ioexpouse-state

What is the best way to retrieve the current path in the app's directory using Next.js?

Exploring the new features of the experimental app folder in Next.js 13, I encountered a change where next/router has been replaced with next/navigation. As a result, I adjusted my code to import the useRouter hook. However, I noticed that the property pat ...

javascriptreactjstypescriptnext.js

The window.Print() function is currently experiencing a glitch in Microsoft Edge (Version 91.0.864.59) when trying to use it for the first time within an Angular 12

If you encounter the issue, please follow these steps using the latest version 91.0.864.59 of the Edge browser: https://stackblitz.com/edit/angular-ivy-zbvzap?file=src/app/app.component.html Click on the print button. Close the print dialog. Click on the ...

javascriptangularprintingmicrosoft-edge

Tips to prevent unexpected surprises during npm installation or updates

What is the best approach for safely npm installing/updating when deploying or upgrading? Issue 1 : Running npm install relies on the latest versions of dependencies at the time of execution, leading to unexpected results during deployment as the packa ...

node.jsangularnpmangular-clidevops

Converting JSON into an interface in TypeScript and verifying its validity

How can I convert a JSON string to a nested interface type and validate it? Although my model is more complex, here is an example: export interface User = { name: Field; surname: Field; }; export interface Field = { icon: string; text: string; vis ...

jsontypescriptparsing

"Discovering the root cause of Angular memory leaks and resolving them effectively is crucial for

I am facing an issue with a code that appears to be leaking, and I am seeking advice on how to identify the cause or properly unsubscribe. Even after adding an array containing all object subscriptions, the memory leakage persists. import { Component, On ...

angulartypescripthttpclient

Extracting changes from a ValueChange event in Angular Forms

Currently, I am utilizing Angular's Reactive Forms and I am in the process of incorporating an Undo/Redo functionality. My goal is to combine consecutive modifications on the same field into a single undo action. To achieve this, I believe I will nee ...

angularrxjsangular-reactive-forms

I need RxJs to return individual elements to the subscriber instead of an array when using http.get

I've been developing an Angular 2 app (RC5) with a NodeJS backend RESTful API integration. One specific route on the backend returns an array of 'Candidates': exports.list = function (req, res, next) { const sort = req.query.sort || null ...

javascriptarraysangulartypescriptrxjs

Typescript functional programming: issue arises during transformation of postgres database output into a view model using fp-ts

Currently, I am facing a challenge in extracting data from a postgresql database, converting it into a view model array, and delivering the information back to the client. My goal is to return the data as a single object instead of an array. However, I enc ...

node.jstypescriptfunctional-programmingfp-ts

The error "Prop does not exist on type 'PropsWithChildren'" occurs when attempting to dispatch an action with react-redux

When attempting to dispatch the action, I am encountering this error: The error message reads: Property 'fetch_feed_loc' does not exist on type 'PropsWithChildren<{ onSubmitForm: any; }>'. Another error states: Property &apos ...

reactjstypescriptreduxreact-redux

Updating the Model in Angular 2: A Step-by-Step Guide

When receiving a data model through a service: return this.http.get(queryUrl, opts) .map((response: Response) => { return (<any>response.json()).data.map(el => { return new User({ id: item.id, name : item.name ...

javascriptarraysangular

What causes the error "this condition will always return 'true'" when using an else if clause?

Exploring the concepts outlined in the handbook basics, it is noted that TypeScript is able to identify logic errors. In an attempt to experiment with this, I modified the else if section of the if...else statement as demonstrated in the handbook's ex ...

typescriptlogiccontrol-flow

Why isn't my ApolloGraphQL Mutation triggering an error message when the specified condition has been satisfied?

This is my initial query on this platform. I have successfully implemented login/register mutations, but I am now looking to add error handling functionality. Specifically, I want to display an error message stating "username incorrect" when the user ente ...

typescriptgraphqltypegraphql

Determining a segment of a constant object's type

Suppose I have a function that requires a specific interface interface Foo { foo: number; bar: number; baz?: number; buz?: number; } const doFoo = (params: Foo) => { /* ... */ }; I also possess a constant containing default values for some pro ...

typescript

How do I leverage GraphQL to construct a query that is case-insensitive and can efficiently search for a name in a search bar?

Need Assistance: const query = gql` query FindFeeder($search: String) { feeder_unit( where: { _or: [{ serial: { _ilike: $search } }, { name: { _ilike: $search } }, { household: { name: { _ilike: $search } } }] ...

reactjstypescriptgraphqlsearchbarreact-typescript

Using Google OAuth2Client with Angular 4

I am encountering an issue while trying to verify the ID token for my client using Google's example. You can find the example code here. const {OAuth2Client} = require('google-auth-library'); // <-- facing issues here const client = new ...

angulartypescriptnpmgoogle-authentication

How can we use an Array containing nested Objects in TypeScript?

Wondering about the best way to achieve this: let x = [{}]; in TypeScript. I've searched high and low for a definitive answer to this query. My assumption is that it can be done using the Array object: let x : Array<Object> = new Array<Obj ...

javascriptarraystypescript

When the user clicks on a specific element, ensure that it is the main focus and generate an overlay

One of my challenges is implementing a custom element that captures user input upon clicking, focusing on it and overlaying other elements. I want the overlay to disappear if the user clicks outside the div. I attempted to achieve this using the iron-over ...

javascripttypescriptpolymeroverlaypolymer-2.x