Angular: "Can't bind to 'ngClass' since it isn't a known property of 'div'"

I recently came across a very annoying little error in my new Angular component library (available on npm and Github). Everything worked fine while I was developing locally, but when we ran ng build --prod we got a rather confusing error message:

ERROR in : Can't bind to 'ngClass' since it isn't a known property of 'div'. ("<div [ERROR ->][ngClass]="config.containerClasses" class="ea-multi-select-dropdown-container"> <label eaMultiSelec")

It took me a couple of hours to find the problem, and Google wasn't really helpful. See, usually the problem is that you haven't imported one of the necessary modules (BrowserModule from @angular/platform-browser if your component is in the root module, or CommonModule from @angular/common if your component is part of a separate module). I found answers like this and this and this all over the place, but every time I went back and looked at my code everything looked right to me.

I finally decided to start the whole project from scratch and run ng build --prod every time I added or changed something. Fortunately, this was pretty early on in the process so I didn't have much to redo, but it was still a pain to do it. I got the major pieces added back in and everything still worked fine.

Then I realized that in my focus on starting over I had neglected to recreate the fakes and mocks that I like to include in my components. Let me back up and explain.

When I create new components I find it helpful to include a "Fake" version of the component for unit testing purposes. This way when a consume of the component writes their own tests they don't have to worry about the behavior of my component. Instead of declaring the actual component (e.g. EaMultiSelectDropdownComponent) they can reference the fake version of the component (e.g. FakeEaMultiSelectDropdownComponent). The fake has all of the same properties and functions, but does none of the actual work. In this particular case I just extended the real component and overrode the functions in the fake component. As is often the case, my haste lead to my problem. I copy/pasted the original component and then made my changes to make it a fake, but I never changed the templateUrl of the fake component.

It turned out that everything really was done properly in my actual component, but the fake module into which I registered my fake component wasn't importing CommonModule so everything blew up when the AOT build ran. I was glad it turned out to be such an easy fix, and I doubt most people will have the same issue (since creating fakes for your components doesn't seem to be a popular approach), but since this blog is dedicated to documenting Answers I Couldn't Find Anywhere Else it was worth writing up.