Material components are not known elements, but they are exported by a module and imported

0
votes

I'm having a really weird problem with Angular 9.

Expected behaviour: a component declared in a module that imports MatDividerModule can use <mat-divider></mat-divider> in its template.

Actual behaviour: The component "compilation" fails with error:

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

Keep in mind that the module that declares this component has the MatDividerModule imported:

@NgModule({
  declarations: [ComponentComponent],
  imports: [
    CommonModule,
    MatDividerModule,
  ],
  exports: [ComponentComponent]
})
export class MyModule { }

Additional info: I'm using a lot of the material components in other places in my project and it's working fine. I tried importing everything in my module that the other modules imported, but it still failed with the same error.

1
angular
It should work. Do u have any other module or testing class which fails due to not the inclusion of this module - PushpikaWan
Any new module that i create has the same problem. But if i add a new component to old modules it works. Also it works if i add a new component in a new module that is inside an old module. - Francesco Manicardi

1 Answers

0
votes

I ended up reinstalling the angular cli and creating a completely new project to troubleshoot this, and created a new question because the context was completly different.

Angular Material Official Getting Started build succeeds, but adding a new module fails

The solution was to import the new module in the app.module