Why would one utilize a shared module within an Angular application?

After researching various Best Practices resources, I noticed that many recommend the same project structure for Angular web applications. Websites like aglowildsolutions, tatvasoft, and even the Angular homepage all suggest using a shared module. However, I am struggling to understand the purpose of a shared module.

For example, when working with Angular Material design, I typically use around 10 material components spread across 5 feature modules. In each feature module, I end up utilizing 2 different material components. The issue arises when I have to import the entire shared module into each feature module in order to access these components. This makes me wonder if it's really any different from just having everything in either the app module or the core module.

I fail to see any clear advantage here. In fact, it seems to complicate the project structure and potentially bloat the codebase, which could ultimately impact performance negatively.

Answer №1

Personally, I believe that relying on a shared module is an outdated habit of unmotivated programmers. This approach hinders tree-shaking capabilities and results in bloated bundle sizes.

I suggest creating a separate module for each component. Import only the necessary Material modules in each Component-Module.

By following this method, your code structure will be more streamlined, allowing for efficient lazy loading and tree-shaking, as well as simplifying refactoring processes.

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

Angular does not support the functionality of having multiple material paginations within a single component

I am currently working on creating a component that contains two dataTables, each with a different dataSource. However, I am facing an issue where my Tables are not visible immediately after the component is loaded due to the *ngIf directive being used. Be ...

In order to dynamically create a new div element when the enter key is pressed within a contenteditable div

I'm currently developing an Angular 7 application. Within this app, there is a page containing a div with the contenteditable attribute set to true. My goal is to have a new div added to the editor when the user hits the enter key, right after the foc ...

The class instances are not invoking the decorators

I'm experiencing issues with my decorators. It seems that the decorators are not being invoked on every instance of the class. While I understand that decorators are called during declaration time, I am wondering if there is a way to call them for eac ...

Issue encountered during Angular 2 upgrade from RC4 to RC5: Error message stating that at least one component needs to be bootstrapped

Trying to upgrade to version 2.0.0-rc.5 with Router at 3.0.0-rc.1. After following the upgrade instructions from the documentation (transitioning from RC4 which is currently working fine), I encountered this error, but I am unsure what's causing it: ...

React's .map is not compatible with arrays of objects

I want to retrieve all products from my API. Here is the code snippet for fetching products from the API. The following code snippet is functioning properly: const heh = () => { products.map((p) => console.log(p.id)) } The issue ari ...

Rearrange content blocks by clicking on the image

In my image gallery, each image is accompanied by a div containing its name. However, I'm facing an issue where clicking on the image causes the name div to disappear (as intended), but I am unable to replace it with the tools div (with class "ImageBu ...

Transferring data from HTML label to TypeScript

Looking for some assistance with this code snippet: <sh-toggle label='ABCD' id = 'ABCD'> </sh-toggle> I am trying to extract the value of the label in my TS file. Can anyone provide guidance on how this can be achieved? Whe ...

Is there any shorthand method for passing a child as a template with a reference to a component in Angular versions 2 and above

I am currently exploring ways to reduce the clutter when passing templates to angular components. Take a look at the code snippet below: <parent> <ng-template #child1><div>Test</div></ng-template> <ng-template #child2 ...

Contrary to GraphQLNonNull

I am currently working on implementing GraphQL and I have encountered a problem. Here is an example of the code I wrote for GraphQL: export const menuItemDataType = new GraphQL.GraphQLObjectType({ name: 'MenuItemData', fields: () => ...

The program failed to retrieve the 'messages' property as it was undefined

I encountered an issue while trying to push a response from an HTTP service onto an array. The error message reads as follows: Cannot read property 'messages' of undefined The problematic section lies within my chat.component.ts file: import { ...

What is the best method for saving and retrieving a class object in a web browser's storage?

Looking for a way to create page-reload proof class instances in my Angular 2 application. Within my component's .ts file, I have defined the following classes: export class AComponent implements OnInit { foo: Foo = new Foo(); ngOnInit() { / ...

Narrowing Types Based on a Conditional List of Keys

Below is the code snippet I am currently working with: type AlphaNumeric = string | number | null | boolean | undefined; type AlphaNumericKeys<T> = { [key in keyof T]: key extends string ? (T[key] extends AlphaNumeric ? key : never) : never; }[k ...

Resetting a field in a child component using Angular parent component communication

I'm a bit confused about how to reset a field in a child component from the parent. In my setup, there's a field in the child component that should be reset when a function is called in the parent component. Child component: @Component({ ...

Is it possible to specify a key on an object while allowing TypeScript to infer the value's type automatically?

Currently, I am working on a challenge where I aim to establish specific keys for an object while allowing TypeScript to infer the types of the values. Here is a simple example: const fooVals = { a: null, b: null, c: null, e: null, } type TfooV ...

What is the best way to create a function object that includes additional functions as properties?

I am working with TypeScript and I want to design a module where a function is exported along with some additional functions added to it. Here is an example: export default function log(msg: string) { console.log(msg); } //Property 'warn' d ...

Develop a C# model for the TS Index Signatures entity

My angular frontend is sending an object with index signature to a .NET Core controller. It looks something like this: export interface LazyLoadEvent { first?: number; rows?: number; filters?: { [s: string]: FilterMetadata; }; ...

The journey of an Angular and NGXS store application culminates in a seamless loop of store updates

Currently, I am utilizing NGXS as the store mechanism in my application. Within the store, there is a list of conditions that are displayed using the RuleEngineAddViewStepperConditionComponent component and the *ngFor directive on the UI. Each condition ha ...

Issue with Angular polyfill in IE11: The core-js version 3.6.5 method es.string.split.js is having trouble parsing the regex /^|s+/ when used with

Angular 10, d3 5.16.0, and core-js 3.6.5 In the midst of it all, d3-drag triggers d3-dispatch, which in turn invokes a function called .parseTypenames. function parseTypenames(typenames, types) { return typenames.trim().split(/^|\s+/).map(functio ...

Guide on setting up an input listener for Stripe Elements in an Angular application

I have a goal to link my component variable numberOfCreditCard with the input card number using the following template: <div class="example example2" id="example-2"> <form> <div class="row"> ...

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' ...