Encountering the error message "String length is invalid" during the execution of ng build for a library

While working with Angular and attempting to build a large library using the command ng build <project>, we encountered the following issue:

❌  Generating "fesm2015"

Invalid string length

The build for fesm2020 was successful, but the sourcemap size for fesm2015 exceeded expectations, reaching 33MB compared to fesm2020's 32MB (.mjs.map file).

This large size is attributed to approximately 200 components being distributed within a single library.

To Reproduce:

  • Create over 200 components and include them in a single library module
  • Run ng build <project>

Error Message:

Invalid string length occurs after Generating fesm2015

Environment Details:

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 14.2.6
Node: 18.15.0 (Unsupported)
Package Manager: npm 9.5.0
OS: win32 x64

Angular: 14.2.6
... animations, cli, common, compiler, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.6
@angular-devkit/build-angular   14.2.6
@angular-devkit/core            14.2.6
@angular-devkit/schematics      14.2.6
@angular/compiler-cli           14.3.0
@schematics/angular             14.2.6
ng-packagr                      14.0.1
rxjs                            6.5.4
typescript                      4.7.3

We are seeking suggestions on how to address this issue and gain more visibility into the error without verbose output. We prefer not to divide the code into separate libraries, even if it appears to be related to source code size or length.

Answer №1

After careful consideration, it was determined that advancing to Angular 16+ and dividing extensive code into separate library entry points would resolve the issue at hand.

Fortunately, this obstacle should be eliminated with the adoption of version 16+.

Answer №2

Solution:

To resolve the issue, navigate to angular.json and ensure that cli.cache.enabled is set to false

cli: {
   cache: {
     enabled: false
   }
}

Explanation:

The error occurring is due to the use of the JSON.stringify method when exceeding the acceptable string length.

Starting from angular version v13, caching is automatically enabled. However, this leads to errors in ng-packagr which utilizes rollup.js for cache json stringification.

Fortunately, with the release of v16, this problem was resolved as ng-packagr switched to using esbuild instead of rollup.js. For versions v13-v15, disabling the ng cache is the workaround solution.

Cheers!

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

'view' is not recognized as a valid property of the 'div' element in Ionic3, so it cannot be bound

I am a beginner with Ionic and I'm trying to incorporate Angular Calendar into my Ionic3 application. However, I am encountering an error that says, "Can't bind to 'view' since it isn't a known property of 'div'. Here&ap ...

Struggling to install node.js on OS X, I am unable to locate any assistance

Apologies if this is more detailed than necessary, but I am not very familiar with stackoverflow so I thought providing more information would be beneficial. I recently developed an interest in exploring Amber and decided to follow the online instructions ...

Establishing the context for the input template by utilizing ng-template, ng-container, and ngTemplateOutlet

I am facing a challenge with a customizable component that utilizes an ng-container to display either a default template or a template passed in as an input. The issue arises when I try to set the context of the passed-in template to the nesting component ...

Encountering a permission issue while trying to execute npm install -g @angular/cli command

I recently started using Angular and am working on a new project. However, when I try to execute the following command: npm install -g @angular/cli I encounter the error message below: npm WARN checkPermissions Missing write access to /usr/local/lib/no ...

Tips on executing an asynchronous operation before exiting

I have been attempting to execute an asynchronous operation before my process ends. By 'ends', I mean in every instance of termination: ctrl+c Uncaught exception Crashes End of code Anything.. As far as I know, the exit event handles this for ...

Package unzipping issue during npm build process on Jenkins Windows slave

I recently added a Windows slave for npm builds. In my package.json file, there is a step where it runs "unzip pack.zip". When I manually run npm build on the Windows machine, everything works perfectly. However, when the same build process is triggered t ...

Encountering issues when trying to build a Nestjs app with node-crc (rust cargo) in Docker

I am encountering an issue with building my Nest.js app using Docker due to a dependency called "node-crc" version "2.0.13" that fails during the docker build process. Here is my Dockerfile: FROM node:17.3.1-alpine RUN curl https://sh.rustup.rs -sSf | sh ...

Issues with tsconfig Path Aliases in Angular 8+ when used in .spec files

While working on Angular testing, I encountered an issue where my spec files were not recognizing paths and displaying a red squiggle import warning in VS Code (and appearing under Problems), even though they functioned properly otherwise (testing worked, ...

Importing dynamic NodeJS modules from one module

ModuleA src index.js modules utility.js ModuleB src framework activities activity.js ModuleA serves as the main "runnable" module in this setup, while ModuleB acts as a framework li ...

Tips for controlling the upload of a .exe.png file or converting a .exe file to a png file for uploading in angular 8

I had originally set up restrictions to only allow image file types such as JPG, JPEG, PNG, and TIFF. However, I discovered that users were able to upload .exe files simply by renaming them. For example, changing dell.exe.png or dell.exe to dell.png allo ...

Setting up Node.js using homebrew on MacOS. Encounter an error message stating that Npm is

My initial node and npm setup was functioning well on OSX until I encountered an issue while updating npm. In an attempt to troubleshoot, I used homebrew to tinker with linking, uninstalling, and reinstalling node. However, this caused conflicts between my ...

I seem to be failing at properly executing Promises... What crucial element am I overlooking in this process?

Within my project, there exists a file named token.ts which contains a function that exports functionality: import * as jwt from 'jsonwebtoken'; import { db, dbUserLevel } from '../util/db'; export function genToken(username, passwor ...

The error message "React Native - __DEV__ is not defined" has been

I am working on a project that involves [email protected]. I recently deleted the node_modules folder and then executed the following commands: npm i react-native upgrade However, I encountered the following error: react-native.js:15 ReferenceErr ...

Ways to properly exit a function

What is the best way to pass the apiKey from the createUser function in User.ts to Test.ts in my specific scenario? User.ts interface User { url: string, name: string, } class User{ async createUser( user: User ):Promise<void> { le ...

Is it possible to automatically run scripts following the installation or update of a dependency?

In Composer, the PHP package manager, you have the ability to define scripts that run before or after specific CLI commands, such as composer update some-package. You can learn more about this feature at . On the other hand, NPM only allows you to define ...

How can I access the ng-template in a component?

How can I reference <ng-template #modal_Template> in my component.ts file? Previously, I triggered a modal using a button on my HTML file and included this code: <button type="button" class="btn btn-primary" (click)="openModal(modal_Template)"> ...

The bundling process encountered an error due to the absence of a file or directory while scanning in React Native

I'm facing an issue with my project where there are no errors present, but the build is not loading successfully. You can see the image below for more details on this error. I've been using the command react-native run-android to run the build, b ...

Having trouble adding Bootstrap to Angular with Webpack? You might come across the error message: "File to import not found or unreadable: ../bootstrap/sc

I have decided to incorporate Bootstrap into my project. My attempt at installation involved using "bootstrap": "^4.0.0-alpha.5" I followed a tutorial found at https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-use-Bootstrap-4-and-Sass- ...

Setting the base href in Angular using an environment variable for a Tomcat or other application server - a step-by-step guide

Is it possible to set the base href using an environment variable in a Tomcat or application server? For instance: index.html <base href="/${environment.tomcat}/"> Or is there a way to utilize an environment variable for the operating system? ...

reactjs: disable a specific eslint rule

I'm trying to figure out how to disable the "no-unused-vars" rule specifically for TypeScript interfaces. Here's a code snippet where I'm getting a warning: export type IKeoTableColumn<T> = { id: T; align: 'left' | ' ...