Having trouble locating a component from a different Angular module

My AppModule is ready and I have imported my HomeModule to it.

@NgModule({
  declarations: [
    AppComponent

  ],
  imports: [
    BrowserModule,
    HomeModule

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

This is how my HomeModule looks like:

@NgModule({
  declarations: [
    HomeComponent,
    ContactComponent,
    Page404Component
  ],
  imports: [
    BrowserModule,
    HomeRoutingModule,
    MainModule,
    ReactiveFormsModule

  ],
  providers: []
})
export class HomeModule { 

}

After that, I decided to add the home.component into the app.component, here is what I did:

@Component({


     selector: 'em-home',
      templateUrl: './home.component.html',
      styleUrls: ['./home.component.scss']
   })
    export class HomeComponent {
}

I added this code snippet to AppComponent.html :

<div>
<em-home></em-home>
</div>

However, upon checking my browser, I encountered some errors:

'em-home' is not a known element:
1. If 'em-home' is an Angular component, then verify that it is part of this module.
2. If 'em-home' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<div>
[ERROR ->]<em-home></em-home>

I need help in understanding what went wrong with my implementation. Can anyone provide guidance on this issue?

Answer №1

It appears that the exports section is missing in the home module components.

To fix this issue, you can include it as shown below:

@NgModule({
  declarations: [
    HomeComponent,
    ContactComponent,
    Page404Component
  ],
  imports: [
    BrowserModule,
    HomeRoutingModule,
    MainModule,
    ReactiveFormsModule

  ],
exports:[HomeComponent,
        ContactComponent,
        Page404Component], // This line should be added here
providers: []
})
export class HomeModule { 

}

Note that there is no need to export providers.

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

typescript set parameter conditionally within a function

For my upcoming app, I am working on an API that will utilize Firebase FCM Admin to send messages. Below is the code snippet: import type { NextApiRequest, NextApiResponse } from "next"; import { getMessaging } from "firebase-admin/messaging ...

Using the jQuery .each() method to generate an array of objects

I have a goal of creating something similar to this. var data = google.visualization.arrayToDataTable([ ['Year', 'Cost'], ['2004', 1000], ['2005', 1170], ['2006', 660], ['2007&a ...

The separator falls short of spanning the entire width of the page

For some reason, I can't seem to make the divider extend to the full length of the page. <TableRow> <TableCell className={classes.tableCell} colSpan={6}> <Box display="grid" gridTemplateColumn ...

Distinguishing between the practical aspects of directly subscribing to an Observable versus employing the subscribe() method with a parameter

I have a function that provides data in an Observable: getData (): Observable<Data[]> {...} To utilize this data in my template and ensure the template remains "live" based on the Observable, I have come across two methods. I created a Subject ins ...

How can I execute a task following a callback function in node.js?

Is there a way to run console.log only after the callback function has finished executing? var convertFile = require('convert-file'); var source, options; source = 'Document.pdf'; options = '-f pdf -t txt -o ./Text.txt'; ca ...

Retrieve the visible text content of an element by utilizing various ids

I am currently working on a project using AngularJS with multiple conditions all sharing the same id. My goal is to extract text only from the condition that evaluates to true. Recently, I discovered a major bug in an app that I am preparing for release. ...

Guide to accessing and showcasing an embedded Firestore entity using Angular?

I'm looking to showcase a Firestore model with profile names and hashtags using Angular 6. As I delve into Firestore, I've discovered that the proper way to model it is like this: enter image description here members { id: xyz ...

AngularJS directive with isolated scope does not cause any changes in the DOM outside of the directive

Exploring Angular directives with isolated scopes has led me to an intriguing situation. Upon calling a function from the local scope that alters a $scope variable's content, I noticed that it does not affect the DOM. For instance, when adding a new e ...

What sets apart route.use(), route.all(), and route.route() in Express?

Is it possible to replace router.all() with router.use() if the former just matches all methods? Also, what are the differences between using router.use() and router.route()? ...

What is the best way to add an event listener to every item in a list within a Vue component

Here is a component structure that I am working with: Vue.component('navbar', { props: ['navitem'], methods: { users: function () { //users code }, test:function(){ } }, template: '<li v-on:cl ...

How can I retrieve the ISO time three days from now using javascript?

Is there a way to retrieve the date in ISO format three days from now? I know how to get today's date using this code snippet, but I'm uncertain about how to calculate the ISO date for three days in the future. const today = new Date().toISOStri ...

Encountering a TypeScript React issue with passing objects to context in code

Within my project, there is a context provider that acts as an object containing various properties: <Provider value={ { scaleNum: scaleNum, // number scaleLet: scaleLet, // string ...

Displaying received image using Express JS

Currently, I am working on managing two separate Express JS applications. One of them serves as an API, while the other application interacts with this API by sending requests and presenting the received data to users. Within the API route, I am respondin ...

The background image is not properly aligned

I am struggling to set an image as the background for my first ASP.NET Core project. However, when I add the image, it also appears like a footer on the page instead of being positioned between the header and footer sections. Here is a picture of the back ...

Implement conditional props for a React component by linking them to existing props

In my current project, I am working on a component that has a loading state. The component has an isLoading prop which determines whether the component is currently in a loading state or not: interface CustomImageComponentProps { isLoading: boolean ...

The functionality to deactivate a button for Angular4 validation is not operating as expected

I am encountering an issue with the submit button in my form. I am attempting to disable it until all the text-boxes are filled. However, it is not working correctly after the page is refreshed or loaded for the first time in the browser. Oddly, if I perfo ...

Encountering an issue in a Next.js application while building it, where an error is triggered because the property 'protocol' of 'window.location' cannot be destructured due to being undefined

While building my nextjs application, I encountered the following error. My setup uses typescript for building purposes, although I am only using JavaScript. Build error occurred: TypeError: Cannot destructure property 'protocol' of 'window ...

Using .on as a substitute for live will not yield the desired results

I've been aware for some time now that the .on method is meant to replace .live, but I just can't seem to get it working. I've attempted: $(this).on('click', function(){ // Do something... }) $(this).on({ click: function ...

Determine if two sets of arrays have the same identification numbers

Initially, my arrays are named after the different continents of the world. europe= []; northAmerica = []; southAmerica = []; asia = []; In addition to these, I also have two arrays containing some specific data. arr1 = [1,3]; arr2 = [ { country: " ...

Implementing personalized callback methods for AJAX requests in Prototype

After refactoring my code to use proper objects, I am facing an issue with getting Prototype's AJAX.Request to work correctly. The code snippet below is functioning within the context of YUI's DataTable: SearchTable.prototype.setTableColumns = f ...