Search code examples
angulardependenciescomponentsmat-card

Angular error: 1. If 'mat-card-actions' is an Angular component, then verify that it is part of this module

When I compile I get the following error:

  1. If ‘mat-card’ is an Angular component, then verify that it is part of this module.
  2. If ‘mat-card’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message. [plugin angular-compiler]

I imported everything correctly with app.module.ts I don’t know why I’m getting this?

My github: https://github.com/chrisspenceratx/myFlix-Angular-client

Solution

  • Well the problem lies in how you generated your Angular project, and how you're trying to use it.

    Your project was generated using Angular's standalone components and standalone bootstraping which DOES NOT uses an NgModule to boostrap the application :

    Here's you main.ts :

    import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

    The bootstrapApplication function is used to create an Angular app using a component, the AppComponent is used to bootstrap the application and your AppModule is entirely ignored, rendering the imports you made inside it useless.

    To fix this problem you can either convert the rest of your application to standalone component and get rid of your app.module, or bootstrap the application using the bootstrapModule function.

    Here's what you can replace your main.ts with :

    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

    This should fix the import errors.