Angular NG8001 Build Errors

The NG8001 Error happens at ng-build, or ng-serve time when changes are made to things like the import statements, or when adding new modules.

The message is trying to tell us that it can't find this component.

These are some of the causes and how to fix them.

app.module Import Not Right

// This is what was shown at compile time if the import isn't right
src/app/components/parsing/search/search.component.html:25:9 - error NG8001: 'mat-spinner' is not a known element:
1. If 'mat-spinner' is an Angular component, then verify that it is part of this module.
2. If 'mat-spinner' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

25         <mat-spinner style="width: 20px; height:20px;" mode='indeterminate'></mat-spinner>

This error message, and others just like it are caused by improper import statements. The modules are always found within the first folder of the component area. Like this.

// the correct syntax is:
import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";

// the incorrect syntax is:
import { MatProgressSpinnerModule } from "@angular/material/progress-spinner/progress-spinner";

// No error shows here even when directory is wrong

Module Import Root Cause

Assume you want to bundle a folder that has 5 or 6 related components, this is a good time to create a module. But don't forget to add a reference to app.module, or else you'll see this.

Whenever a new module is included there are two critical things to consider.

• Does the new module export the components others will need?
• Does the main app.module import the new module?

We had a folder with very specific Parsing functions, we wanted to create a module of those 5 components.

So the parser.module.ts was created and contains this:

Good so far, we now have one module with 5 components, and their dependencies. Now we want the main app.module to import the new module.

Now we can use those components in other components within the app.module.

Comments

[Abhishek Kumar]

'app-table' is not a known element:

1. If 'app-table' is an Angular component, then verify that it is part of this module.
2. If 'app-table' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.ngtsc(-998001) app.component.ts(3, 18): Error occurs in the template of component AppComponent.