I searched a lot, but I couldn’t find this specific problem. Here it is:

I am a beginner and for training I am making a project in Angular where I have a module called “AppMaterialModule” to put all angular material components and expose them to the other components. I have another component called “ExpenseComponent” and it has its own module “ExpenseModule”. In the ExpenseModule the ExpenseComponent is imported (in declarations[]) and I imported the AppMaterialModule (in imports[]). I think this would be enough for me to use the AppMaterialModule elements in the ExpenseComponent, but when I try to use an existing AppMaterialModule mat-table in my expense.component.html it doesn’t recognize the mat-table or anything from it, it doesn’t recognize data-source, mat-cel, mat-row, nothing.

Here comes the weird part: If I go into expense.component.ts and import the ExpenseModule there directly, everything starts working fine.

It seems that the import of the ExpenseComponent into declarations[] in the ExpenseModule is not enough for angular to understand that the ExpenseComponent is part of the ExpenseModule.

I have already tried:

• to use: <table mat-table></table>; <th mat-header-cell></th>; <td mat-cell></td>; <tr mat-header-row></tr>; <tr mat-row></tr>; the same way as in the mat-table documentation on the angular material website (doesn’t work);

• import the mat-table directly into the ExpenseModule (doesn’t work and I don’t want it that way either, I want to keep the material components in the AppMaterialModule);

• import the mat-table directly into expense.component.ts (doesn’t work);

• delete the node-modules folder and run an npm i to reinstall everything (didn’t work either).

Anyway, the only thing that works is to import directly into expense.component.ts the ExpenseModule which doesn’t make any sense since the ExpenseComponent is in the declarations[] of the ExpenseModule.

app-material.module.ts

import { NgModule } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatInputModule } from '@angular/material/input';
import { MatTableModule } from '@angular/material/table';
import { MatToolbarModule } from '@angular/material/toolbar';


@NgModule({
  exports: [
    FlexLayoutModule,
    MatButtonModule,
    MatCardModule,
    MatInputModule,
    MatTableModule,
    MatToolbarModule
  ]
})
export class AppMaterialModule { }

expense.module.ts

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

import { AppMaterialModule } from '../../shared/app-material/app-material.module';
import { ExpenseComponent } from './expense.component';

@NgModule({
  declarations: [
    ExpenseComponent
  ],
  imports: [
    CommonModule,
    AppMaterialModule

  ]
})
export class ExpenseModule { }

expense.component.ts

import { Expense } from './../model/expense';
import { Component, OnInit } from '@angular/core';
//import { ExpenseModule } from './expense.module';

@Component({
  selector: 'app-expense',
  templateUrl: './expense.component.html',
  styleUrls: ['./expense.component.scss']
})
export class ExpenseComponent implements OnInit {

  expenses: Expense[] = [];
  displayedColumns = ['value', 'type', 'registrationDate'];

  constructor() { }

  ngOnInit(): void {
  }
}

expense.component.html

<mat-table [dataSource]="expenses" class="mat-elevation-z8">

  <!-- Value Column -->
  <ng-container matColumnDef="value">
    <mat-header-cell *matHeaderCellDef> Valor </mat-header-cell>
    <mat-cell *matCellDef="let expense"> {{ expense.value }} </mat-cell>
  </ng-container>

  <!-- Type Column -->
  <ng-container matColumnDef="type">
    <mat-header-cell *matHeaderCellDef> Tipo </mat-header-cell>
    <mat-cell *matCellDef="let expense"> {{ expense.type }} </mat-cell>
  </ng-container>

  <!-- Date Column -->
  <ng-container matColumnDef="registrationDate">
    <mat-header-cell *matHeaderCellDef> Data </mat-header-cell>
    <mat-cell *matCellDef="let expense"> {{ expense.registrationDate }} </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

ERRORS

Error: src/app/expense/expense/expense.component.html:1:1 - error NG8001: 'mat-table' is not a known element:
1. If 'mat-table' is an Angular component, then verify that it is part of this module.
2. If 'mat-table' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

1 <mat-table [dataSource]="expenses" class="mat-elevation-z8">
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/expense/expense/expense.component.ts:7:16
    7   templateUrl: './expense.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ExpenseComponent.


Error: src/app/expense/expense/expense.component.html:1:12 - error NG8002: Can't bind to 'dataSource' since it isn't a known property of 'mat-table'.       
1. If 'mat-table' is an Angular component and it has 'dataSource' input, then verify that it is part of this module.
2. If 'mat-table' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

1 <mat-table [dataSource]="expenses" class="mat-elevation-z8">
             ~~~~~~~~~~~~~~~~~~~~~~~

  src/app/expense/expense/expense.component.ts:7:16
    7   templateUrl: './expense.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ExpenseComponent.


Error: src/app/expense/expense/expense.component.html:5:5 - error NG8001: 'mat-header-cell' is not a known element:
1. If 'mat-header-cell' is an Angular component, then verify that it is part of this module.
2. If 'mat-header-cell' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

5     <mat-header-cell *matHeaderCellDef> Valor </mat-header-cell>
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/expense/expense/expense.component.ts:7:16
    7   templateUrl: './expense.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ExpenseComponent.


Error: src/app/expense/expense/expense.component.html:6:5 - error NG8001: 'mat-cell' is not a known element:
1. If 'mat-cell' is an Angular component, then verify that it is part of this module.
2. If 'mat-cell' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

6     <mat-cell *matCellDef="let expense"> {{ expense.value }} </mat-cell>
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/expense/expense/expense.component.ts:7:16
    7   templateUrl: './expense.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ExpenseComponent.


Error: src/app/expense/expense/expense.component.html:11:5 - error NG8001: 'mat-header-cell' is not a known element:
1. If 'mat-header-cell' is an Angular component, then verify that it is part of this module.
2. If 'mat-header-cell' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

11     <mat-header-cell *matHeaderCellDef> Tipo </mat-header-cell>
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/expense/expense/expense.component.ts:7:16
    7   templateUrl: './expense.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ExpenseComponent.


Error: src/app/expense/expense/expense.component.html:12:5 - error NG8001: 'mat-cell' is not a known element:
1. If 'mat-cell' is an Angular component, then verify that it is part of this module.
2. If 'mat-cell' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

12     <mat-cell *matCellDef="let expense"> {{ expense.type }} </mat-cell>
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/expense/expense/expense.component.ts:7:16
    7   templateUrl: './expense.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ExpenseComponent.


Error: src/app/expense/expense/expense.component.html:17:5 - error NG8001: 'mat-header-cell' is not a known element:
1. If 'mat-header-cell' is an Angular component, then verify that it is part of this module.
2. If 'mat-header-cell' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

17     <mat-header-cell *matHeaderCellDef> Data </mat-header-cell>
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/expense/expense/expense.component.ts:7:16
    7   templateUrl: './expense.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ExpenseComponent.


Error: src/app/expense/expense/expense.component.html:18:5 - error NG8001: 'mat-cell' is not a known element:
1. If 'mat-cell' is an Angular component, then verify that it is part of this module.
2. If 'mat-cell' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

18     <mat-cell *matCellDef="let expense"> {{ expense.registrationDate }} </mat-cell>
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/expense/expense/expense.component.ts:7:16
    7   templateUrl: './expense.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ExpenseComponent.


Error: src/app/expense/expense/expense.component.html:21:3 - error NG8001: 'mat-header-row' is not a known element:
1. If 'mat-header-row' is an Angular component, then verify that it is part of this module.
2. If 'mat-header-row' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

21   <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/expense/expense/expense.component.ts:7:16
    7   templateUrl: './expense.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ExpenseComponent.


Error: src/app/expense/expense/expense.component.html:22:3 - error NG8001: 'mat-row' is not a known element:
1. If 'mat-row' is an Angular component, then verify that it is part of this module.
2. If 'mat-row' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

22   <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/expense/expense/expense.component.ts:7:16
    7   templateUrl: './expense.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ExpenseComponent.




× Failed to compile.

Anyone can help?