Shifting Angular Component Declarations to a New Location

Here's a question that might sound silly:

In my Angular project, I am looking to reorganize my component declarations by moving them from angular.module.ts to modules/modules.modules.ts.

The goal is to structure my src/app directory as follows:

src/
   app/
   .  modules/
   .  .  about/...
   .  .  banner/...
   .  .  contact/...
   .  .  portfolio/...
   .  .  services/...
   .  .  testimonial/...
   .  .  modules.module.ts
   .  app-routing.module.ts
   .  app.component.html
   .  app.component.scss
   .  app.component.spec.ts
   .  app.component.ts
   .  app.module.ts

Essentially, I want to consolidate all my component declarations into modules/modules.module.ts

Below is my current approach:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

// Modules Components
import { BannerComponent } from './banner/banner.component';
import { ServicesComponent } from './services/services.component';
import { PortfolioComponent } from './portfolio/portfolio.component';
import { TestimonialComponent } from './testimonial/testimonial.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

@NgModule({
  imports: [CommonModule],
  declarations: [
    AboutComponent,
    BannerComponent,
    ContactComponent,
    PortfolioComponent,
    ServicesComponent,
    TestimonialComponent,
  ],
  exports: [
    AboutComponent,
    BannerComponent,
    ContactComponent,
    PortfolioComponent,
    ServicesComponent,
    TestimonialComponent,
  ],
})
export class ModulesModule {}

app.module.ts:

// Angular CLI
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// App Component
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// Pages Components
import { HomePageComponent } from './pages/home-page/home-page.component';
import { AboutPageComponent } from './pages/about-page/about-page.component';
import { ServicesPageComponent } from './pages/services-page/services-page.component';
import { PortfolioPageComponent } from './pages/portfolio-page/portfolio-page.component';
import { PortfolioSinglePageComponent } from './pages/portfolio-single-page/portfolio-single-page.component';
import { ContactPageComponent } from './pages/contact-page/contact-page.component';

// Modules Components
//import { BannerComponent } from './modules/banner/banner.component';
//import { ServicesComponent } from './modules/services/services.component';
//import { PortfolioComponent } from './modules/portfolio/portfolio.component';
//import { TestimonialComponent } from './modules/testimonial/testimonial.component';
//import { AboutComponent } from './modules/about/about.component';
//import { ContactComponent } from './modules/contact/contact.component';
import { ModulesModule } from './modules/modules.module';

// Angular Material
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material/material.module';

// Third Party
import { OwlModule } from 'ngx-owl-carousel';
import { NgxSpinnerModule } from 'ngx-spinner';

// PWA
import { ServiceWorkerModule } from '@angular/service-worker';

// Environment
import { environment } from '../environments/environment';

// Firebase
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';

@NgModule({
  declarations: [
    AppComponent,
    HomePageComponent,
    AboutPageComponent,
    ServicesPageComponent,
    ContactPageComponent,
    PortfolioPageComponent,
    PortfolioSinglePageComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ModulesModule, // here
    BrowserAnimationsModule,
    MaterialModule,
    OwlModule,
    NgxSpinnerModule,
    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: true, //environment.production,
    }),
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireDatabaseModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Please keep in mind that for simplicity, I have changed the names in this example. The code was functioning correctly with the declarations in app.module.ts before.

javascriptangulartypescriptangular-componentsangular-module

Answer №1

To successfully implement each component in the `ModulesModule`, it is crucial to export them individually. This approach mirrors the concept outlined in the Sharing modules guide. The error messages you are encountering seem to be related to unknown elements associated with owl carousel, Angular router, and potentially other modules. A solution could involve creating a `SharedModule` that both imports and exports these third-party modules alongside any shared components. Subsequently, this `SharedModule` can be imported into other modules where they are needed:

Shared:

@NgModule({
 imports:      [CommonModule],
 declarations: [],
 exports:      [CommonModule, OwlModule, RouterModule]
})
export class SharedModule { }

Modules:

@NgModule({
  imports: [SharedModule],
  declarations: [
    Component1,
    Component2,
  ],
  exports: [
    Component1,
    Component2,
  ],
})
export class ModulesModule { }

This approach should provide assistance in resolving your issue!

Answer №2

Based on the issue at hand, it is suggested that you take the following actions:

  • Include RouterModule in your ModulesModule
  • Add OwlModule to your ModulesModule

As I am getting older and my vision is not what it used to be, there may have been oversight on my part :)

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

Creating a dynamic HIIT program with an autoplay feature for videos and images, using a jQuery/JavaScript slider "playlist" with the backend support of

I am currently exploring the idea of developing a countdown timer that incorporates videos. In order for this timer to function effectively, it must be able to retrieve data such as countdown time, break time, number of sets, and video (or images if no vid ...

javascriptphpjquerymysql

Enhancing the loading speed of hefty Angular components

The issue I encountered involved a large component that loads over 1000 data elements, populated by a service called only once. Initially, the service was being called each time the component initialized, which seemed to be causing performance problems. To ...

angulartypescriptcomponents

Is the "Illegal invocation" error popping up when using the POST method in AJAX?

Is there a way to retrieve JSON data using the POST method in Ajax? I attempted to use the code below but encountered an error: TypeError: Illegal invocation By following the link above, I was able to access JSON-formatted data. However, please note th ...

javascriptjqueryajaxjson

Require.js and R.js optimizer overlooks shimming configuration

I am facing an issue where R.js is not loading my shim properly, causing jQuery to load before tinyMCE which results in tiny being initialized before it has fully loaded. How can I resolve this problem? build-js.js: var requirejs = require('requirej ...

javascriptnode.jsrequirejs

Nested function unable to assign values to variables

I am currently working on a function in Discord.js that collects users who reacted to a message. I have managed to gather all the user IDs inside a nested function, but when trying to return the array to the caller, it does not seem to work as expected. He ...

javascriptnode.jsfunctionscopenested

Exploring the Enzyme library in React to trigger an onClick event with a specific parameter

In my quest to simulate an onClick method in my unit tests using Enzyme for React, I have encountered various tutorials on simulating an onClick event that takes an event e. For example: handleClick(e) { // Does something } .... <MyComponent onCli ...

javascriptreactjsenzyme

When a specific option is selected in a `select` element with the `multiple` attribute, activate the change event

Is it possible to trigger a change event on individual options within a standard select element using jQuery or another method? I want the change event to be triggered on the option elements themselves rather than on the select element, as multiple options ...

javascriptjqueryjquery-selectors

What is the best way to convert my MySQL data into JSON in a specific format?

I need help with outputting MySQL data into various formats below: timelist, usersex, and userage from the users table. <script type="text/javascript"> timeList = new Array(), userSex = new Array('female','male','male') ...

phpjavascriptxmljson

Is it necessary to uncheck the row checkbox when inputs are left empty after blurred?

Two issues have cropped up here. When clicking on an input within a row, the corresponding checkbox should be checked. Currently, only the first text input is able to check the checkbox due to the use of .prev(). Is there a different approach that can be t ...

javascriptjquerycheckboxeachblur

Tips for uploading a file using Axios in a form

When uploading a file to a Flask server, I can access files from the flask request global by using raw HTML with the following code: <form id="uploadForm" action='upload_file' role="form" method="post" enctype=multipart/form-data> < ...

javascriptajaxfile-uploadaxios

Assigning specific class names to elements within an array using JavaScript

Currently, I'm attempting to assign a unique className to option elements within a select element by utilizing a conditional if statement. The goal is to apply one class name to the first half of the array and a different class name to the second half ...

javascriptarraysloopsconditional-statements

What is the reason that asynchronous function calls to setState are not grouped together?

While I grasp the fact that setState calls are batched within react event handlers for performance reasons, what confuses me is why they are not batched for setState calls in asynchronous callbacks. For example, consider the code snippet below being used ...

javascriptreactjs

Tips for including an authorization token in an HTTP request

I encountered a 401 unauthorized error when trying to access my REST endpoint, likely due to the security measures I have implemented. I suspect that there might be an issue with how I am handling the HTTP headers. The application utilizes a Spring Boot b ...

angulartypescriptrestspring-boot

How to display percentage value on ReactJS Material UI progress bar

For displaying the progress completed in numbers, I utilize the Linear Determinate component. Take a look at the image below to see how it appears. ...

javascriptreactjscssmaterial-designmaterial-ui

Active tab in HTML

In my implementation based on this example code from https://www.w3schools.com/howto/howto_js_tabs.asp, I have a specific requirement. I want the tab for "Paris" to remain active even after the page is refreshed if the user has clicked on the button for "P ...

javascripthtmljquerycss

Requesting for a template literal in TypeScript:

Having some trouble with my typescript code, it is giving me an error message regarding string concatenation, const content = senderDisplay + ', '+ moment(timestamp).format('YY/MM/DD')+' at ' + moment(timestamp).format(&apo ...

javascripttypescript

Tips for implementing vue.js composition api with vue-3-socket.io

Is there a way to access the socket instance within the setup function of a Vue.js component? I am utilizing vue-3-socket.io in my main.js import VueSocketIO from 'vue-3-socket.io' import SocketIO from 'socket.io-client' Vue.use(new ...

javascriptvue.jssocket.io

Move content off the screen using CSS3 translation

Throughout various projects, I have encountered the need to make elements on a webpage translate out of view (essentially making them fly out of the document). The idea was that by simply adding a class to the element, the CSS would take care of the animat ...

javascripthtmlcss

Incorporating external content to make it easily discoverable by Google for optimal SEO performance

I am currently working on a project that involves loading external content onto a customer's site. Our main goal is to provide the customer with a simple inclusion method, such as a one-line link similar to Doubleclick, without requiring any server-si ...

javascriptphpajaxseo

"Enhance your gaming experience with Three JS special effects

I'm in the process of creating a multiplayer web game using Three JS. So far, I have successfully implemented the game logic on both client and server sides, mesh imports, animations, skill bars, health bars, and the ability for players to engage in c ...

javascriptthree.jsparticle-systemparticles