Issues arise with Shared Module imports not functioning properly within Shared components following an upgrade to Angular 9

I recently updated my project to the following versions:

Node from 11 -> 12 Angular from 8 -> 9

After the upgrade, I started encountering compile time errors in my application. The application consists of numerous shared components that are declared within the declarations array and export array of SharedModule.

We utilize primeng, aggrid, and have imported and exported all necessary modules in a shared module. This Shared module is then imported into the App module.

The code for my Shared Module is as follows:

 // Code snippet for Shared Module 
// Contains imports for various modules and custom components
// More code here...
// End of Shared Module code

Additionally, here is a snippet from my App Module file:

// Code snippet for App Module
// Imports necessary modules and services
// More code here...
// End of App Module code

Lastly, I also have a Production Rate Module which includes...

// Code snippet for Production Rate Module
// Includes imports, declarations and providers for Production Rate component
// More code here...
// End of Production Rate Module code

Upon running npm start, I am receiving the following error message: https://i.sstatic.net/Soky7.png

Answer №1

Have you imported Components as a custom module?

If the components listed below are part of your custom module, then they must be imported in both the declaration array and export array so that you can use these components in other modules.

Make sure to import your shared module wherever you are using these components.

// Custom modules.
import { AppToolbarComponent } from './app-toolbar/app-toolbar.component';
import { AuditDetailsComponent } from './audit-details/audit-details.component';
import { PgridComponent } from './grid/p-grid.component';
import { DropdownComponent } from './dropdown/dropdown.component';
import { DatePickerComponent } from './app-datepicker/app-datepicker.component';
import { SearchWellComponent } from './search-well/search-well.component';
import { ShowDialogComponent } from "./show-dialog/show-dialog.component";
import { CancelComponent } from './app-cancel/app-cancel.component';
import { iFrameComponent } from "./iframe/iframe.component";

Your shared module should look something like this, and remember to import this shared module wherever you are using its components.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { AppToolbarComponent } from './app-toolbar/app-toolbar.component';
import { AuditDetailsComponent } from './audit-details/audit-details.component';
import { PgridComponent } from './grid/p-grid.component';
import { DropdownComponent } from './dropdown/dropdown.component';
import { DatePickerComponent } from './app-datepicker/app-datepicker.component';
import { SearchWellComponent } from './search-well/search-well.component';
import { ShowDialogComponent } from "./show-dialog/show-dialog.component";
import { CancelComponent } from './app-cancel/app-cancel.component';
import { iFrameComponent } from "./iframe/iframe.component";

@NgModule({
    declarations: [
        AppToolbarComponent,
        AuditDetailsComponent,
        PgridComponent,
        DropdownComponent,
        DatePickerComponent,
        SearchWellComponent,
        ShowDialogComponent,
        CancelComponent,
        iFrameComponent
    ],
    imports: [
        FormsModule,
        ReactiveFormsModule,
        CommonModule,

    ], schemas: [CUSTOM_ELEMENTS_SCHEMA],

    exports: [CommonModule,
         AppToolbarComponent,
        AuditDetailsComponent,
        PgridComponent,
        DropdownComponent,
        DatePickerComponent,
        SearchWellComponent,
        ShowDialogComponent,
        CancelComponent,
        iFrameComponent
    ]
})
export class SharedModule { }

Answer №2

I have finally discovered the resolution to this issue. It turns out that it was not a problem with the Shared module, but rather an IVY-related problem.

After realizing that primeng was not compatible with IVY, I made the decision to upgrade from version 6 to version 9 (which is compatible with Angular 9 IVY).

A general solution to this type of issue is to ensure that any third-party libraries being used, such as primeng or bootstrap, are updated to newer versions that are compatible with Angular 9.

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

Why is there always a reference to the previous data every time I create a new component?

I am currently working on a component that retrieves data from a service through an event message: this.objectDetailsSubscription = this.eventService.subscribe( EventsChannels.OBJECT_DETAILS, semantic => { this.layer = this.layerSem ...

The alignment of the toolbar in angular material is fixed and cannot

I have been attempting to center an icon within a material toolbar, but it seems to be offset slightly to the right due to a second image on the left side. Here is my code: <mat-toolbar color="primary"> <mat-toolbar-row> <span> < ...

"Enhancing the appearance of mat-sidenav elements in Angular Material 7 with customized

Our previous dom-structure before upgrading to Angular 7 and Material 7 looked like this: <mat-sidenav-container> <mat-sidenav #sidenav mode="side" [opened]="sideNavOpen"> <ul> <li> <a mat-icon-button color ...

Angular: Streamlining the Constructor Function for Efficiency

Consider the scenario where we have these two components: export class HeroComponent { constructor( public service1: Service1, public service2: Service2, ) { // perform some action } } export class AdvancedHeroComponent extends HeroCompone ...

Getting started with TypeScript in combination with Node.js, Express, and MongoDB

I'm a beginner in working with TypeScript, Node.js, Express, and MongoDB. I need guidance on the end-to-end flow for these technologies. Can someone please suggest steps or provide links for a step-by-step process? What is the procedure to compile/r ...

What are the steps for utilizing CzmlDataSource within React Resium?

Currently, I'm attempting to showcase the data from a local czml file on a map using React, Typescript, and Resium. Unfortunately, an error keeps popping up stating "This object was destroyed, i.e., destroy() was called." Can someone point out where m ...

Angular patch value not functioning properly after initial use

Whenever I click on the edit icon, I want the form field to populate. It works correctly the first time, but subsequent clicks on different icons do not update it. However, if I hit the cancel button and then click on any edit button again, it works fine. ...

Here is a way to return a 400 response in `express.js` when the JSON request body is invalid

How can I make my application send a response with status code 400 instead of throwing an error if the request body contains invalid JSON? import express from 'express' app.use(express.urlencoded({ extended: false })) app.use(express.json()) ...

Failure of React to connect event handlers

LATEST UPDATE: After removing the output entry from my webpack configuration, the React event listeners are now functioning correctly. Currently, I am diving into the world of hand-rolling webpack configurations for a React/TypeScript application for the ...

Typescript - Error in Parsing: Expecting an expression

I am currently working with Vue and TypeScript and have encountered a problem. How can I resolve it? Here is the code snippet in question: private setTitle(systemConfig: any) { const systemConfigParse; let obj; systemConfigParse = JSON.parse(sy ...

It is possible that the object may be null, as indicated by TS2531 error

I was interested in using QrReader to scan a file based on [https://github.com/Musawirkhann/react_qrcode_generation_scanner This code is written in react, but I wanted to use it with tsx. However, when attempting to implement it, I encountered an error: ...

Using parameters and data type in Typescript

When I remove <IFirst extends {}, ISecond extends {}> from the declaration of this function, the compiler generates an error. Isn't the return value supposed to be the type after the double dot? What does <IFirst extends {}, ISecond extends { ...

Switching Json to Typescript

I have a file named items.ts with the following interface: export interface item{ Name: string; IsSystemItem: string; ConfiguredSegments: ConfiguredSegments; } export interface ConfiguredSegments { LiveA: LiveA; } export interface LiveA { Weig ...

Try utilizing the array find() method in place of a traditional for loop

Is there a better way to refactor this code using the Array.find() method instead of nested for loops? onLoadTickets() { const ticketsReq = this.ticketService.getTickets(); const tariffsReq = this.tariffService.getTariffs(); forkJoin([ticketsR ...

Issue with Angular 2: Unable to locate the module '@angular/animations/browser'

I am currently attempting to install Angular2-Toaster (https://github.com/Stabzs/Angular2-Toaster). Initially, I successfully installed it using npm install angular2-toaster and was able to import it without any errors. However, I realized that I also need ...

Break down a data structure into a type that includes multiple options

Is it possible for Typescript to support type or interface "destructuring" (if that's the right term)? I am attempting to achieve something similar to the code snippet below: type SomeRandomType = { propertyOne: string; propertyTwo: number; ...

How to Utilize Output() and EventEmitter() for Value Transmission in Angular Application

Last week I was successfully able to implement Output() and EventEmitter() in my Angular app. However, today I am facing a new challenge while trying to apply the same concept in a different scenario. I'm not sure what I might be overlooking. Firstly ...

When working with the Google Sheets API, an error occurred: "this.http.put(...).map is not a valid

Having difficulty with a straightforward request to the Google Sheets API using the PUT method. I followed the syntax for http.put, but an error keeps popping up: this.http.put(...).map is not a function. Here's my code snippet: return this.http ...

The integration of react-color Saturation with @types/react-color is currently unavailable

In my quest to develop a customized color picker, I am utilizing the react-color library (^2.19.3) together with @types/react-color (^3.0.4). The issue arises when trying to import the Saturation component since it is not exported from the types in the ind ...

The directive for accepting only numbers is not functioning in versions of Chrome 49.xx.xx and earlier

I have implemented a directive in Angular 6 to allow only numbers as input for certain fields. The directive code is shown below: import { Directive, ElementRef, HostListener } from '@angular/core'; @Directive({ selector: '[NumbersOnly]& ...