<selector> is not a known element Angular 9 custom library

Question

I'm trying to create a custom library that will have both a service and component. When I do this however, I get the common " is not a known element" error.

This happens even when I do a very minimal example. Steps to reproduce:

1. ng new example --create-application=false
2. cd example && ng g library example-lib
3. ng g application example-app
4. ng build example-lib
5. Import the module from example-lib project into example-app:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ExampleLibModule } from 'example-lib';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ExampleLibModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

6. Add the component to the app.component.ts in example-app:

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

@Component({
  selector: 'app-root',
  template: `<lib-example-lib></lib-example-lib>`,
  // templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'example-app';
}

If I follow the above steps, I get the error described. This seems to be a problem only with the components because if I add a dummy method to the service in example-lib:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ExampleLibService {

  constructor() { }

  hello() {
    return 'hello';
  }
}

and then import that service into my example-app component:

import { Component } from '@angular/core';
import { ExampleLibService } from 'example-lib';

@Component({
  selector: 'app-root',
  // template: `<lib-example-lib></lib-example-lib>`,
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'example-app';
  constructor(private exampleService: ExampleLibService) {
    this.title = this.exampleService.hello();
  }
}

Doing this, everything works fine and I can access my service just fine. So, it only seems to be a problem with the component, but everything has out-of-the-box configuration from the angular cli. Any guidance would be very appreciated!

My system:

Angular CLI: 9.1.8
Node: 12.15.0
OS: darwin x64

Answer 1

It turns out something in my node_modules was causing the problem. I removed them (rm -rf node_modules) and reinstalled npm install and that (weirdly) seemed to solve it.