You may include 'list of customers' under the 'customers' section within the module

As a newcomer to Angular, I encountered an issue when trying to integrate '' into my customers.component.html file:

  1. If 'app-customers-list' is supposed to be an Angular component, ensure that it is included in this module.
  2. If 'app-customers-list' is a Web Component, make sure to add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component [...]

Although this error is quite common, I'm struggling to identify what is causing it. It seems like there may be an issue with importing the customer-list component into my customers.module.

Let's take a look at my files:

  • customers.module.ts:

    import { NgModule }      from '@angular/core';
    import { CommonModule } from '@angular/common';
    
    import { CustomersComponent }  from './customers.component';
    import { CustomersListComponent } from './customers-list/customers-list.component';
    
    @NgModule({
    imports:      [ CommonModule ],
    declarations: [ CustomersComponent, CustomersListComponent ],
    exports: [ CustomersComponent,CustomersListComponent ]
    
     })
     export class CustomersModule { }
    
  • customer.list.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-customers-list',
  templateUrl: './customers-list.component.html'

})
export class CustomersListComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Answer №1

Make sure to correctly import your component into the app.module.ts file, not in the customers.module.ts.

Below is an example from the app.module.ts file:

// MODULES

import { BrowserModule } from '@angular/platform-browser';
import { ngModule } from '@angular/core';
...

// COMPONENTS

import { AppComponent } from './app.component';
import { CustomersComponent }  from './customers/customers.component';
import { CustomersListComponent } from './customers/customers-list/customers-list.component';
...

@NgModule({
  declarations: [
    AppComponent,
    ...
    CustomersComponent,
    CustomersListComponent
    ...
  ]
})

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

Decoding enum interface attribute from response object in Angular 4 using typescript

From an API response, I am receiving an enum value represented as a string. This enum value is part of a typescript interface. Issue: Upon receiving the response, the TypeScript interface stores the value as a string, making it unusable directly as an en ...

Forwarding parameter data type

I am facing an issue with 2 navigation points leading to the same screen 1. this.router.navigate([this.config.AppTree.App.Module.Details.Path], { state: { data: { id: this.TableId } } }); this.router.navigate([this.config.AppTree.App.Module.Details.Pa ...

The input field cannot be accessed via touch on mobile devices

<div class="form-group row pswrd" style="padding: 0px 10px"> <div id="email" class="col-md-12 col-xs-12"> <input type="password" class="form-control c_fname" id="c" #pswd name="password" placeholder="password" [(ngModel)]="user.passwor ...

Why does TypeScript keep throwing the "No inputs were found in the config file" error at me?

Why am I receiving the No inputs were found in config file error from TypeScript? I have set up my tsconfig.json in VS Code, but the error occurs when I try to build it. The terminal displays: error TS18003: No inputs were found in config file '/Use ...

Issue: Nest is unable to export a component/module that is not included in the DatabaseModule module that is currently being processed

I am currently working on a simple app that involves implementing CRUD functionality on a PostgreSQL database using express. However, when I try to run my program, I encounter the following error message: Error: Nest cannot export component/module that is ...

Utilizing npm link with a TypeScript-written module: a guide for seamless development?

I am currently in the process of developing a TypeScript and Webpack-based library. To facilitate the development of this library, I have set up a separate test project (written in JS) and connected the library using npm link <package-name>. Howeve ...

ESLint version 8.0.0 encountered an error while attempting to fetch the '@typescript-eslint' plugin

Hey there, I'm in need of some assistance. I encountered an error while trying to build a project. Uh-oh! Something didn't go as planned! :( ESLint: 8.0.0 TypeError: Failed to load plugin '@typescript-eslint' specified in ' ...

Tips for modifying the JSON format within a Spring and Angular project

I am utilizing Spring for the backend and Angular for the frontend. Below is my REST code: @GetMapping(path = "/endpoint") public @ResponseBody Iterable<Relations> getGraphGivenEndpointId(@RequestParam(value = "id") int id) { return ...

"An error occurs when attempting to access "this" in a static method as it

Just diving into the world of React and Typescript and currently exploring React hooks. Encountered a problem that's leaving me scratching my head. Here's the hook I'm using to fetch data: export const useFetch = <T>( fetchFunc: ( ...

The datepicker in Angular Material refuses to open when used within a modal dialog box

I successfully integrated an angular material 2 date-picker into a bootstrap modal form: <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">{{title}}</h ...

Arranging in ascending and descending sequence in Angular2

Is there a way to implement sorting in both ascending and descending order? I currently have code that only allows for sorting in ascending order by name and identifier. How can I modify it to also support sorting in descending order? sortType(sort: strin ...

Tips for displaying the string value of an elementFinder when encountering an error in protractor

I have the following code snippet: export async function waitTillClickable(e: ElementFinder): Promise<ElementFinder> { const conditions = EC.visibilityOf(e); await browser.wait(conditions, DEFAULT_TIMEOUT, `Element did not return ...

Angular material table featuring custom row design

My team is working with a large table that is sorted by date, and we are looking to add some guidance rows to help users navigate through the data more easily. The desired structure of the table is as follows: |_Header1_|_Header2_| | 25/11/2018 | ...

Enhance the functionality of Spartacus CMS component with a new extension library

I am currently working on developing an Angular library that enhances the functionality of the product-images component within the product details page of Spartacus. Upon customizing a CMS component, I have realized the necessity to include code lines sim ...

Maximizing Component Reusability in React: Utilizing Various Types Across Components

interface DataInfo { name: string; src: string; id: string; price: number; } interface DataInfo2 { title: string; src: string; _id:string item_price: number; } const ItemData = ({ item }: DataInfo | DataInfo2) => { return ( <li ...

What Google Domain Verification APIs are needed for verifying domains in Pub/Sub?

I've written this code that utilizes a Domain token to verify a domain with Google using the Site Verification API: const auth = await this.gcp.getApplicationCredential(accountId, projectId,[ 'https://www.googleapis.com/auth/siteverification ...

What is the best way to conceal the previous arrow when on the first item, the next arrow when on the last item, and both arrows when there is only one item in an

Within this template file, I am aiming to incorporate the following functionality: hiding the previous arrow on the first item, hiding the next arrow on the last item, and hiding both arrows if there is only a single item. This implementation utilizes the ...

The ngrx action is mysteriously invoked without being explicitly called within the effect

I've implemented an effect to load data and defined actions for load success and load failure. The effect is functioning correctly, but it seems to be calling both actions (success and failure) even though I have only returned load success. When I tri ...

Searching for resources on the classic AngularJS material design components? Look no further for

I'm a beginner to Angular 4 and I've encountered an issue while trying to implement Angular Material in my project. The problem is that the documentation I can find is only for the latest version: MatSelect API The syntax has been updated to use ...

Initiating preparation during NPM Installation

During the installation of a TypeScript module from Git, I noticed that the package.json file contains a prepare script in its scripts section. Strangely, it seems that the prepare script is not being run when using npm install <git repository#version&g ...