"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

The variable X has been defined, but it's never actually utilized. Despite declaring it, I have not accessed its

I have encountered warnings in VSCode while using certain properties in my Angular component. The warnings state: '_id' is declared but its value is never read.ts(6133) (property) ItemEditComponent._id: number | undefined '_isModeEdit' ...

javascriptangulartypescripteslinttypescript-eslint

Unable to store the outcomes from [ngbTypeahead] in [resultTemplate]

I'm trying to integrate ngbTypeahead into my HTML using the code snippet below <ng-template #rt let-r="result" let-t="term"> <ngb-highlight [result]="r.FirstName" [term]="t"></ngb-highlight> </ng-template> <input name ...

htmlangulartypescriptrxjsng-bootstrap

Setting up pagination in Angular Material can sometimes present challenges

After implementing pagination and following the guidelines provided here. This is my code from the app.component.ts file - import { Component, OnInit, ViewChild } from '@angular/core'; import {MatPaginator} from '@angular/material/paginat ...

angulartypescriptangular-material

Is there a way to modify the default lite-server port in the Angular quickstart setup?

I recently obtained the Angular 4 quickstart app and decided to modify the default lite-server port by including "port": 8000 in bs-config.json like this: { "server": { "port": 8000, "baseDir": "src", "routes": { "/node_modules": "node ...

node.jsangularlite-server

Classify the array types based on their indexes within the map

Is there a way to efficiently access elements in TypeScript using a map with the correct type? When attempting this, an error is thrown due to the type from the map being number | string type Tuple = [number, number, string]; const y: Tuple = [1, 2, &apos ...

typescript

Is there a method to instruct angular-cli (for angular 2) to produce a minified version of css files?

When running "ng serve" in angular-cli, the generated css is not minified as expected. Is there a specific setting to configure in angular-cli-build or an additional plugin to install? This is the content of my angular-cli-build.js file: var Angular2App ...

cssangularangular-cli

Creating a singular and distinctive string by combining two keywords

Is it possible to create a single distinct string by combining two keywords regardless of the order in which they are entered? EDIT: The keywords in question are numerical rather than alphabetical characters. The following example is merely for explanator ...

javascriptangular

The issue I'm facing with the change handler for the semantic-ui-react checkbox in a React+Typescript project

Hey there! I'm currently facing an issue with two semantic-ui-react checkboxes. Whenever I try to attach change handlers to them, I end up getting a value of 'undefined' when I console log it. My goal is to retrieve the values of both check ...

javascriptreactjstypescripteventssemantic-ui-react

Executing multiple HTTP requests in Angular using the HttpClient

Recently, I came across a concerning issue in my Angular 5 App. It all started with this simple call in my service: interface U{ name:string; } ... constructor(private http : *Http*, private httpC:HttpClient) // Http is deprecated - its a compare test ...

typescriptobservableangular5

Count the number of checked checkboxes by looping through ngFor in Angular

My ngFor loop generates a series of checkboxes based on the X number of items in childrenList: <div *ngFor="let child of childrenList; let indice=index"> <p-checkbox label="{{child.firstname}} {{child.lastname}}" binary=&qu ...

angulartypescript

Using Typescript: Defining a property's type based on the value of another property in the same object

I'm dealing with a TypeScript interface that consists of two properties (type:string and args:object). The contents of the args property may vary based on the value of the type. I'm looking for the correct type definition to specify for the args ...

typescriptconditional-types

Is it possible to use TypeScript in a React Native project with a JavaScript file?

Currently, I am learning React Native by working on app clones like Instagram and YouTube. I have recently started an AirBnb clone project, but I'm facing some issues with the initial build. One issue I noticed is that in 'App.js', the temp ...

javascripttypescript

Unable to modify an attribute due to TypeScript error: Type 'string' cannot be assigned to type 'never'

I am trying to modify an attribute of an object in TypeScript and React, but I keep encountering the following error message: Type 'string' is not assignable to type 'never'. This happens even though I have a check in place to verify th ...

javascriptnode.jsreactjstypescripttypes

The absence of a `require` definition in Typescript combined with daisyui

Considering using typescript with react and daisyUI (a tailwindCSS component). Just a heads up, I'm currently utilizing vite In my ts.config file, I've specified node as moduleResolution Encountering an error in the tailwind config stating &apo ...

reactjstypescripttailwind-cssdaisyui

Display highlighted option in material dropdown

Is there a way to display the selected value on the label in this code? Thanks for any help! ...

angularangular-material

Utilize Redux in conjunction with TypeScript to seamlessly incorporate a logout feature

My login page redirects to a private /panel page upon successful login with an accessToken. I am utilizing the Redux store to verify the token in the privateRoute component. Challenges I'm encountering: I aim to enable logout functionality from t ...

javascriptreactjstypescriptreduxreact-redux

Using Typescript to remove an element from an array inside another array

I've encountered an issue while trying to remove a specific item from a nested array of items within another array. Below is the code snippet: removeFromOldFeatureGroup() { for( let i= this.featureGroups.length-1; i>=0; i--) { if( this.featureGr ...

javascriptarraystypescriptmultidimensional-array

Encountering an issue that states that jQuery must be included before Bootstrap's JavaScript is causing an

I encountered the following exception: bootstrap.js:240 Uncaught TypeError: Bootstrap's JavaScript requires jQuery. Make sure to include jQuery before Bootstrap's JavaScript at Object.jQueryDetection (bootstrap.js:240) at bootstrap.js:255 a ...

jqueryangulartwitter-bootstrap

What could be causing the angular Data table to not display properly?

I am currently exploring Angular Datatables and have a question about re-rendering the datatable after it has been hidden. Can anyone provide guidance on how to achieve this? In my project, I have two components - Parent and Child - that can be hidden or ...

jqueryangulardatatablesangular-datatables

Issue in VueJs where mutations do not properly save new objects to the state

I am facing an issue with updating my vuex store after modifying my user credentials in a component. Below is the code snippet for reference: mutations: { updateUserState: function(state, user) { state.user = user; }, } actions: { updat ...

javascripttypescriptvue.jsvuex