How can we leverage Shared and Core modules alongside Feature modules in Angular development?

When developing my Angular application, I have adopted a specific architecture approach and included a shared.module.ts file in the shared folder. While leveraging lazy-loading in my app, I find myself puzzled about the necessary imports, declarations, and exports for each module. Referring to the folder structure on the same page where I added the shared.module.ts file, how should my modules handle this while considering lazy-loading?

App Module: In this module, we must import the modules/packages that will be used throughout the entire system, such as CommonModule, FormsModule, HttpClientModule, etc. These modules do not need to be exported.

Core Module: Components created in this module are designed to be utilized across multiple pages of the system, like HeaderComponent, FooterComponent, AuthGuards, etc. These components should be exported to make them accessible in other modules.

Shared Module: This module should contain Services, Components, Pipes, and Directives that will be used in more than one component, such as AlertDialogBox, HTTPService, etc.

User Module (considered a feature module): Specific to User functionality, this module includes components tailored for User operations. Importing the Shared Module here allows access to functionalities like AlertDialogBox.

Additionally, it may be beneficial to include an xxx-routing.module.ts file for each navigated module. Is it necessary to create a routing module for the shared module as well?

Answer №1

In my opinion, the Shared Module and Core Module may not necessarily require the routing.module.ts file. However, this ultimately depends on your specific requirements.

This GitHub repository showcases some best practices that you might find helpful in gaining a better understanding. Visit this link to learn more

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

Feeling uncertain about Node, NPM, Bower, and how to set them up for Bootstrap?

Looking to expand my knowledge in web development, I have a solid understanding of HTML, JS, CSS, and server-side programming. However, the concepts of Nodejs, npm, and Bower are still unclear to me. In order to begin a new project, I created a designated ...

The Protractor actions().mouseMove function does not seem to function properly in Firefox and IE, although it works perfectly in Chrome

I've encountered an issue with the mouseMove command while using the actions class. The error occurs specifically when running the script on Firefox and IE, but works fine on Chrome. Below is the code snippet I attempted: browser.get("https://cherch ...

What is the best way to retrieve all SVG objects within a specific area in an Angular application?

I am currently developing an SVG drawing application and have implemented a tool that enables users to select all shapes within a rectangular area. However, I am facing the challenge of detecting the SVG shapes located underneath the selected rectangle. ...

Getting an undefined error value in the ionic overlay side menu - what could be causing this issue?

My current challenge involves displaying the overlay side menu. I have written code to achieve this, adding a menu icon in the header that opens the overlay side menu when clicked, and closes it when clicked outside. However, I encountered an issue where ...

There was a type error that occurred because the property 'addEventListener' could not be read from an undefined value

Encountering an issue with the JavaScript libraries three.js and OrbitControls.js despite following a tutorial: However, an error is being displayed in the console: Uncaught TypeError: Cannot read property 'addEventListener' of undefined at ne ...

Filtering rows in JQgrid is made easy after the addition of a new record

Here's the situation I'm facing: Every second, my script adds a new record using the "setInterval" function: $("#grid").jqGrid('addRowData', id, data, 'first').trigger("reloadGrid"); However, when users apply filters while t ...

React Scheduler by Bryntum

After successfully discovering some functions related to various actions, I find myself still in need of additional functions: Currently, I am utilizing these functions by passing them directly as props to the Scheduler React Component: - onBeforeEventSa ...

How to use JavaScript to retrieve extensive data streams (exceeding 1GB) from the internet

I'm interested in finding out if there is a way to stream data directly from JavaScript to the browser's download manager. With WebRTC, I am able to stream large amounts of data (files over 1GB) from one browser to another. On the receiving end, ...

The React apexchart heatmap's height remains static despite attempting to change it through state updates

Seeking to dynamically resize the height of an "Apexcharts heatmap" based on server data. Despite attempting to manipulate code in various lifecycle methods, including componentDidMount() and where the data is received, I have not been successful. Within ...

Is it possible to submit two forms simultaneously using jQuery or AJAX?

My plan is to save 2 forms, with the first form providing the Foreign key for the second form. This is my attempt at saving this using JavaScript: $("#btnSave").click(function (e) { e.preventDefault(); $('#workForm').submit(); ...

Make a JSONP request with the MIME Type set to text/plain

I've been attempting to utilize JSONP for fetching a feed from a different domain. Despite knowing that the content type should ideally be JSON or JavaScript, it is currently set as text/plain and unfortunately, I lack control over the server settings ...

Developers guide to using Selenium IDE

After downloading the source code of Selenium IDE, I'm eager to make some edits but unfortunately, I can't seem to find any documentation on how to do so. Hey folks, anyone aware of any resources available for developers working on Selenium IDE? ...

What are the steps to set up mocha to automatically monitor source or project files?

Is there a way for Mocha to only watch my source/project files and not the test files? The test files and source/project files are located in separate directories. Any help or guidance would be greatly appreciated. Thank you! ...

React Intersection Observer Triggering Memory Leaks

Issue Description: I encountered a problem with my React app crashing on mobile. The Chrome dev tools revealed that garbage collection wasn't triggering, and upon inspecting the heap, I found that the top constructors by retained size were all linked ...

Updating table width using AngularJS/jQuery after completion of ajax request

One of my challenges involves a table that defaults to a specific width, such as 80% of its parent div. Initially, the table remains hidden using 'ng-if' until an ajax call is completed in this manner: This is reflected in the HTML code snippet ...

Why aren't the divs appearing on the page?

I have developed a JavaScript and PHP page where the script in the PHP page sends data to my SQL database. However, the result is not displayed on my home page. Here is the code snippet: function getVote(question_ID) { var option_ID = document.queryS ...

Issue with Refreshing onRowAdd in React Material Table

I am currently using Material Table to display my table data. However, when I use the onRowAdd function to add a new row, the page does not refresh properly. Instead, it reloads and gets stuck, requiring me to manually refresh again. newData => ...

Creating a mesmerizing parallax effect for your image: A step-by-step guide

Looking for help to create a parallax effect on an image when hovered over. Does anyone have any advice or resources? Feeling frustrated at the moment. Here is an example link for reference: http://codecanyon.net/item/jquery-moving-perspective/full_scre ...

Testing the scope of an Angular directive

Encountering an issue with the unit test In my code, I have: describe('test controller', function () { var =$compile, scope, rootScope; beforeEach(module('myApp')); beforeEach(inject(function (_$compile_, _$rootScope_) { ...

Using the mat-icon within several mat-select components

How can I resolve the issue with displaying mat-icon in a mat-select(multiple) field? After adding a mat-icon and selecting an option, the mat-icon value also appears in the selected values. Please see the attached images for reference: mat-select-list s ...