5

Angular 9 mat-card-actions' is not a known element, I have imported and exported the Angular material modules but I get the following error:

 mat-card-actions' is not a known element:
 mat-grid-tile' is not a known element:

here is the code app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PostsComponent } from './content/components/posts/posts.component';
import { DefaultComponent } from './default/default.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatSidenavModule} from '@angular/material/sidenav';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatIconModule} from '@angular/material/icon';
import {MatButtonModule} from '@angular/material/button';
import {MatListModule} from '@angular/material/list';
import {MatExpansionModule} from '@angular/material/expansion';
import {MatTooltipModule} from '@angular/material/tooltip';
import {MatGridListModule} from '@angular/material/grid-list';
import {MatMenuModule} from '@angular/material/menu';
import {MatCardModule} from '@angular/material/card';


import { RouterModule } from '@angular/router';

const mats=[
  BrowserAnimationsModule,
  MatSidenavModule,
  MatToolbarModule,
  MatIconModule,
  MatButtonModule,
  RouterModule,
  MatListModule,
  MatExpansionModule,
  MatTooltipModule,
  MatGridListModule,
  MatMenuModule,
  MatCardModule
]

@NgModule({
  declarations: [
    AppComponent,
    PostsComponent,
    DefaultComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    mats,
    BrowserAnimationsModule
  ],
  exports:[mats],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Here is the component.html code:

 <mat-card class="example-card">
    <mat-card-header>
      <div mat-card-avatar class="example-header-image"></div>
      <mat-card-title>Shiba Inu</mat-card-title>
      <mat-card-subtitle>Dog Breed</mat-card-subtitle>
    </mat-card-header>
    <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
    <mat-card-content>
      <p>
        The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
        A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
        bred for hunting.
      </p>
    </mat-card-content>
    <mat-card-actions>
      <button mat-button>LIKE</button>
      <button mat-button>SHARE</button>
    </mat-card-actions>
  </mat-card>
MJ X
  • 8,506
  • 12
  • 74
  • 99

3 Answers3

1

The Errors were part of the new Ivy compiler

I fixed it by going to tsconfig and set enableIvy to false

"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true,
"enableIvy":false
}
MJ X
  • 8,506
  • 12
  • 74
  • 99
0

Here's the answer to the issue; https://stackoverflow.com/a/41346069/1494662 Import CUSTOM_ELEMENTS_SCHEMA & include it in the schemas on your appmodule.

Menzi
  • 328
  • 2
  • 12
0

Just in case it works, I found that including ... within the mat-header template element worked with a correctly imported MatCardModule. If not, please keep reading.

--

It looks like you have a module scoping issue. You can ready about the Angular SCAM pattern and its benefits here (https://angular-training-guide.rangle.io/modules/module-scam-pattern) and here (https://medium.com/marmicode/your-angular-module-is-a-scam-b4136ca3917b). These posts will help you to understand how the scoping of modules within modules and their respective imports works.

Essentially, you're trying to utilize a module that you have made available to one module when it's the case that an altogether different module you are using does not have access to a particular import scope, ex. you have an app.module.ts with your AppModule class, a material.module.ts you're using with MaterialModule class, and you have another module / component that cannot access the proper scope to utilize both the bootstrapping done in the AppModule class and the imports you want from the MaterialModule class.

You can fix this with properly placed exports of each module, leading to what typically becomes a large shared module, or you can follow a model like the SCAM module or utilize standalone components to keep imports, exports, providers, etc. a bit more intuitive as far as their scope.

Keep in mind that with module import alterations that you'll want to recompile (re-serve) the Angular application.

Reid Young
  • 26
  • 3