Resolving Angular Error NG8001. Not as obvious as you'd think.

  So I've been working on a little Angular project and ran across an error.  It appears to be a common enough error, but as I went looking for the solution, I discovered that much of the advice you'd get for looking for this solution tends to overthink the issue, and wasn't helping.  Now, I realize that this error is because of a pretty basic problem, but what was strange to me is that I was following an Angular tutorial step by step to ensure I wasn't missing anything, and I still had the problem.

Not All Tutorials Are Created Equal

  There are some really fantastic tutorials out there for just about anything you can think of.  There are also a good number of ones that... aren't fantastic.  The biggest difference seems to be the level of detail, which is a function of how much the author of the tutorial either assumes the reader knows already or just doesn't think of it because it's second nature to them.  It's like if a seasoned Java developer writes a tutorial and neglects to mention the minimum Java version you need to use the 'record' keyword.  They don't consciously think of it when writing a tutorial because it's second nature to them, but a person who actually needs to use the tutorial isn't necessarily aware of it.

  Thus, I found even a simple Angular tutorial to be lacking some very essential information.  Here's what I found on my own.

If you've got a NG8001 error...

  You'll find you have this problem pretty quick if you go to run your Angular application and it won't compile because:

✘ [ERROR] NG8001: 'app-heroes' is not a known element:

1. If 'app-heroes' is an Angular component, then verify that it is included in the '@Component.imports' of this component.

2. If 'app-heroes' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message. [plugin angular-compiler]

It seems pretty obvious at first glance.  Well, of course, you have to import your component.  But what if the tutorial is a bit vague on exactly how to do it?  Here's how I fixed it.  Yes, I understand this is super basic.  Yes, I understand that a seasoned Angular developer isn't likely to make this mistake.  But you know, we do sometimes forget if we haven't used a particular skill for a while, or if we take a tutorial as being gospel, even when we know better.  So this is for all the folks who are new to Angular, or who aren't new to it but just made one of those goofy Friday afternoon mistakes.

Let's assume our Angular project file structure has its custom components in a folder called 'components.'  Let's further assume that each custom component is in its own folder.  (All of which should be true.)  

Note:  A custom component is what they mean by "Angular component" in the error message output.

Let's say your root component (app.component) needs to import your custom component (in this case, heroes.component).  You've already referenced this component in your root component template, which is what triggered the error.  To import it, you have to do two things, both in the app.component.ts file:

First, you add an import statement to the list of imports at the top of the file:

import { HeroesComponent } from './components/heroes/heroes.component';

Note a couple of things here.  First, you don't need the '.ts' extension for your component.  For one thing, you're referencing the whole component, not just one file in it.  (I know there's a way to override it and make that work, but I'm not aware, off the top of my head, how that benefits you.)  

Also note that we're following the file structure I described earlier.  This is what allows you to organize your project.

The second thing you need to do is add the component to the array of imports in the @Component decorator:

imports: [RouterOutlet, HeroesComponent],

Note that we're using the class name for the component, not the selector.

And that's it.  Your component has been imported.

Again, I know this is a very simple, basic, newbie-type issue, but it struck me as odd that nobody out there seems to be listing it as one possible cause when people are searching for help on the NG8001 error.  

Note that this assumes you're using Angular 17+.