NgModule fails to compile when adding any angular-material or custom components

[spice siren]

I have a component that, when given any AngularMaterial child component or a child component with angular material components, will fail to compile.

The parent module has its own component in which it lays out its children.

I cannot replicate the issue in stackblitz. I also obviously cannot readily replicate the module tree of my project in stackblitz. Regardless, here's a link: https://jake.stackblitz.com/edit/angular-material2-dropdown-button-7aneev?file=src%2Fapp%2Fapp.component.scss,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fchild%2Fchild.component.html

This component was generated with the ng generator: once with generating the module and filling out the component by hand, another time by generating the component and creating the module by hand. Same result.

Below are the modules and component templates in question:

Parent module:```ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {AutomateComponent} from "./automate.component";
import {MatCardModule} from "@angular/material/card";

@NgModule({
declarations: [
AutomateComponent,
],
imports: [
CommonModule,
MatCardModule
]
})
export class AutomateModule { }

Parent Component:

import {Component} from "@angular/core";

@Component({
  selector: "app-automate",
  templateUrl: "automate.component.html",
  styleUrls: ["./automate.component.scss"],
})
export class AutomateComponent {}

Parent Component HTML template:

<mat-card></mat-card>

The stylesheet is empty.

Emitted 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.

1 <mat-card>
  ~~~~~~~~~~

  automate.component.ts:5:16
    5   templateUrl: "automate.component.html",
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AutomateComponent.

The same error occurs is this component is given a child component in the template and in the NgModule declarations array

[quick hull]

You need to add the NgModule for mat-card to the NgModule imports of the AutomateComponent

Make sure you only have AutomateComponent declared in one NgModule.

Make sure where you are using <app-automate></app-automate> you are doing so by importing AutomateModule.

Also, try restarting your ng serve or ng build

[spice siren]

Isnt that what i've done here:

[spice siren]

^

[spice siren]

I regexed my codebase and am only declaring AutomateComponent once. I am not directly calling the selector, but instead using the router to render the component

[quick hull]

Did you import AutomateModule into the NgModule that imports the RoutingModule that has a path with the component AutomateComponent?

[spice siren]

Thank you so much! that was the issue. Is there some method to how opaque angular's compiler errors are or does chasing this stuff down just come with experience?

I never would have guessed that the problem would have been in a completely different component from that message

[quick hull]

standalone components will help in v14 I think

[spice siren]

I'll take a look