"Production mode is experiencing a shortage of PrimeNG(Angular) modules, while they are readily accessible in development

I've been diligently working on an Angular application that heavily relies on PrimeNG as the UI component framework. Initially, I had no issues deploying my app with Angular version 9 and PrimeNG version 8. However, a while ago, I decided to upgrade to PrimeNG version 10.0.5-rc1 due to enticing new features. Development progressed smoothly until I attempted to build my Angular application in production mode - every PrimeNG component triggered errors. Additionally, when trying to access components from shared modules, Angular couldn't seem to locate them in production mode. Below is a snippet of the type of errors encountered:

    35   templateUrl: './reservation.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ReservationComponent.
src/app/modules/sales/modules/pos/menus/home/reservations/reservation/reservation.component.html:390:65 - error NG8002: Can't bind to 'showCloseIcon' since it isn't a known property of 'p-overlayPanel'.
1. If 'p-overlayPanel' is an Angular component and it has 'showCloseIcon' input, then verify that it is part of this module.
2. If 'p-overlayPanel' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

390 <p-overlayPanel #deletePaymentOverlayModal [dismissable]="true" [showCloseIcon]="true">

  src/app/modules/sales/modules/pos/menus/home/reservations/reservation/reservation.component.ts:35:16
    35   templateUrl: './reservation.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ReservationComponent.
src/app/modules/shared/pos/reservation-components/create-reservation/create-reservation.component.html:3:1 - error NG8001: 'app-create-edit-reservation' is not a known element:
1. If 'app-create-edit-reservation' is an Angular component, then verify that it is part of this module.
2. If 'app-create-edit-reservation' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

3 <app-create-edit-reservation></app-create-edit-reservation>

To address these issues, I have upgraded PrimeNG to its latest version, which is now at 11.0.0-rc1. Furthermore, both my Angular and Angular CLI versions have also been updated.

I'm seeking guidance on how to resolve these challenges. Any assistance would be greatly appreciated.

angulartypescriptprimeng

Answer №1

My success in enabling Angular to operate in production mode came from making adjustments to the variables within the angular.json configuration file.

The original state of the angular.json file looked like this:

"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,

After some tweaking, the contents of the angular.json were transformed as follows:

"namedChunks": false,
"aot": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": false,

It seems that there are additional adjustments required in the application, such as eliminating outdated libraries and components.

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

What exactly is an npm "modular construction" and what is the process for setting it up?

I am aiming to integrate sortablejs's MultiDrag feature with Vuejs2 and Typescript. The official documentation states: MultiDrag is a plugin for SortableJS, but it may not be included in all of Sortable's builds. It comes pre-installed in the ...

typescriptnpmvuejs2sortablejs

Incorporate an external JS file (File A) that is dependent on another JS file (File B) into a TypeScript file within the context of Angular 4

Working on an Angular 4 project, I recently installed two external JS libraries using npm. They are now in the node_modules folder and usable in another TS file within my project. The issue arises because import B requires import A, preventing me from effe ...

angulartypescriptnpm

Type error TS2322: You can't assign type 'undefined' to type 'string'

I am currently in the process of creating a chatbot for an upcoming exhibition and encountered the following error: src/app/chat/chat.component.ts:32:9 - error TS2322: Type 'undefined' is not assignable to type 'string'. 32 th ...

angulartypescript

Encountering a problem when attempting to utilize AngularFire's Cloud Messaging Angular module due to missing configuration values for the app

Working with Firebase Cloud Messaging in my Angular application using AngularFire2 has presented a challenge. I am facing an error when attempting to retrieve the user's current token. I have already set up the "firebase-messaging-sw.js" and "manifes ...

javascriptangularfirebase-cloud-messagingangularfire

Utilizing TypeScript to perform typing operations on subsets of unions

A TypeScript library is being developed by me for algebraic data types (or other names they may go by), and I am facing challenges with the more complex typing aspects. The functionality of the algebraic data types is as follows: // Creating ADT instatiat ...

typescripttypescript-genericsalgebraic-data-typestypescript4.0

Enforcing TypeScript restrictions on method chaining during object creation

Let's consider this unique sample class: class Unique { public one(): Pick<this, "two" | "three"> { return this; } public two(): Pick<this, "three"> { return this; } public three(): string { ...

typescript

Show a table row based on a specific condition in Angular

I'm having this issue with the tr tag in my code snippet below: <tr *ngFor="let data of list| paginate:{itemsPerPage: 10, currentPage:p} ; let i=index " *ngIf="data.status=='1'" > <td> </td> <td> ...

angulartypescript

Limit the types of components allowed as children in a React component by utilizing TypeScript

I've been struggling with this question for a while, searching through answers but still unable to get my code to work. Here's the issue at hand. Within my code, I have a component called Steps which acts as a wrapper. I also have multiple Step ...

reactjstypescriptnpmchildren

Create Functions to Encapsulate Type Guards

Is it possible to contain a type guard within a function as shown below? function assertArray(value: any): void { if (!Array.isArray(value)) { throw "Not an array" } } // This doesn't work function example1(value: string | []) { a ...

typescript

What is causing the consistent occurrences of receiving false in Angular?

findUser(id:number):boolean{ var bool :boolean =false this.companyService.query().subscribe((result)=>{ for (let i = 0; i < result.json.length; i++) { try { if( id == result.json[i].user.id) ...

javascriptangulartypescript

Combining multiple 'Eithers' and 'Promises' in fp-ts: A guide to piping and chaining operations

Recently, I began working with fp-ts and wanted to create a method with functional-like behavior that would: Parse a bearer token Verify the validity of the user using the parsed token import { Request } from 'express'; import { either } from & ...

javascriptangulartypescriptfunctional-programmingfp-ts

Checking canActivate functionality in angular 2 using karma and jasmine: a guide

Looking to test the canActivate function in Angular 2 with TypeScript, Karma, and Jasmine. The code for the function is as follows: public canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> { return t ...

unit-testingangulartestingkarma-jasmine

Passing events from a parent component to dynamically created child components in Angular

UPDATE: I've decided to tackle this issue in a different way by retrieving dynamic child component values in the parent component's save() function, following the accepted answer. I am attempting to create a system where a parent component emits ...

angulartypescripteventemitter

Guide to navigating to a specific route based on location in a Node.js Express application

Currently, I am integrating the official i18n library to localize my Angular Universal application and utilizing a proxy to deliver the localized versions. The app is functioning properly when there is a language specified in the URL (e.g: /en/page), but e ...

node.jsangularexpresslocalizationinternationalization

How to use D3 to add arrow directions to an SVG path

Within my svg path lies the representation of a shuttle track used in manufacturing processes. Every shuttle on this track moves in a distinct direction, and I wanted the svg path to visually indicate these directions for easy reference. Initially, I tried ...

angularsvgd3.js

Utilizing REST-API with Angular 2 and Electron

I am encountering an issue with my Electron App that utilizes Angular 2. I had to make a modification from <base href="/"> to <base href="./">, which is a relative path within the file system, in order to make it function properly. However, thi ...

angularjsnode.jsangularelectron

Creating an HTTP method handler function in Next.js API routes with an unspecified number of generic parameters

Looking to create a wrapper function in NextJS for API routes that can handle multiple HTTP methods with different handlers. For example, check out the TS playground interface GetResponse { hello: string, } // empty object type PostResponse = Record&l ...

typescriptnext.js

Error: The 'update' property cannot be found on the specified type

Starting a new AngularCli project and need to incorporate a Gauge chart. I've used the code from StackBlitz Angular Gauge Chart Example When I run ng serve --open, I encounter the following errors in the terminal: ERROR in src/app/gauge/gauge.comp ...

angular

Assign a distinct color to a row depending on the row's characteristic

One of my tasks involves implementing row highlights with specific colors based on their attributes. For instance, when displaying employee records, I need to show all employees whose highest education column is not null in green. The current code snippet ...

angular

Having trouble with Typescript module path resolution for .js files?

I have embarked on a project in React and I am eager to begin transitioning the js files to typescript. The setup for aliases seems to function smoothly when importing .tsx within another .tsx file, however, it encounters issues when attempting to import . ...

reactjstypescriptwebpackalias